CODEWITHSUNDEEP
javascriptleafletmarkerclusterer
Sandra
Sandra

Reputation: 3780

Leaflet clustermarker with custom icon

I've managed to cluster my markers. What I want to do now is to display a custom icon with the number of points in the cluster, but I can't figure out how to do that or if it's even possible.

I read the documentation and understood that I need to implement my own iconCreateFunction when creating the marker cluster.

addSomeMarkers: function(data, markerProperties) {
   var markers = L.markerClusterGroup({
      iconCreateFunction: function(cluster) {
         // TODO
      }
   });
   ....
}

I know I can return L.divIcon with a custom css class and cluster.getChildCount(), but I can't specify markerProperties.iconUrl as an image that should be displayed. I could also use L.icon with my custom icon from markerProperties.iconUrl, but in that case I don't see how I should get cluster.getChildCount() to display.

So what I need is a combination of both. Is there anything like that? And if not, can someone hint a workaround to achieve this?

Upvotes: 2

Views: 15985

Answers (1)

YaFred
YaFred

Reputation: 10018

Using the example here: https://github.com/Leaflet/Leaflet.markercluster/blob/master/example/marker-clustering-custom.html

And the documentation of L.divIcon is here: http://leafletjs.com/reference.html#divicon

I came up with this example: http://franceimage.github.io/leaflet/8/?map=46.566414,2.4609375,6

Hopefully it will help you

Meaningful parts are:

var markerCluster = new L.MarkerClusterGroup({ 
    iconCreateFunction: function (cluster) {
        var markers = cluster.getAllChildMarkers();
        var html = '<div class="circle">' + markers.length + '</div>';
        return L.divIcon({ html: html, className: 'mycluster', iconSize: L.point(32, 32) });
    },
    spiderfyOnMaxZoom: false, showCoverageOnHover: true, zoomToBoundsOnClick: false 
});

and css

.circle {
    width: 32px;
    height: 32px;
    line-height: 32px;
    background-image: url('circle.png');
    text-align: center;
}

There may be other ways ...

Upvotes: 6

Related Questions