[GIS] Leaflet Marker Cluster from GeoJSON

angularjsgeojsonleaflet

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?

Best Answer

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

Related Question