Using marker.cluster plugin with the ajax plugin of Leaflet?

Question

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.

Answer 1

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