Rework of the entier weather part, add the distance between your position and the school

plan.html

@@ -49,125 +49,49 @@
         <h1 class="titre">Brest:</h1>
         <h2>Météo a Brest:</h2>
           <div class="weatherWidgetBrest" ></div>
-
-          <script>
-              window.weatherWidgetConfig =  window.weatherWidgetConfig || [];
-              window.weatherWidgetConfig.push({
-                  selector:".weatherWidgetBrest",
-                  apiKey:"HSXAUKHU5AF2ER6WJAL8CBKSF", //Sign up for your personal key
-                  location:"Brest, FR", //Enter an address
-                  unitGroup:"metric", //"us" or "metric"
-                  forecastDays:5, //how many days forecast to show
-                  title:"", //optional title to show in the
-                  showTitle:true,
-                  showConditions:true
-              });
-
-              (function() {
-                  var d = document, s = d.createElement('script');
-                  s.src = 'https://www.visualcrossing.com/widgets/forecast-simple/weather-forecast-widget-simple.js';
-                  s.setAttribute('data-timestamp', +new Date());
-                  (d.head || d.body).appendChild(s);
-              })();
-          </script>
         <h1 class="titre">Venir en train + bus:</h1>
         <p class="text">A partir de la gare de Brest, prendre le bus 03 en direction Lambézellecde Gouesnou à l’arrêt Gambetta Gare jusqu'à l’arrêt Gay Lussac.</p><br>
         <h1 class="titre">Venir en voiture:</h1>
         <p class="text">En arrivant de Rennes (D112): Au rond point, prendre la 2e sortie puis au rond point suivant, prendre la 1ère sortie, puis prendre la 1 à gauche, puis tourner immédiatement à droite, au rond point prendre la 2e sortie. Vous êtes arrivé !</p>
-        <div style="max-width:100%;overflow:hidden;color:red;width:100%;height:100%;"><div id="my-map-canvas" style="height:100%; width:100%;max-width:100%;"><iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=ISEN+Brest.+Institut+Supérieur+de+l'Electronique+et+du+Numérique,+Rue+Cuirassé+Bretagne,+Brest,+France&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"></iframe></div><style>#my-map-canvas img.text-marker{max-width:none!important;background:none!important;}img{max-width:none}</style></div>
+        <div style="max-width:100%;overflow:hidden;color:red;width:100%;height:100%;"><div id="my-map-canvasBrest" style="height:100%; width:100%;max-width:100%;"><iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=ISEN+Brest.+Institut+Supérieur+de+l'Electronique+et+du+Numérique,+Rue+Cuirassé+Bretagne,+Brest,+France&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"></iframe></div><style>#my-map-canvas img.text-marker{max-width:none!important;background:none!important;}img{max-width:none}</style></div>
+        <button id="distanceBrestButton" class="carteButton">Calculer la distance !</button>
+        <div id="distanceBrest"></div>
       </div>
       <div id="Nantes">
         <h1 class="titre">Nantes:</h1>
           <h2>Météo a Nantes:</h2>
           <div class="weatherWidgetNantes" ></div>
-
-          <script>
-              window.weatherWidgetConfig =  window.weatherWidgetConfig || [];
-              window.weatherWidgetConfig.push({
-                  selector:".weatherWidgetNantes",
-                  apiKey:"HSXAUKHU5AF2ER6WJAL8CBKSF", //Sign up for your personal key
-                  location:"Nantes, FR", //Enter an address
-                  unitGroup:"metric", //"us" or "metric"
-                  forecastDays:5, //how many days forecast to show
-                  title:"", //optional title to show in the
-                  showTitle:true,
-                  showConditions:true
-              });
-
-              (function() {
-                  var d = document, s = d.createElement('script');
-                  s.src = 'https://www.visualcrossing.com/widgets/forecast-simple/weather-forecast-widget-simple.js';
-                  s.setAttribute('data-timestamp', +new Date());
-                  (d.head || d.body).appendChild(s);
-              })();
-          </script>
         <h1 class="titre">Venir en train + bus:</h1>
         <p class="text">A partir de la gare de Nantes, prendre le tram 1 en direction Beaujoire à l’arrêt Gare Nord jusqu'à l’arrêt Halvêque puis rejoindre l’arrêt de bus Boulodrome Halvêque de la ligne 95. Descendre à l’arrêt ICAM puis marcher jusqu’au campus.</p><br>
         <h1 class="titre">Venir en voiture:</h1>
         <p class="text">Le campus propose un parking ouvert accessible aux étudiants mais ce parking est rapidement saturé. On vous conseille de privilégier d’ autres moyens de transport : il y a des bus et un parking à vélos ! <br>A partir de l’A11:<br> En venant de Rennes: prendre la sortie 23. Au 1er rond-point prendre la 5e sortie, au rond-point suivant prendre la 2e sortie puis suivre le fléchage ICAM.<br> En venant de Nantes: prendre la sortie 24. Au 1er rond-point prendre la 1ère sortie, puis au 3 rond-point suivant prendre tout droit puis suivre le fléchage ICAM.</p>
-        <div style="max-width:100%;overflow:hidden;color:red;width:100%;height:100%;"><div id="my-map-canvas" style="height:100%; width:100%;max-width:100%;"><iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=ISEN+Nantes,+Avenue+du+Champ+de+Manœuvre,+Carquefou,+France&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"></iframe></div><style>#my-map-canvas img.text-marker{max-width:none!important;background:none!important;}img{max-width:none}</style></div>
+        <div style="max-width:100%;overflow:hidden;color:red;width:100%;height:100%;"><div id="my-map-canvasNantes" style="height:100%; width:100%;max-width:100%;"><iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=ISEN+Nantes,+Avenue+du+Champ+de+Manœuvre,+Carquefou,+France&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"></iframe></div><style>#my-map-canvas img.text-marker{max-width:none!important;background:none!important;}img{max-width:none}</style></div>
+        <button id="distanceNantesButton" class="carteButton">Calculer la distance !</button>
+        <div id="distanceNantes"></div>
       </div>
       <div id="Rennes">
         <h1 class="titre">Rennes:</h1>
           <h2>Météo a Rennes:</h2>
           <div class="weatherWidgetRennes" ></div>
-
-          <script>
-              window.weatherWidgetConfig =  window.weatherWidgetConfig || [];
-              window.weatherWidgetConfig.push({
-                  selector:".weatherWidgetRennes",
-                  apiKey:"HSXAUKHU5AF2ER6WJAL8CBKSF", //Sign up for your personal key
-                  location:"Rennes, FR", //Enter an address
-                  unitGroup:"metric", //"us" or "metric"
-                  forecastDays:5, //how many days forecast to show
-                  title:"", //optional title to show in the
-                  showTitle:true,
-                  showConditions:true
-              });
-
-              (function() {
-                  var d = document, s = d.createElement('script');
-                  s.src = 'https://www.visualcrossing.com/widgets/forecast-simple/weather-forecast-widget-simple.js';
-                  s.setAttribute('data-timestamp', +new Date());
-                  (d.head || d.body).appendChild(s);
-              })();
-          </script>
         <h1 class="titre">Venir en train + bus:</h1>
         <p class="text">A partir de la gare de Rennes, prendre le bus C4 en direction Grand Quartier à l’arrêt Musée Beaux Arts jusqu'à l’arrêt Préfecture puis marcher jusqu’au campus.</p><br>
         <h1 class="titre">Venir en voiture:</h1>
         <p class="text">L’ISEN est présent sur le campus de Rennes School of Buisness.<br>En venant de Saint-Malo (D137): Au rond-point prendre la 1ère sortie, au rond-point suivant prendre la 2e sortie puis au rond-point prendre la 3e sortie. Au rond-point suivant prendre la 2e sortie puis enfin prendre la 3e sortie. <br>En venant de Paris: Prendre la rocade est, puis sortir a la porte de Beauregard (sortie 13a), puis suivre les mêmes instructions que pour Saint-Malo</p>
-        <div style="max-width:100%;overflow:hidden;color:red;width:100%;height:100%;"><div id="my-map-canvas" style="height:100%; width:100%;max-width:100%;"><iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=ISEN+Rennes,+Rue+Robert+d'Arbrissel,+Rennes,+France&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"></iframe></div><style>#my-map-canvas img.text-marker{max-width:none!important;background:none!important;}img{max-width:none}</style></div>
+        <div style="max-width:100%;overflow:hidden;color:red;width:100%;height:100%;"><div id="my-map-canvasRennes" style="height:100%; width:100%;max-width:100%;"><iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=ISEN+Rennes,+Rue+Robert+d'Arbrissel,+Rennes,+France&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"></iframe></div><style>#my-map-canvas img.text-marker{max-width:none!important;background:none!important;}img{max-width:none}</style></div>
+        <button id="distanceRennesButton" class="carteButton">Calculer la distance !</button>
+        <div id="distanceRennes"></div>
       </div>
       <div id="Caen">
         <h1 class="titre">Caen:</h1>
           <h2>Météo a Caen:</h2>
           <div class="weatherWidgetCaen" ></div>
-
-          <script>
-              window.weatherWidgetConfig =  window.weatherWidgetConfig || [];
-              window.weatherWidgetConfig.push({
-                  selector:".weatherWidgetCaen",
-                  apiKey:"HSXAUKHU5AF2ER6WJAL8CBKSF", //Sign up for your personal key
-                  location:"Caen, FR", //Enter an address
-                  unitGroup:"metric", //"us" or "metric"
-                  forecastDays:5, //how many days forecast to show
-                  title:"", //optional title to show in the
-                  showTitle:true,
-                  showConditions:true
-              });
-
-              (function() {
-                  var d = document, s = d.createElement('script');
-                  s.src = 'https://www.visualcrossing.com/widgets/forecast-simple/weather-forecast-widget-simple.js';
-                  s.setAttribute('data-timestamp', +new Date());
-                  (d.head || d.body).appendChild(s);
-              })();
-          </script>
         <h1 class="titre">Venir en train + bus:</h1>
         <p class="text">A partir de la gare de Caen, prendre le tram 1 en direction HEROUVILLE St-Clair à l’arrêt Gare SNCF jusqu'à l’arrêt Bernières, Caen puis marcher jusqu’au campus.</p><br>
         <h1 class="titre">Venir en voiture:</h1>
         <p class="text">A partir de l’A84: Prendre le périphérique sud puis sortir a la sortie 5, tournez a droite a la 6e rue, puis prendre la 1ère a droite.<br>En venant de l’A13: Prendre le périphérique nord puis la sortie 4. Au rond point prendre la 3e sortie, puis au suivant la 1ère sortie puis prendre la 3e a droite, au bout tourner à gauche, continuez tous droit jusqu’a l’ISEN.</p>
-        <div style="max-width:100%;overflow:hidden;color:red;width:100%;height:100%;"><div id="my-map-canvas" style="height:100%; width:100%;max-width:100%;"><iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=ISEN+Caen,+Avenue+Croix+Guérin,+Caen,+France&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"></iframe></div><style>#my-map-canvas img.text-marker{max-width:none!important;background:none!important;}img{max-width:none}</style></div>
+        <div style="max-width:100%;overflow:hidden;color:red;width:100%;height:100%;"><div id="my-map-canvasCaen" style="height:100%; width:100%;max-width:100%;"><iframe style="height:100%;width:100%;border:0;" frameborder="0" src="https://www.google.com/maps/embed/v1/place?q=ISEN+Caen,+Avenue+Croix+Guérin,+Caen,+France&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"></iframe></div><style>#my-map-canvas img.text-marker{max-width:none!important;background:none!important;}img{max-width:none}</style></div>
+        <button id="distanceCaenButton" class="carteButton">Calculer la distance !</button>
+        <div id="distanceCaen"></div>
       </div>
     </div>
     <footer>

src/css/style_plan.css

@@ -30,6 +30,16 @@ img{
     height: 100px;
 }
 
+.carteButton{
+    background-color: #515c3a;
+    color: white;
+    width: 30%;
+    height: auto;
+    border-radius: 10px;
+    border: none;
+    padding: 5px;
+}
+
 @media (max-width: 1200px) {
     #main{
         flex-direction: column;

src/js/InfosEtContact/plan/plan.js

@@ -1,24 +1,184 @@
 document.addEventListener('DOMContentLoaded', function() {
-   /*
-   const planRennes = document.getElementById('buttonRennes');
-   planRennes.addEventListener('click', function() {
-      const modal = document.createElement('div');
-      modal.className = 'modal';
-      const modalContent = document.createElement('div');
-      modalContent.className = 'modal-content';
-      const closeBtn = document.createElement('span');
-      closeBtn.className = 'close';
-      closeBtn.innerHTML = '×';
-      closeBtn.addEventListener('click', function() {
-          modal.style.display = 'none';
-      });
-      modalContent.appendChild(closeBtn);
-      const plan = document.createElement('div');
-      plan.innerHTML = '<div style="overflow:hidden;width: 700px;position: relative;"><iframe width="700" height="440" src="https://maps.google.com/maps?width=700&amp;height=440&amp;hl=en&amp;q=ISEN%20Rennes+(Titre)&amp;ie=UTF8&amp;t=&amp;z=13&amp;iwloc=B&amp;output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe><div style="position: absolute;width: 80%;bottom: 10px;left: 0;right: 0;margin-left: auto;margin-right: auto;color: #000;text-align: center;"><small style="line-height: 1.8;font-size: 2px;background: #fff;">Powered by <a href="https://embedgooglemaps.com/de/">embedgooglemaps DE</a> & <a href="https://solitairespider.co/">https://solitairespider.co/</a></small></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div><br />';
-      modalContent.appendChild(plan);
-      modal.appendChild(modalContent);
-      modal.style.display = 'block';
-      document.body.appendChild(modal);
-   });
-    */
-});
+    //Partie GPS
+
+    // Coordonnées GPS de l'ISEN Brest
+    const isenBrestCoords = { lat: 48.406824, lng: -4.495341 };
+    const isenNantesCoords = { lat: 47.274389, lng: -1.505243};
+    const isenRennesCoords = { lat: 48.127666, lng: -1.691556};
+    const isenCaenCoords = { lat: 49.182666, lng: -0.370666};
+
+    // Fonction pour calculer la distance entre deux coordonnées géographiques
+    function calculateDistanceBrest(position) {
+        let userCoords = {
+            lat: position.coords.latitude,
+            lng: position.coords.longitude
+        };
+
+        // Calcul de la distance en kilomètres
+        let distanceBrest = getDistanceFromLatLonInKm(userCoords, isenBrestCoords);
+        // Affichage de la distance
+        let distanceBrestElement = document.getElementById("distanceBrest");
+        distanceBrestElement.textContent =
+            "Distance entre votre position et l'ISEN Brest : " + distanceBrest + " km";
+    }
+
+    function calculateDistanceNantes(position){
+        let userCoords = {
+            lat: position.coords.latitude,
+            lng: position.coords.longitude
+        };
+
+        let distanceNantes = getDistanceFromLatLonInKm(userCoords, isenNantesCoords);
+        let distanceNantesElement = document.getElementById("distanceNantes");
+        distanceNantesElement.textContent =
+            "Distance entre votre position et l'ISEN Nantes : " + distanceNantes + " km";
+    }
+
+    function calculateDistanceRennes(position){
+        let userCoords = {
+            lat: position.coords.latitude,
+            lng: position.coords.longitude
+        };
+
+        let distanceRennes = getDistanceFromLatLonInKm(userCoords, isenRennesCoords);
+        let distanceRennesElement = document.getElementById("distanceRennes");
+        distanceRennesElement.textContent =
+            "Distance entre votre position et l'ISEN Rennes : " + distanceRennes + " km";
+    }
+
+    function calculateDistanceCaen(position){
+        let userCoords = {
+            lat: position.coords.latitude,
+            lng: position.coords.longitude
+        };
+
+        let distanceCaen = getDistanceFromLatLonInKm(userCoords, isenCaenCoords);
+        let distanceCaenElement = document.getElementById("distanceCaen");
+        distanceCaenElement.textContent =
+            "Distance entre votre position et l'ISEN Caen : " + distanceCaen + " km";
+    }
+
+    // Fonction pour calculer la distance entre deux coordonnées géographiques en kilomètres
+    function getDistanceFromLatLonInKm(coords1, coords2) {
+        let earthRadius = 6371; // Rayon de la Terre en kilomètres
+        let dLat = deg2rad(coords2.lat - coords1.lat);
+        let dLon = deg2rad(coords2.lng - coords1.lng);
+        let a =
+            Math.sin(dLat / 2) * Math.sin(dLat / 2) +
+            Math.cos(deg2rad(coords1.lat)) *
+            Math.cos(deg2rad(coords2.lat)) *
+            Math.sin(dLon / 2) *
+            Math.sin(dLon / 2);
+        let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+        let distance = earthRadius * c;
+        return distance.toFixed(2);
+    }
+
+    function deg2rad(deg) {
+        return deg * (Math.PI / 180);
+    }
+
+    let carteBrest = document.getElementById("distanceBrestButton");
+    carteBrest.addEventListener("click", function() {
+        // Obtention de la position de l'utilisateur
+        if(navigator.geolocation){
+            navigator.geolocation.getCurrentPosition(
+                function(position) {
+                    calculateDistanceBrest(position);
+                },
+                function(error) {
+                    if (error.code === error.PERMISSION_DENIED) {
+                        alert("Vous avez refusé la géolocalisation.");
+                    }
+                });
+        }
+        else {
+            alert("La géolocalisation n'est pas supportée par votre navigateur.");
+        }
+    });
+
+    let carteNantes = document.getElementById("distanceNantesButton");
+    carteNantes.addEventListener("click", function() {
+        if(navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(
+                function(position) {
+                    calculateDistanceNantes(position);
+                },
+                function(error) {
+                    if (error.code === error.PERMISSION_DENIED) {
+                        alert("Vous avez refusé la géolocalisation.");
+                    }
+                });
+        }
+        else {
+            alert("La géolocalisation n'est pas supportée par votre navigateur.");
+        }
+    });
+
+    let carteRennes = document.getElementById("distanceRennesButton");
+    carteRennes.addEventListener("click", function() {
+        if(navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(
+                function(position) {
+                    calculateDistanceRennes(position);
+                },
+                function(error) {
+                    if (error.code === error.PERMISSION_DENIED) {
+                        alert("Vous avez refusé la géolocalisation.");
+                    }
+                });
+        }
+        else {
+            alert("La géolocalisation n'est pas supportée par votre navigateur.");
+        }
+    });
+
+    let carteCaen = document.getElementById("distanceCaenButton");
+    carteCaen.addEventListener("click", function() {
+        if(navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(
+                function(position) {
+                    calculateDistanceCaen(position);
+                },
+                function(error) {
+                    if (error.code === error.PERMISSION_DENIED) {
+                        alert("Vous avez refusé la géolocalisation.");
+                    }
+                });
+        }
+        else {
+            alert("La géolocalisation n'est pas supportée par votre navigateur.");
+        }
+    });
+
+    //Partie Météo
+
+    // Définir votre clé d'API
+    const apiKey = '03be1ec9a991156f495f1430c1ad67e0';
+
+    // Récupérer les données météorologiques pour chaque ville
+    function getWeather(city, elementId) {
+        const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`;
+
+        fetch(url)
+            .then(response => response.json())
+            .then(data => {
+                const weatherData = {
+                    temperature: data.main.temp,
+                    condition: data.weather[0].description
+                };
+
+                document.getElementById(elementId).innerHTML = `Météo à ${city} : ${weatherData.temperature}°C, ${weatherData.condition}`;
+            })
+            .catch(error => {
+                console.log('Une erreur s\'est produite :', error);
+            });
+    }
+
+    // Appeler la fonction pour chaque ville
+    getWeather('Brest', 'weatherWidgetBrest');
+    getWeather('Nantes', 'weatherWidgetNantes');
+    getWeather('Rennes', 'weatherWidgetRennes');
+    getWeather('Caen', 'weatherWidgetCaen');
+});
+