CODEWITHSUNDEEP
javascriptangularjsmapsleaflet
Patrick Grimard
Patrick Grimard

Reputation: 7126

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

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

Upvotes: 2

Views: 1760

Answers (1)

cgat
cgat

Reputation: 3909

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) });
                                }
                        }

Upvotes: 5

Related Questions