Leaflet Markercluster Plugin – Fetch GeoJSON Data Efficiently

htmlleafletleaflet-plugins

I am trying to make a Leaflet map with the markercluster plugin and to fetch data from its related json file. The goal is to display various properties of my points elsewhere on the page when clicking on one of them on the map (without using popup objects).

Using onEachFeature my code was working just fine:

var geojsonLayer = new L.GeoJSON.AJAX("data/loopk.json", {
     //display points
     pointToLayer: function(feature, latlng) {
       return L.circleMarker(latlng, geojsonMarkerOptions);
     },
     //display properties
     onEachFeature: function (featureData, featureLayer) {
     featureLayer.on('click', function() {
        document.querySelector('.img').src = featureData.properties.urlF;
        document.querySelector('.lemme').innerHTML = "Lemme : " + featureData.properties.lemme;
        document.querySelector('.forme').innerHTML = "Forme : " + featureData.properties.forme;
     });
     }
});
geojsonLayer.addTo(map);

Then I tried to implement the markercluster plugin like this:

var markers = L.markerClusterGroup();

var geojsonLayer = new L.GeoJSON.AJAX("data/loopk.json", {
     //display points
     pointToLayer: function(feature, latlng) {
       return markers.addLayer(L.circleMarker(latlng, geojsonMarkerOptions));
     },
     //display properties
     onEachFeature: function (featureData, featureLayer) {
     featureLayer.on('click', function() {
        document.querySelector('.img').src = featureData.properties.urlF;
        document.querySelector('.lemme').innerHTML = "Lemme : " + featureData.properties.lemme;
        document.querySelector('.forme').innerHTML = "Forme : " + featureData.properties.forme;
     });
     }
});
geojsonLayer.addTo(map);

When I run the code I get my clusters, but my fetching function doesn't work anymore: when I click on any marker, the properties of the last element of my json file are always displayed.

I tried to see what happens when replacing the content of my fetching function with a console.log('hello world') and I get this result:

> /985/ hello world

985 being the number of points on my map, it seems to me that the function runs on all elements and not on the one I click on.

Is something wrong with my layers ?

@TomazicM's answer worked for me, but only after I added a few code

var markers = L.markerClusterGroup();
geojsonLayer.on('data:loaded', function () {
    markers.addLayer(geojsonLayer);
});
map.addLayer(markers);

I don't understand why it works that way, I was able to find the solution using refilter method on geoJSON created with leaflet-ajax throws error, filtering works on load, no jQuery

Best Answer

You need to keep your geojsonLayer as it was and add it as a whole to markers cluster layer:

var geojsonLayer = new L.GeoJSON.AJAX("data/loopk.json", {
  pointToLayer: function(feature, latlng) {
    return L.circleMarker(latlng, geojsonMarkerOptions);
  },
  onEachFeature: function (featureData, featureLayer) {
    featureLayer.on('click', function() {
      document.querySelector('.img').src = featureData.properties.urlF;
      document.querySelector('.lemme').innerHTML = "Lemme : " + featureData.properties.lemme;
      document.querySelector('.forme').innerHTML = "Forme : " + featureData.properties.forme;
    });
  }
});

var markers = L.markerClusterGroup();
geojsonLayer.on('data:loaded', function () {
  markers.addLayer(geojsonLayer);
});
map.addLayer(markers);
Related Question