1

I want to use both the marker cluster plugin and the ajax plugin together, but I cannot seem to make it work. My geoJSON data are point geometries.

I was able to successfully use the ajax plugin of leaflet like this:

// Style function for thegeojson layer
function getColor(status) {
    if (status =='active'){return "#FF006F" }
    else if (status =='closed'){return "#20679A" }
    else if (status == "under construction"){return "#0FB248"}
    else {return "#FCFF15"}
}
//loading the geojson for the power plants
var geojsonAjax = new L.GeoJSON.AJAX("geojson/geojson.geojson",{
    style: function(feature) {
        return {
            radius:6,
            fillColor: getColor(feature.properties.Status),
            color: getColor(feature.properties.Status),
            weight: 1,
            opacity: 1,
            fillOpacity: 0.7
        }
    },
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng)}});

I was also able to use the markercluster plugin:

//loading the geojson using a js variable
var markers = new L.MarkerClusterGroup({
    showCoverageOnHover: false,
    maxClusterRadius: 80});
markers.addLayer(L.geoJson(geojsonJS));
map.addLayer(markers);

But when I want to replace the geojsonJS variable with the content I get from the AJAX plugin, it does not work.

// THIS DOES NOT WORK 
 markers.addLayer(L.geoJson(geojsonAJAX));

I do not get any error in the console - and the map is just empty.

Any idea what the problem might be?

EDIT

The solution I accepted worked perfectly. However, the clustering functionality was not working because I had MultiPoint geometries. Transforming them into Point geometries was the final trick to make the whole thing work.

4

It seems you have the same problem as I had. Have a look here. Since you are using AJAX to load the JSON the geojsonAjax has most probably no data when you fire markers.addLayer(L.geoJson(geojsonAJAX));

Try something like this:

var markers = new L.MarkerClusterGroup({
    showCoverageOnHover: false,
    maxClusterRadius: 80
});

// Style function for thegeojson layer
function getColor(status) {
    if (status =='active'){return "#FF006F" }
    else if (status =='closed'){return "#20679A" }
    else if (status == "under construction"){return "#0FB248"}
    else {return "#FCFF15"}
}

//loading the geojson for the power plants
var geojsonAjax = new L.GeoJSON.AJAX("geojson/geojson.geojson",{
    style: function(feature) {
        return {
            radius:6,
            fillColor: getColor(feature.properties.Status),
            color: getColor(feature.properties.Status),
            weight: 1,
            opacity: 1,
            fillOpacity: 0.7
        }
    },
    pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng)}});
    }
});
geojsonAjax.on('data:loaded', function () {
    markers.addLayer(geojsonAjax);
    map.addLayer(markers);
}
  • ok,that works halfway: now the point data are showing up, but the clustering functions is not working. – Djana May 7 '15 at 11:52
  • I guess you forgot to close the L.GeoJSON.AJAX. I added the missing code to the answer. – eltomaco May 7 '15 at 18:22
  • I noticed that and I added it. The last issue was my multi-geometries that I had to change into single geometries. – Djana May 8 '15 at 7:03

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.