Skip to content

Instantly share code, notes, and snippets.

@tikipatel
Last active April 24, 2020 15:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tikipatel/0ad32a646a5d1938ce68e88a888cc76a to your computer and use it in GitHub Desktop.
Save tikipatel/0ad32a646a5d1938ce68e88a888cc76a to your computer and use it in GitHub Desktop.
Quick reference how zoom levels work on MapBox and Google Maps

NOTE -- THIS IS NOT MY CONTENT AND IS NOT MEANT TO PLAGERIZE ANY REFERENCED RESOURCES. I HAVE PUT THESE TWO IN A SINGLE PLACE AND REFERECED TO OFFICIAL DOCUMENTATION.

Google Maps

Scroll to "Zoom" section -- https://developers.google.com/maps/documentation/ios-sdk/views

Zoom

The zoom level of the camera determines the scale of the map. At larger zoom levels more detail can be seen on the screen, while at smaller zoom levels more of the world can be seen on the screen. At zoom level 0, the scale of the map is such that the entire world has a width of approximately 256 points.

Increasing the zoom level by 1 doubles the width of the world on the screen. Hence at zoom level N, the width of the world is approximately 256 * 2N, i.e., at zoom level 2, the whole world is approximately 1024 points wide. Note that the zoom level need not be an integer. The range of zoom levels permitted by the map depends on a number of factors including location, map type and screen size. The following list shows the approximate level of detail you can expect to see at each zoom level:

1: World 5: Landmass/continent 10: City 15: Streets 20: Buildings

MapBox

zoom level - https://docs.mapbox.com/help/glossary/zoom-level/

A zoom level determines how much of the world is visible on a map. Mapbox provides maps in 23 zoom levels, with 0 being the lowest zoom level (fully zoomed out) and 22 being the highest (fully zoomed in). At low zoom levels, a small set of map tiles covers a large geographical area. At higher zoom levels, a larger number of tiles cover a smaller geographical area.

At zoom level You can see 0 The Earth 3 A continent 4 Large islands 6 Large rivers 10 Large roads 15 Buildings Zoom level quadtrees Map tiles are stored in a quadtree data structure. At zoom level 0, you can see a map of the whole Earth, and this image is contained in a single tile. At zoom level 1, the single tile you saw at zoom level 0 splits into exactly four tiles so the whole world fits in a 2x2 tile square. Each zoom level quadtree divides the tiles of the one before it, which creates a grid of 2zoomx2zoom. The highest zoom level, 22, is a 222x222 grid.

Tile size Libraries based on Mapbox GL display 512x512 pixel tiles by default, while many other mapping libraries use 256x256 pixel tiles. The only Mapbox products that work with 256x256 pixel tiles by default are the Mapbox Raster Tiles API and Mapbox.js. If you're working with Mapbox GL JS but would like to display 256x256 pixel tiles, you can also specify that individual Mapbox sources are 256x256 pixel tiles in your map's source definition or by ensuring the source's TileJSON is correct.

While a 512x512 tile and a 256x256 tile cover the same geographic area at any given zoom level, they will appear a bit differently when displayed by Mapbox GL JS versus Mapbox.js. In Mapbox GL JS, all tiles are offset by one zoom level. This means that when a Mapbox GL JS map is zoomed to zoom level 2, it will display the same geographic area as a Mapbox.js map zoomed to zoom level 1. Because of this zoom offset, the appearance of a Mapbox GL JS map at zoom level 1 is the same as the appearance of a Mapbox.js map at zoom level 2.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment