5

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.

8

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:
clusters with different sized symbols

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.