Leaflet Marker Cluster from GeoJSON

Question

I've created marker cluster in this example and now I want to show the same thing with data from GeoJSON, but it doesn't work. I'm trying to reproduce same situation in this example, but marker cluster doesn't show, there are only markers.

Does anybody knows why Marker Cluster in the second example does not show? Did I miss some attribute in GeoJSON?

Answer 1

Try code example:

var app = angular.module("app", ["leaflet-directive"]);

app.controller('MapController', ['$scope', '$http', 'leafletData', function($scope, $http, leafletData) {

  angular.extend($scope, {
    london: {
      lat: 51.505,
      lng: -0.09,
      zoom: 8
    }
  });

  $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.name);
          }
      });
      markers.addLayer(geoJsonLayer);
      leafletData.getMap().then(function(map) {
        map.addLayer(markers);
        //map.fitBounds(markers.getBounds());
      });
  }

}]);

Link http://plnkr.co/edit/pD37TcrnjFiM7a9ixZeJ?p=preview

More info https://github.com/tombatossals/angular-leaflet-directive/issues/744