Leaflet - Define maxNativeZoom based on specific regions

Question

I'm trying to figure out how I can specify the maxNativeZoom multiple times for different regions/bounds.

Our tile server has more detailed tiles available for some parts of Europe. I would like to allow the user to zoom in on these regions, but not on the less detailed region.

• We have most of Europe available until zoom level 13.
• Most of the Netherlands is available at zoom level 16.
• Some parts of the Netherlands (cities) are even available at zoom level 17.

Currently, I set my maxNativeZoom to 17. This way, the user can zoom in on the cities and retrieve the detailed tiles. Sadly, for the rest of Europe, this will result in gray tiles and a lot of 404 errors.

Is there a way, maybe with a moveend JavaScript trigger, to have different maxNativeZoom levels for specific bounds? Perhaps this is not smart to do, if so, please also let me know! :)

Answer 1

While I do not see a practical way of having different maxNativeZoom on the same Tile Layer depending on areas, you would probably be interested in Leaflet.TileLayer.Fallback plugin as a workaround:

Replaces missing Tiles by scaled lower zoom Tiles

(Demo)

In more detail:

TileLayer.Fallback plugin tries to replace each missing tile by its immediate lower zoom equivalent, and if that one is also missing, it goes to lower zoom again; and so on until a tile image is returned by the server

With this plugin, you do not need to explicitly specify the maxNativeZoom option. The Tile Layer tries first to get a tile image at the current zoom, but in areas where the server does not have the image for that zoom level and returns a 404 error, the Tile Layer will automatically request a lower zoom instead.

Similar effect as with maxNativeZoom, but automatically triggered by 404 error.

Disclaimer: I am the author of the plugin.