0

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

1 Answer 1

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);
4
  • 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.
    – GMR
    Aug 5 at 6:56
  • 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.
    – TomazicM
    Aug 5 at 6:58
  • I was able to make it work in the end, by adding a few lines to your answer. Thanks a lot :)
    – GMR
    Aug 5 at 9:06
  • 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.
    – TomazicM
    Aug 5 at 9:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.