Leaflet: fetch GeoJSON data while using markercluster plugin

Question

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

Answer 1

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);

• erki: Thank your very much for your answer @tomazicm unfortunately I couldn't manage to make it work. When I try your solution, clusters or points don't appear anymore. There's nothing on the map except for the tile layer and I don't get any error in the console. My tile layer is loaded above in the code with map.addLayer(stamenToner);. Maybe it has someting to do with it ? I tried to remove my fetching function with your layer solution to see if I could at least load my data on the map but it doesn't work either.
• TomazicM: I tested the code above and it works. Since I don't see/have your code, I can't say why it doesn't work for you.
• erki: I was able to make it work in the end, by adding a few lines to your answer. Thanks a lot :)
• TomazicM: Yes, I forgot L.GeoJSON.AJAX is async. In my testing I didn't use async GeoJSON. I'll edit my answer to make it complete if somebody else has same problem/question.