Changing size of cluster based on number of markers in Leaflet clustermarker

Question

I'm currently using Leaflet's markercluster add-on, which is working really nicely for some of my initial maps.

Is there a way to modify the clusters so that the size of the cluster (preferably radius) is proportional to the number of markers it represents?

I've seen a few SO questions about modifying the cluster color or the underlying marker icon, but haven't been able to find someone addressing this specific question.

Answer 1

Starting from the custom example from the github repo, modify the iconCreateFunction to add a different css class based on the size of the cluster:

iconCreateFunction: function (cluster) {
  var markers = cluster.getAllChildMarkers();
  var n = 0;
  for (var i = 0; i < markers.length; i++) {
    n += markers[i].number;
  }
  var small = n < 200;
  var className = small ? 'mycluster1' : 'mycluster2';
  var size = small ? 40 : 60;
  return L.divIcon({ html: n, className: className, iconSize: L.point(size, size) });
}

So if a cluster has less than 200 features it gets mycluster1, otherwise it gets mycluster2.

Here's the associated CSS:

.mycluster1 {
  border-radius: 20px;
  width: 40px;
  height: 40px;
  background-color: greenyellow;
  text-align: center;
  font-size: 24px;
}
.mycluster2 {
  border-radius: 30px;
  width: 60px;
  height: 60px;
  background-color: #ffdb58;
  text-align: center;
  font-size: 24px;
  padding-top: 10px;
  box-sizing: border-box;
}

And a screen shot: