Zoom levels and scale

A brief history of zoom levels

Zoom levels were made popular by various web mapping solutions and APIs in the early 2000s. These adopted a tiling scheme that defined how a global map in Web Mercator projection could be pre-rendered for display in a web browser.

The tiling scheme is based on pre-rendering sets of 96 ppi

96 ppi (pixels per inch) is the standard CSS pixel size used by web browsers.

256x256 pixel PNG or JPEG image tiles, starting with a single tile at zoom level 0 that covers the entire world. This single tile, spanning -180º longitude to 180º longitude at 256 pixels width and 96 ppi, turns out to be of horizontal scale 1:591,657,527.591555 at the equator. So 591657527.591555 is the map scale for zoom level 0.

Figure 1: A typical 256x256 pixel, 96 ppi, zoom level 0 image tile

Zooming in by one level halves the scale (and consequently quadruples the number of 256x256 pixel tiles required to cover the world - 2x the horizontal tiles, and 2x the vertical tiles). Zoom level 1 requires 4 tiles to cover the same geographic area as the single zoom level 0 tile; zoom level 2 requires 16 tiles; zoom level 3 requires 64, and so on. By the time you get to zoom level 20, 1,099,511,627,776 tiles are needed.

Crucially, these zoom levels represented scales at which the pre-rendered 96 ppi 256x256 pixel map tiles could be displayed crisply, without pixel resampling, in a web browser. Web browsers used the standard CSS pixel size of 96 ppi: that is, 1 tile pixel would match 1 screen (browser) pixel.

Over time, this mapping between zoom levels and map scales became established as a de facto standard, despite tiles being used outside of browser apps at many different screen resolutions, and despite the onset of dynamically rendered vector tiles in place of the original pre-rendered 96 ppi PNG or JPEG image tiles.

Many modern mapping solutions and APIs only display Web Mercator maps and so continue to use zoom level as a shortcut for map scale. They do this despite using vector tiles and vector data, which means they don't need to lock to these specific legacy zoom levels for a crisp map display that avoids pixel resampling, although many do.

ArcGIS APIs can render many different map projections at a full range of scales, and so use scale rather than zoom level (although the ArcGIS JavaScript API does provide support for zoom levels as a convenience).