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 :(

Aucune réponse