Mapbox.js - Fallback tile image from lower zoom level, when missing in requested zoom level

Question

I serve map png files from disk and I have tile pngs for whole city in zoom level 15. I have also tiles in zoom levels 16-18 but only for certain areas.

I would like to set up the tile Layer, so that when the user is in zoom level 18 the map will display scaled tiles from level 15 as a fallback.

I tried setting option maxNativeZoom, but didn't work for me.

Here is my code:

offlineLayer = L.mapbox.tileLayer(tileJSON, {
    minZoom: 8,
    maxZoom: 18,
    maxNativeZoom: 15
});
map.addLayer(offlineLayer, 'Offline', 1);

Can I make it work, that way using some options or do I need to hack it some way? Or is there some example code for that?

Answer 1

Just to let people know that I wrote Leaflet.TileLayer.Fallback plugin some time ago to address this exact use case:

Replaces missing Tiles (404 error) by scaled lower zoom Tiles.

Demo page

In OP's situation, you would just specify the maxZoom Tile Layer option as usual, and whenever a tile is found missing at the current zoom level, the plugin will try to replace it by the "parent" tile at the previous zoom level (scaled and clipped appropriately so that it fits the missing tile), and so on until a tile is found or minZoom is reached.

L.tileLayer.fallback(urlTemplate, {
  minZoom: 8,
  maxZoom: 18
});

Disclaimer: I am the author of that plugin.