As mentioned at the beginning of this recipe, the idea is to animate some weather radar on the client side. For this reason, we load a set of images from the server, creating a layer for each one.

The OpenLayers.Layer.Image class is used here to hold each image as a single layer. Its constructor requires five parameters:

In our case, all the image layers will have the same extent and size:

    var img_extent = new OpenLayers.Bounds(-131.0888671875, 30.5419921875, -78.3544921875, 53.7451171875);
    var img_size = new OpenLayers.Size(780, 480);

Later, within the loop to create all the image layers, we are setting dynamically the value of the img_url variable and passing some options to the OpenLayers.Layer.Image constructor:

        image = new OpenLayers.Layer.Image("Image Layer", img_url, img_extent, img_size, {
            isBaseLayer: false,
            alwaysInRange: true, // Necessary to always draw the image
            visibility: false
        });
        imgArray.push(image);

By setting the isBaseLayer property to false we are specifying that our layer is not a base layer, it will act as an overlay. In addition, we set the visibility property to false to initially hide the layer. Later, we will set the first image layer as the visible one:

    imgArray[0].setVisibility(true);

The alwaysInRange property is inherited from the superclass OpenLayers.Layer and specially useful in this case. We want our image layer to be visible at any zoom level. We do not want OpenLayers to compute the right resolution; given the image layer extent and size, the layer must be shown. So, setting alwaysInRange to true makes the layer always visible.

Next, we are going to see how to automatically automate the animation. The animateAction is executed when the play button is pressed. It is a toggle button, so depending on its state, the boolean checked parameter will be true if checked or false if not:

    function animateAction(checked) {
        if(checked) {

If the play button is checked, then we create an interval to execute the given anonymous function every 50 milliseconds which, in fact, increases the value of the slider and calls the animation function:

            interval = setInterval(function() {
                var v = dijit.byId('animSlider').get('value'),
                v = (v>=100) ? 0 : (v+1);
                dijit.byId('animSlider').set('value', v);
                animation(v);
            },50);
        } else {

If the button is unchecked, then we remove the interval reference to stop the execution:

            clearInterval(interval);
        }

Finally, let's take a look at the animation function, which is responsible to change the layer visibilities and create the animation effect.

All the layers are added to the map and also stored in the imgArray. The global currentIndex variable is used to hold the current visible layer. The animation function does three things:

That's all! Once the set of layers is loaded in the client side, using any modern browser, the performance of the animation is good enough.

This is only a sample, so there are tons of things to improve. For example, think on how to implement a situation where we have a remote server with hundreds of images to load sequentially. In this case we cannot load all images at once because that can cause an out-of-memory problem in the browser.

Supposing we have thousands of images to animate, we could implement some buffer strategy. Given a buffer of ten images, we can load the first ten images from the server, then animate them and when the animation arrives to the last loaded image, load the next ten images from the server.

As we can see, these situations are out of the scope of this book and not only related to OpenLayers but with software architecture and design.