Styling missing tiles in OpenLayers.

Posted by – Tuesday 2012-09-18

In an OpenLayers based web map when a tile fails to load, an a pink colored and ugly one will be displayed instead.

Fortunately, this behaviour can be changed. For instance, the background color can be set from pink to transparent.

OpenLayers.Util.onImageLoadErrorColor = 'transparent';

Another possible solution is using a custom graphic for the tile.

OpenLayers.Util.onImageLoadError = function() {
     this.src = '/path/to/custom-blank.png';

However, as of version 2.12 of OpenLayers it seems that none of these solutions work.

Another way of accomplishing this customization consists on changing the CSS class olImageLoadError that can be found in the theme used by OpenLayers map [note 1]. For instance, in case we want that nothing is shown on tile load error, a CSS like the shown in the following code snippet can be used.

.olImageLoadError {
    display: none !important;

In my opinion, the previous solution is not good from the point of view of usability: hiding the fact that there have been an important error can be misleading for many users.

Instead, an appropirate custom picture in PNG format that (a) Suggests that there has been an error and (b) Features partial transparency [note 2] can be put as background image of each div element of the class olImageLoadError.

.olImageLoadError {
    background-image: url('/path/to/theme/img/my-tile-load-error.png');
    background-repeat: no-repeat;


[note 1] The OpenLayers theme used by the map can be set via the ‘theme’ property of the class OpenLayers.Map.

[note 2] An example of load error image:

missing tile example

Please, do not hotlink!

0 Comments on Styling missing tiles in OpenLayers.