Zoom Past Maximum Tile Level with Leaflet

jscript

There is not enough documentation about this in the world. Recently I was working on a project where I wanted to zoom in past the maximum zoom level of a tile set I pulled from a CDN. For the uninitiated, the maximum zoom level for most tile services is level 18 (or 1:2,000 scale) and sometimes level 19 (1:1,000 scale). What if you want to zoom to level 22?

What’s going on down there anyway?
Resolution at zooms are generalized in a resolution/scale table, best summarized by OpenStreetMap. It basically looks like this:

base_levels

It’s based on a number of formulas to calculate the size of pixel on the Earth at different zoom levels.

resolution = 156543.03 meters/pixel * cos(latitude) / (2 ^ zoomlevel)

To determine the scale at that resolution/zoom level, we can use the formula:

scale = 1 : (screen_dpi * 39.37 in/m * resolution)

This allows us to extrapolate the rest of the zoom level table (Note: this assumes a screen resolution of 96 dpi and latitude of 0):

expanded_levels

In order to lock your tile layers to their maximum zoom levels while you arrogantly and disobediently zoom in farther, you can set two options on the tileLayermaxNativeZoom and maxZoom.

Just be aware, your basemap will look like total garbage. Consider this lovely picture of the Statue of Liberty:
ladyliberty

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz