Is it possible to define a layer which will retry to load, e.g. with exponential back-off?

Question

I am using OpenLayers to connect to a home-grown server, and unlike professional grade servers like Google or Cloudmade that box will actually take a while to calculate the result for a specific tile. And as it is a mathematical function I am plotting, there is no big chance to accelerate the server or even pre-render the tiles.

My initial trials with Leaflet quickly came to the conclusion that Leaflet actually leaves all of the reloading and load-error handling to the browser, while OpenLayers at least has an event that is fired when the tile server does return with an error code.

The idea I am following was to basically start rendering a tile when it was requested and fire an HTTP 503 immediately, relying on the client to try again.

To try again, I implemented a simple layer like this:

    var myLayer = new OpenLayers.Layer.OSM.MYLayer("mine", {
        'transparent':"true",
        'format':"image/png",
        'isBaseLayer':false});
    myLayer.events.register("tileerror", myLayer, function (param) {
        // Try again:
        var targetURL = param.tile.layer.getURL(param.tile.bounds);
        var tile = param.tile;
        tile.timeout = tile.hasOwnProperty("timeout") ? tile.timeout * 2 : 1000;
        setTimeout(function (tileToLoad, url) {
            if (tileToLoad.url === url) {
                tileToLoad.clear();
                tileToLoad.url = url;
                tileToLoad.initImage();
            }
        }.bind(undefined, tile, targetURL), tile.timeout);
    });

I figured out the code required to reload a tile from the source of OpenLayers, but maybe there is a cleaner way to accomplish this.

My problem is: The tiles themselves are reused, as are the divs in the DOM, so the reload procedure might actually try to reload a tile into a DIV that long as been successfully reused, e.g. because the user scrolled to someplace else where the server was able to provide data quickly.

The question I guess boils down to - is there an official way to use the tileerror event to simply try to reloading, or at least a simpler way in the API to trigger a reload? I spent quite a while in the source of OpenLayers itself but couldn't shed light on why it is still going wrong (the test for tileToLoad.url == url didn't really do it).

Thanks for your help!

Answer 1

Ok, after some more trial and error I found that I could actually add an eventListener to my Layer class, which will do what I want - try to reload the tile again after a certain wait. The trick was the consecutive call of setImgSrc() for cleanup and to draw with the true parameter, which effectively is an (undocumented) force flag. Thanks to the code!

OpenLayers.Layer.OSM.MyLayer= OpenLayers.Class(OpenLayers.Layer.OSM, {
initialize:function (name, options) {
    var url = [
       "xxxx"
    ];
    options = OpenLayers.Util.extend({
        "tileOptions":{
            eventListeners:{
                'loaderror':function (evt) {
                    // Later reload
                    window.setTimeout(function () {
                        console.log("Drawing ", this);
                        this.setImgSrc();
                        this.draw(true);
                    }.bind(this), 3000); // e.g. after 3 seconds
                }
            }
        }
    }, options);
    var newArguments = [name, url, options];
    OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
},

CLASS_NAME:"OpenLayers.Layer.OSM.MyLayer"
});