Hello j'essaye de faire une map avec des marqueurs avec Leaflet et OpenStreetMap sur Symfony !
Pour le moment j'avance pas trop mal, et je voulais rajouter l'option de fusionner les marques quand on dézoome. Après quelques recherche, cela est possibble avec un pluggin existant de Leafleet ! Mais depuis quelques heures je galère à le faire marcher
Donc voici mon petit code pour le moment :
const map = L.map('mymap');
const osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
const osmAttrib = 'Map data © OpenStreetMap contributors';
const osm = new L.tileLayer(osmUrl, {attribution: osmAttrib});
const pins = {
"Tours": {"lat":47.383333,"lon":0.683333},
"Blois": {"lat":47.5876861,"lon":1.3337639}
}
map.setView([47.7, 1.7], 8);
map.addLayer(osm);
const clusters = L.markerClusterGroup();
for (pin in pins){
let mark = L.marker([pins[pin].lat, pins[pin].lon]);
mark.addTo(map)
mark.bindPopup(pin)
}
map.addLayer(clusters)
Pour installer le pluggin j'ai suivi cette doc : https://github.com/Leaflet/Leaflet.markercluster et j'ai bien dans mon en tête :
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.4.1/dist/MarkerCluster.css" />
<script src="https://unpkg.com/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js "></script>
Au résultat j'ai bien ma map mais mes 2 pin ne fusionne pas
Ce que je veux
Je voudrais que mes marqueurs fusionne
Ce que j'obtiens
Pas d'erreur dans la console mais pas de fusion non plus :(
d3LTa7
