How to customize markercluster icon when using angular-leaflet-directive

2
votes

The Leaflet documentation outlines a way to specify a MarkerClusterGroup with a iconCreateFunction where you can customize the look of the cluster icons. I'm wondering if there's something exposed through the angular-leaflet-directive that allows doing this as well, or if there's a way to get down to the lower level Leaflet API to do it while using the directive. Basically, I'm just trying to change at which value the color changes instead of 10 and 100, as well I'd like to change the diameter of the icon at different values as well. Something similar to Google MarkerClusterer.

Thanks

1
javascriptangularjsmapsleaflet

1 Answers

5
votes

In the overlay where you specify your markercluster, you can add options. Something like:

layerOptions: {
                            showCoverageOnHover: false,
                            disableClusteringAtZoom: 12,
                            iconCreateFunction: function (cluster) {
                                    var childCount = cluster.getChildCount();

                                    var c = ' marker-cluster-';
                                    if (childCount < 10) {
                                        c += 'small';
                                    } else if (childCount < 100) {
                                        c += 'medium';
                                    } else {
                                        c += 'large';
                                    }

                                    return new L.DivIcon({ html: '<div><span>' + "CUSTOM" + '</span></div>', className: 'marker-cluster' + c, iconSize: new L.Point(40, 40) });
                                }
                        }