Change Clustering Size


I have a working demo now with the clustering module (which is fantastic), but the only thing I can't seem to figure out how to do is change the cluster sizes. Right now I have clustering happening across a map of the US for ~1000 entries, but I'd like to consolidate into a smaller I zoom in it changes accordingly. A perfect example of what I'd like to accomplish is attached.

file attachments

Closed Apr 27, 2015 at 10:11 PM by rbrundritt


rbrundritt wrote Aug 19, 2014 at 2:52 PM

For this you will need to create a custom pushpin using custom HTML. You will need to do a bit of JavaScript when creating the pushpin to figure out how big the circle should be based on the number of clustered locations. This should be fairly easy, define a min and max radius size and a value for when the max radius should be used. You can then calculate the radius like this:
var radius = min + (max-min)*(clusterSize/maxValue);
if(radius > max)
    radius = max;
Once you have done this you can create the HTML for the pushpin. There are a couple of different ways to go about this. One is to create an image of a circle and then scale it using the width/height values of an image tag. This would be good if you need to support older browsers. Another method is to use a div and apply a CSS border radius to it. This will allow you to easily change the color of the circle. Alternatively you could use the HTML5 Canvas Pushpin module but this will likely be more work than the previous suggestion.

wrote Apr 27, 2015 at 10:11 PM