Angular Leaflet MarkerCluster from geojson

Question

I want to show the leaflet MarkerCluster on the map, and the problem is at retrieving data from GeoJSON:

{
    "type": "FeatureCollection",
    "features": 
    [
        {
            "type": "Feature",
            "id": "sto",
            "properties": {
                "name": "Stoke"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                   -0.0731,
                   51.5615
                ]
            }
        },
        {
            "type": "Feature",
            "id": "dal",
            "properties": {
                "name": "Dalston"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -0.070,
                    51.545
                ]
            }
        },
        {
            "type": "Feature",
            "id": "wan",
            "properties": {
                "name": "Wandsworth"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -0.1924,
                    51.4644
                ]
            }
        },
        {
            "type": "Feature",
            "id": "batt",
            "properties": {
                "name": "Battersea"
            },
            "geometry": {
                "type": "Point",
                "coordinates": [
                    -0.1677,
                    51.4638
                ]
            }
        }
    ]
}

I tried to reproduce the same situation in in two examples:

1. Working MarkerCluster, but without geojson data
2. Second with geojson, but MarkerCluster doesn't work

Does anybody knows why MarkerCluster in the second example does not show? Did I miss some attribute in geojson?

Answer 1

You can try something like this (discussion and code snippets here)

// Get the countries geojson data from a JSON
$http.get("test.geojson").success(function(data, status) {
    addGeoJsonLayerWithClustering(data);

    function addGeoJsonLayerWithClustering(data) {
        var markers = L.markerClusterGroup();
        var geoJsonLayer = L.geoJson(data, {
            onEachFeature: function (feature, layer) {
                layer.bindPopup(feature.properties.Nome.value);
            }
        });
        markers.addLayer(geoJsonLayer);
        leafletData.getMap().then(function(map) {
            map.addLayer(markers);
            map.fitBounds(markers.getBounds());
        });
    }

});