Improved performance on the AnimatedCluster for OpenLayers

09 October, 2012 - 2 min read

Yes, now I'm really proud to present the AnimatedCluster strategy for OpenLayers. Some time ago I created an AnimatedCluster strategy for OpenLayers that extends the basic Cluster strategy, animating cluster when user changes the zoom.

anim cluster 212

The problem with the previous version is the code makes some computations for all the clusters, no matter if they are inside or outside the map's viewport.

The problem

This issues is clearly reproducible in the old version. Zoom in until cluster contains one or two features and you will see a degradation of the animation.

Now, compare with the new improved version, which supports 50.000 features without problem (at least on my computer :) ).

How do I improve it?

The solution was easy, only manage the animation of those clusters inside the map's viewport:

{% highlight javascript %} for(var i=0; i<this.features.length; ++i) { feature = this.features[i];

// Check if the feature's geometry is on the map's viewport,
// if so then manages it, otherwise ignore.
if(this.layer && this.layer.map) {
    var screenBounds = this.layer.map.getExtent();
    var featureBounds = feature.geometry.getBounds();
    if(!screenBounds.intersectsBounds(featureBounds)) {

} {% endhighlight %}

Yes, it can seem obvious, but I have needed some time before I realized about this fact (dummy?)


  • GitHub source code here
  • GitHub demo source code here
© I built this site withGatsbyfrom the starterjuliaand made a bunch of modifications. The full content is available in myrepository. Icons made byFreepik from Flaticon