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

Answer 1

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