Leaflet Remove Old/Error Tiles from Offline Map

Question

I have a Leaflet map that points to some offline tiles on a local machine. Initially, tiles that aren't found are shown as a grey image:

If the user then zooms out, the corresponding tiles will be fetched for the current zoom level as usual. However, when the user zooms back in, the old "zoomed out" tiles persist, so you end up with a blurry image outside the bounds of the current tiles:

Is there some way to delete these tiles or just not load tiles for which there is no data in the first place?

Here's what I currently have:

L.tileLayer("offline_map/{z}/{x}/{y}.png",{
  maxZoom: 18,
  minZoom: 3,
}).addTo(map);

L.TileLayer.include({
    _tileOnError: function (done, tile, e) {
      map.removeLayer(tile);
    } 
});

IvanSanchez IvanSanchez · Accepted Answer · 2019-12-17T15:14:19

Since you seem to be caching a small rectangular area, you probably want to use the bounds option of L.TileLayer, e.g.:

L.tileLayer("offline_map/{z}/{x}/{y}.png",{
  maxZoom: 18,
  minZoom: 3,
  bounds: L.latLngBounds([[50,10],[60,15]])
}).addTo(map);

Specifying such a bounds option will avoid loading tiles outside of that bounding box (instead of trying and then failing), and will change the way tiles are pruned when changing zoom levels.

Leaflet Remove Old/Error Tiles from Offline Map

1 Answers