Search code examples
angularjsangularjs-directiveleafletmarkerclustererangular-leaflet-directive

"ghost" clusters when customizing markercluster icon using angular-leaflet-directive


I'm trying to customize angular-leaflet markerclusters with the following code :

            overlays: {
                defaultOverlay: {
                    type: 'markercluster',
                    name: 'defaultOverlay',
                    visible: true,
                    layerOptions: {
                        showCoverageOnHover: true,
                        disableClusteringAtZoom: 15,
                        iconCreateFunction: customMarkerCluster
                    }
                }
            }

I have a test sample of 7 markers, defined like so :

                markers: [
                    {
                        _id: "548f0ab268dc96e7587c0f8f",
                        layer:"defaultOverlay",
                        group: "testgroup1",
                        lat: 20.973368,
                        lng: 40.849463,
                        title: "IMPERIUM",
                        message: "215 Rockaway Parkway, Delshire, Ohio, 9191",
                        icon: $scope.icons.onlineNotifIcon,
                        status: 1
                    },
                    ...
                ]

If I hide the overlay with visible: false or don't use an overlay, I get the correct amount of markers but customMarkerCluster will never be called.

With visible:true, I get 3 clusters of 4 markers (12 markers instead of 7)

How can I prevent markercluster from generating incorrect clusters when I use an overlay ?


Solution

  • apparently, my option group was messing with markercluster generation, I deleted group and everything works fine (+ cleaned my example)

                        {
                            "_id": "548f0ab268dc96e7587c0f8f",
                            layer:"defaultOverlay",
                            lat: 28.239855,
                            lng: 14.752357,
                            title: "BITTOR",
                            message: "856 Furman Avenue, Comptche, Nebraska, 3995",
                            icon: $scope.icons.onlineIcon,
                            status: 0
    
                        }