CODEWITHSUNDEEP
javascriptopenlayers-3tile
BrokenEyes
BrokenEyes

Reputation: 322

Openlayers 3 Replace a failed tile

We are running Open Layers 3.15. Sometimes we get a dropped or failed tile. Currently it displays nothing, (which can be confusing for our users) so we'd like to replace this with a tile that says 'no data' or something. I've tried picking up the event and replacing the source of the tile eg

            source.on('tileloaderror', function(){
               source.setUrl('./images/map/failureTile.png');
            });

but the problem with this is, instead of doing this on 1 tile, it does it for the entire layer, we don't want that.

Anyone know how we can do this for just the tile that failed and not the entire layer?

Upvotes: 1

Views: 1441

Answers (3)

kikuchan
kikuchan

Reputation: 31

It's 2018, but for someone who may need this. Tested on v5.3.0

source.on('tileloaderror', function (event) {
  var tileLoadFunction = function (imageTile, src) {
    imageTile.getImage().src = './images/map/failureTile.png';
  };
  if (event.tile.tileLoadFunction_ != tileLoadFunction) {
    event.tile.tileLoadFunction_ = tileLoadFunction;
    event.tile.load();
  }
});

This code relys on private function event.tile.tileLoadFunction_ is exposed.

Unfortunately xnakos' answer doesn't work on v5.3.0 because the event.tile.getImage() has been replaced with 1x1 canvas image by internal error handler.

Also noted, changing event.tile.src_ directly, seems to be an option, but it doesn't work either because of cache key or something.

Upvotes: 3

xnakos
xnakos

Reputation: 10206

You could try this:

source.on('tileloaderror', function(event) {
    event.tile.getImage().src = './images/map/failureTile.png';
});

You need the event parameter, that can get you the tile that failed, so that you can change the tile's image.

Warning: I tested the code above using tileloadend instead of tileloaderror, because my tiles never fail on me. :) I used a simulated failure rate using Math.random() and some random tiles were replaced by the image specified. I cannot think of a reason the code above would not work. If you verify it works, I will remove this warning from my answer. I tested it on OpenLayers 3.14.2 and on an OSM source.

Upvotes: 0

Dennis Bauszus
Dennis Bauszus

Reputation: 1802

A tile which failed to load should have a distinct class (.olImageLoadError). You can define a CSS rule not show these items.

.olImageLoadError { 
    display: none !important;
}

Upvotes: 0

Related Questions