Test 1: Random features

Next sample shows the use of OpenLayers.Strategy.AnimatedCluster with a vector layer filled with 2000 random features:

// Create a vector layers
var vector = new OpenLayers.Layer.Vector("Features", {
    renderers: ['Canvas','SVG'],
    strategies: [
        new OpenLayers.Strategy.AnimatedCluster({
            distance: 45,
            animationMethod: OpenLayers.Easing.Expo.easeOut,
            animationDuration: 20
        })
    ],
    styleMap:  new OpenLayers.StyleMap(style)
});
map.addLayer(vector);

// Create some random features
var features = [];
for(var i=0; i< 50000; i++) {
    var lon = Math.random() * 2 + -4;
    var lat = Math.random() * 2 + 40;

    var lonlat = new OpenLayers.LonLat(lon, lat);
    lonlat.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));

    var f = new OpenLayers.Feature.Vector( new OpenLayers.Geometry.Point(lonlat.lon, lonlat.lat));
    features.push(f);
}
vector.addFeatures(features);

OpenLayers.Strategy.AnimatedCluster

AnimatedCluster is an OpenLayers strategy for the vector layers that animates cluster when zoom changed. A nice post presenting the current implementation can be found at http://acuriousanimal.com/.

Test 2: Features from a GeoJSON file

Next sample shows the use of OpenLayers.Strategy.AnimatedCluster loading data from a GeoJSON file containing the most important cities of the world

var vector = new OpenLayers.Layer.Vector("Features", {
    protocol: new OpenLayers.Protocol.HTTP({
        url: "world_cities.json",
        format: new OpenLayers.Format.GeoJSON()
    }),
    renderers: ['Canvas','SVG'],
    strategies: [
        new OpenLayers.Strategy.Fixed(),
        new OpenLayers.Strategy.AnimatedCluster({
            distance: 45,
            animationMethod: OpenLayers.Easing.Expo.easeOut,
            animationDuration: 10
        })
    ],
    styleMap:  new OpenLayers.StyleMap(style)
});
map.addLayer(vector);

Compatibility

At this moment the AnimatedCluster has only been tested with OpenLayers 2.11

Features

  1. OpenLayers.Strategy.AnimatedCluster is a direct subclass of the OpenLayers.Strategy.Cluster strategy class extending by adding animation of clusters when zoom level changes.
  2. 100% pure OpenLayers. No external library has been used.
  3. Animations are based on the OpenLayers.Tween class