Clustering geojson data using PruneCluster and Angular Leaflet Directive

[JonahKE]

I am trying to cluster geojson data using PruneCluster and the Angular leaflet directive. However, my code does not display the clusters and there are no errors in the console to help in troubleshooting. Below is the code for my controller:

angular.module('bizvizmap').controller('controller', [
    '$scope', '$http', '$filter', 'leafletData',
    function ($scope, $http, $filter, leafletData){
    $scope.center = {
        lat: 39.5500507,
        lng: -105.7820674,
        zoom: 4
            },
    $scope.defaults = {
        scrollWheelZoom: false
            },
    $scope.events = {
            map: {
            enable: ['zoomstart', 'drag', 'click', 'mousemove'],
            logic: 'emit'
            }
            },
    $scope.layers = {
            baselayers: {
            osm: {
            name: 'OpenStreetMap',
            url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            type: 'xyz'
                    }
                },
            markers:{}
    },
    $scope.map = null;
    leafletData.getMap("bizvizmap").then(function(map){
        $scope.map = map;
    });
    function renderMarkers(data, map){
        var markerLayer = new PruneClusterForLeaflet();
        for (var i=0; i < data.length; i++){
            var marker = new PruneCluster.Marker(data[i].geometry.coordinates[1], data[i].geometry.coordinates[0]);
            markerLayer.RegisterMarker(marker);
        }
        map.addLayer(markerLayer);
        markerLayer.ProcessView();
    }
    $scope.geojson = {};
    $http.get('data/bizvizmap.geojson').success(function (data){
            $scope.data = data;
            // Render clustered markers
            renderMarkers(data, $scope.map);
        });
]);

Any help is highly appreciated.

[fungiboletus]

Hi, can you share your geojson file? Your source code looks fine.

[JonahKE]

Here is part of the geojson file: {"type":"FeatureCollection","features":[{"type":"Feature","properties":{"Name":"Drummond Co Inc","Address":"1000 Urban Center Dr Ste 300","City":"Birmingham","State":"AL","Phone":"(205) 945-6300","County":"Jefferson","Latitude":"33.48360731","Longitude":"-86.70488291","BusinessDescription":"Coal & Other Minerals & Ores - Wholesale","SIC":"5052001","SICDescription":"Coal & Other Minerals & Ores - Wholesale","NAICS":"423520","NAICSDescription":"Coal and Other Mineral and Ore Merchant Wholesalers","Website":"www.drummondco.com"},"geometry":{"type":"Point","coordinates":[-86.70488291,33.48360731]}}]}

[fungiboletus]

Isn't just that you don't access to the features list in the GeoJson document?

Could you try to replace renderMarkers(data, $scope.map); by renderMarkers(data.features, $scope.map); ?

[JonahKE]

Thanks. Its working now.

[Treasureworth]

Hello.

Sorry I had to bother you on this project again.

@JonahKE, I want to be able to use PruneCluster with Angular 6 but PruneCluster does not have any exportable module.

Do you have any idea on how i can go about it?