Géolocalisation
This commit is contained in:
parent
b3a99ba367
commit
8a0e1faa2f
File diff suppressed because one or more lines are too long
24
index.php
24
index.php
|
@ -55,6 +55,30 @@
|
||||||
var marker = L.marker([city.lat, city.lon]).addTo(map);
|
var marker = L.marker([city.lat, city.lon]).addTo(map);
|
||||||
marker.bindPopup('<a href="' + city.href + '" target="_blank">' + city.name + '</a>');
|
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>
|
</script>
|
||||||
</div>
|
</div>
|
||||||
<div class="cities-column">
|
<div class="cities-column">
|
||||||
|
|
|
@ -4,6 +4,13 @@
|
||||||
margin: 0 ;
|
margin: 0 ;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.red-marker {
|
||||||
|
background-color: red;
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si nécessaire */
|
flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si nécessaire */
|
||||||
|
|
Loading…
Reference in New Issue