OpenLayers – Handling Tile Load Failure in OpenLayers

openlayers-2

In my application, I am consuming a WMS layer. However, I would like to be able to gracefully fail if the service doesn't respond to a request. Instead of a pink tile, I would like a transparent tile and a message displayed to the user saying that the layer was not loaded properly.

What I am currently doing:

1) Setting the visibility of the .olImageLoadError div to hidden:

.olImageLoadError { 
    visibility: hidden !IMPORTANT;
}

2) Creating a function that uses jQuery to see if there are any divs that have the class "olImageLoadError." It displays a message if one or more tiles fail to render. I link this function to the loadend event of the layer I am concerned with. 

myWMSLayer.events.register('loadend', this, onloadstart);
function onloadstart(evt) {
    if ($(".olImageLoadError").size() > 0) {
        alert("Some assets failed to load");
    }
}

In searching for possible solutions, I found this (and several similar) site. It discusses the OpenLayers.Util.onImageLoadError property, which is a function that is called when a tile fails to load. However, this is no longer available in the newest version of OpenLayers.

Is there something similar in the current version of OpenLayers (at time of writing, 2.13.1)?

Best Answer

You can register a listener for the layer's tileerror event. Due to a documentation bug, this does not show up in the API docs. The tileerror listener receives an argument with a tile property, which is the OpenLayers.Tile.Image instance that failed to load.

Related Question