leaflet markercluster does not recognize layeroptions

Question

I am using the angular-leaflet-directive and Leaflet.markercluster. I am able to load markers within a service and now I want to present the markers on a map. The markers are printed and clustered in the standard markercluster way.

It seems that my configuration is not recognized by the markercluster at all. Whatever I configure in overlays seems to be disregarded. Here is my javascript code:

front_app.factory('SiteWorkingsFactory', function ($http) {

    var _placemarks = function () {
        return $http({
            method: 'GET',
            url: '/map/getMarkersLeaflet',
        }).then(function (result) {
            return result.data;
        });
    };

    return {        
        placemarks: _placemarks
    };
});

front_app.controller('MapController', ['$scope', 'SiteWorkingsFactory', function ($scope, SiteWorkingsFactory) {

    var markerPromise = SiteWorkingsFactory.placemarks();
    markerPromise.then(function (result) {
        $scope.markers = result;
    });

    angular.extend($scope, {
        initial_center: {
            lat: 51.06073,
            lng: 13.71877,
            zoom: 16
        },
        map_defaults: {
            zoomControlPosition: 'topleft',
            tileLayerOptions: {
                detectRetina: true,
                reuseTiles: true,
            },
            doubleClickZoom: true
        },
        layers: {
            baselayers: {
                osmbase: {
                    name: 'OpenStreetMap (XYZ)',
                    url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    type: 'xyz'
                }
            },
            overlays: {
                eiqcluster: {
                    name: "eiqcluster",
                    type: "markercluster",
                    visible: true,
                    layerOptions: {
                        singleMarkerMode: true,
                        showCoverageOnHover: false,
                    }
                },
            }
        }
    });

}]);

and an html-snippet:

<div class="mapcontrollerstyles" ng-controller="MapController">
    <leaflet id="map" defaults="map_defaults" lf-center="initial_center" layers="layers" markers="markers"></leaflet>
</div>

The json that is loaded, looks like this:

{
    "1":{"lat": 51.06075495, "lng": 13.71900225, "group": "eiqcluster", "properties": {"name": "xyz", "project_type": "model_project", "id": 1}},
    "2":{"lat": 51.0582824267003, "lng": 13.7182974815369, "group": "eiqcluster", "properties": {"name": "xyz2", "project_type": "other", "id": 2}}, 
    "3":{"lat": 51.0620861, "lng": 13.7194437, "group": "eiqcluster", "properties": {"name": "xyz3pe", "project_type": "other", "id": 3}}
}

I was hoping that the layerOptions for the markercluster would be honored, but this is not the case. I have the suspicion that the markercluster is initialized without knowing about the angular directive, but I don't understand what is going on. Please help!

Update: Here is a reduced version as a plnkr: http://plnkr.co/edit/vVo3QWzlms8Gun3OhdjM?p=preview

Give a try removing the extra comma (`,`) after `showCoverageOnHover: false,`, just in case it makes angular-leaflet-directive think your `layerOptions` are invalid? — ghybs, Nov 20 '15 at 05:29
@ghybs, thanks for the suggestion. It did not help. I've also added a minimal code example as a plnkr. — Amelse Etomer, Nov 20 '15 at 07:57
@ghybs, as you are the author of Leaflet.MarkerCluster.LayerSupport ..., is there a simple way to state which layerGroup a marker belongs to (e.g. using a certain marker property), so that MarkerCluster.LayerSupport automagically clusters by groups? — Amelse Etomer, Nov 20 '15 at 10:40
You can create as many MarkerClusterGroups as you wish, and child markers will cluster only with markers within the same MCG. But the result might be confusing, as clusters of different MCG's will not merge but overlap, as regular markers. With Angular, you would simply separate your markers in different `layer`'s and create a separate `markercluster` for each of these: http://plnkr.co/edit/PrS1jictieCxy6ymm1n3?p=preview — ghybs, Nov 20 '15 at 20:06

score 2 · Accepted Answer · answered Nov 20 '15 at 08:26

In the JSON where you specify your markers data, you have to use "layer" instead of "group" to indicate the name of the layer the markers should go in.

Otherwise, they are added to a default group which is different from the one you create and for which you specifiy layerOptions.

Updated demo: http://plnkr.co/edit/vWI4uHZMSqU6w3BDnuEt?p=preview

leaflet markercluster does not recognize layeroptions

1 Answers1