Mapbox.js - Fallback tile image from lower zoom le

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

When you say that it didn't work for you, I'm guessing that what you're seeing with the code above is level 15 tiles for everywhere even when at zoom levels 16-18 in the areas where you have tiles at those levels? That's the expected behavior of maxNativeZoom. TileLayer creates all of the tiles for a given zoom level and map bounds and sets the "src" to a URL containing the current zoom level. If the current zoom level is greater than "maxNativeZoom" then the zoom level in the URL is set to "maxNativeZoom". For example, src="http://a.tile.openstreetmap.org/15/16368/10896.png" would be used for zoom levels 16-18 if "maxNativeZoom" is set to 15.

There is no logic in the code that checks to see if an image actually exists for that tile at that zoom level.

If your tiles are in a single data set then you could modify the code in TileLayer to check for a HTTP 404 return code for the generated URL and if one is received then create a new URL using "maxNativeZoom". If your tiles are in multiple data sets (i.e. one for zoom level 15 and less, and another for zoom levels 16-18) then I think you'd have to write a TileLayer that supports multiple data sets.

Answer 2

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.