Géolocalisation

index.php

@@ -55,6 +55,30 @@
                     var marker = L.marker([city.lat, city.lon]).addTo(map);
                     marker.bindPopup('<a href="' + city.href + '" target="_blank">' + city.name + '</a>');
                 });
+
+                if ("geolocation" in navigator) {
+                    navigator.geolocation.getCurrentPosition(function (position) {
+                        var lat = position.coords.latitude;
+                        var lon = position.coords.longitude;
+
+                        // Créer une icône CSS personnalisée avec une taille ajustée selon le niveau de zoom
+                        var customIcon = L.divIcon({
+                            className: 'red-marker',
+                            iconSize: [15, 15], // Taille du marqueur ajustée
+                            iconAnchor: [5, 5],
+                            popupAnchor: [0, -3]
+                        });
+
+                        // Ajouter le marqueur avec l'icône personnalisée à la position de l'utilisateur
+                        var marker = L.marker([lat, lon], { icon: customIcon }).addTo(map)
+                            .bindPopup('Vous êtes là !')
+
+
+                        // Centrer la carte sur la position de l'utilisateur
+                        map.setView([lat, lon], 9);
+                    });
+                }
+
             </script>
         </div>
         <div class="cities-column">

style.css

@@ -4,6 +4,13 @@
     margin: 0 ;
 }
 
+.red-marker {
+    background-color: red;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+  }
+
 .container {
     display: flex;
     flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si nécessaire */