Leaflet debug page

Custom Cluster Icons

This example demonstrates how to create custom cluster icons with the iconCreateFunction option. The clusters display a custom green background and sum up marker numbers instead of showing the count.

// Create cluster group with custom icon function
let markers = new L.MarkerClusterGroup({
  maxClusterRadius: 120,
  iconCreateFunction: function(cluster) {
    let markers = cluster.getAllChildMarkers();
    let sum = 0;
    
    // Sum up marker numbers instead of count
    for (let i = 0; i < markers.length; i++) {
      sum += markers[i].number;
    }
    
    // Return custom DivIcon with sum
    return new L.DivIcon({
      html: sum,
      className: 'mycluster',
      iconSize: new L.Point(40, 40)
    });
  }
});

Features:

Custom cluster radius (120px instead of default 80px)
Custom icon with green background via CSS class
Displays sum of marker numbers, not marker count
All default cluster behaviors work normally (click to zoom, spiderfy, etc.)

Custom CSS:

.mycluster {
  width: 40px;
  height: 40px;
  background-color: greenyellow;
  color: #000;
  text-align: center;
  font-size: 24px;
}