Discussion :

[Spatah]

Bonjour à tous,

Je viens vers vous car je suis débutante en Javascript, et j'ai un petit souci pour lequel je n'arrive pas à trouver de solution.

Je crée actuellement une carte interactive (Leaflet), sur laquelle s'affichent des marqueurs récupérés via une API.
Je souhaite pouvoir utiliser markerClusterGroup pour regrouper mes marqueurs mais je n'arrive pas à le faire fonctionner : les marqueurs ne s'affichent plus, pas de markerCluster en vue...

Une âme charitable pour jeter un oeil à ce que j'ai fait ?

Merci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
var markersCluster = L.markerClusterGroup();
 
ajaxGet(
  "https://api.jcdecaux.com/vls/v1/stations?contract=Nantes&apiKey",
  function (reponse) {
    var stations = JSON.parse(reponse);
    stations.forEach(function (station) {
 
      var marker = L.marker([
        station.position.lat,
        station.position.lng
      ])
 
      marker.addEventListener("click", function (e) {
        document.getElementById("nomInfo").innerHTML = station.name;
        document.getElementById("adresseInfo").innerHTML = station.address;
        document.getElementById("infosReservation").style.display = "block";
 
        markersCluster.addLayer(marker);
        map.addLayer(markersCluster);
 
        });    
    });          
  }
);

[mathieu]

là vous appelez "markersCluster.addLayer" quand on clique sur un marqueur.
ce n'est peut-être pas ce que vous cherchez à faire ?

[Spatah]

Bonjour, et merci pour le retour.
Effectivement, ce n'est pas ce que je cherche à faire ...
J'ai tenté une nouvelle approche, mais sans succès. Peux-tu m'aiguiller ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
var markersCluster = L.markerClusterGroup();
 
ajaxGet(
  "https://api.jcdecaux.com/vls/v1/stations?contract=Nantes&apiKey",
  function (reponse) {
    var stations = JSON.parse(reponse);
    stations.forEach(function (station) {
 
      var marker = L.marker([
        station.position.lat,
        station.position.lng
      ])
 
      markersCluster.addLayer(marker);
 
      marker.addEventListener("click", function (e) {
        document.getElementById("nomInfo").innerHTML = station.name;
        document.getElementById("adresseInfo").innerHTML = station.address;
        document.getElementById("infosReservation").style.display = "block";
 
      });
 
    });
 
map.addLayer(markersCluster);
 
  });

[NoSmoking]

Bonjour,

... mais je n'arrive pas à le faire fonctionner : les marqueurs ne s'affichent plus, pas de markerCluster en vue...

as tu pris en compte le fichier CSS de markerCluster ?

Par exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css">

[Spatah]

Bonjour,
Merci de ta réponse, c'était bien ce type de problème. J'ai revu les CSS + scripts Leaflet et tout fonctionne parfaitement !
Belle journée.