[OpenLayers-Users] Pink tiles in FireFox doesn't disappear after refresh - a possible solution

Pietro Ianniello pietro.ianniello at gmail.com
Sun Mar 14 13:16:08 EDT 2010


Dear list,

this is second time I make this post: for some reason the first post was
lost... and it's good because it was buggy!

On to the problem: pink tiles showing up in FireFox.

The pink tiles are generated because of too many connections, so my problem
it's not that there are pink tiles, the problem it's that when the server is
reachable again, if I for ex. zoom in and out, they don't desappear as they
should.
This is because of aggressive caching on tile to be displayed. If I disable
caching on server side for tiles, they behave ok... bu I want tiles to be
able to cache them on clients!

After some days fighting against this problem, enabling caching, disabling
caching.......... I decided to inspect Openlayers code. It' not all really
clear, but I realized that the problem *can be* related to "*
OpenLayers.Util.onImageLoadError*".
Finally I realized that changing it as reported will fix my problem:

OpenLayers.Util.onImageLoadError = function() {
    this._attempts = (this._attempts) ? (this._attempts + 1) : 1;
    if (this._attempts <= OpenLayers.IMAGE_RELOAD_ATTEMPTS) {
        var urls = this.urls;
        if (urls && urls instanceof Array && urls.length > 1) {
            var src = this.src.toString();
            var current_url, k;
            for (k = 0; current_url = urls[k]; k++) {
                if (src.indexOf(current_url) != -1) {
                    break;
                }
            }
            var guess = Math.floor(urls.length * Math.random());
            var new_url = urls[guess];
            k = 0;
            while (new_url == current_url && k++ < 4) {
                guess = Math.floor(urls.length * Math.random());
                new_url = urls[guess];
            }
            this.src = src.replace(current_url, new_url);
        } else {
            this.src = this.src;
        }
        *OpenLayers.Console.log("attemp n.:",this._attempts);*
    } else {
        *OpenLayers.Console.log("error loading", "appending uuu!");**
        var dummy = "&uuu";
        if (this.src.match(dummy + "$") != dummy) { //only add if it was not
added before
            this.src = this.src + "&uuu";
        }*
        this.style.backgroundColor = OpenLayers.Util.onImageLoadErrorColor;
    }
    this.style.display = "";
};

That is: I change the the url of the tile appending some dummy character [in
this case "uuu", but it can be anything].
This can be done only if the dummy string was not added before [first post
bug: I didn't check it]. If you don't check It and the address *this.src* is
wrong, you will get OL to continue adding the dummy string going in loop and
bombardig the server with requests.
I don't know enough OL to understand why, but that's it.

I would like to have comments from people who knows OL better than me about
this "solution".

NOTE: it's possible to use the same technique without modifying OL, doing
something *like* [untested - must be sure about what is '*this*' in the
context]:

OpenLayers.Util.oldOnImageLoadError = OpenLayers.Util.onImageLoadError;
OpenLayers.Util.onImageLoadError = function() {
   this.oldOnImageLoadError();
   if (this._attempts >= OpenLayers.IMAGE_RELOAD_ATTEMPTS) {
      //TODO: add dummy
   }
}

Pietro Ianniello
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://lists.osgeo.org/pipermail/openlayers-users/attachments/20100314/d077a141/attachment.html


More information about the Users mailing list