How Map Tiles Work in Web Maps and Apps

Map tiles are small square pieces of a map that a browser or app assembles into the view you see. Instead of loading one giant picture of the world, the map loads only the tiles that cover your screen at the current zoom level. As you pan or zoom, it requests neighbouring or new tiles, which is why large maps feel quick.

The tile pyramid

Tiled maps are organised as a pyramid with one level per zoom level:

• At zoom 0, the entire world fits in a single tile.
• At each step up in zoom, every tile is divided into four, so there are 2 to the power of z tiles across and down at zoom z.
• Each tile is addressed by three numbers: zoom (z), column (x) and row (y).

Because every tile has a predictable address, a server can store tiles as files, and a browser can compute exactly which ones it needs for the visible area. Most web maps use the Web Mercator projection to lay out this grid.

Raster tiles

A raster tile is a pre-rendered image, usually PNG or JPEG, sized 256 by 256 pixels or similar. Satellite imagery and traditional street maps are often delivered this way. They are simple to display, but the appearance is fixed on the server, so rotating the map or changing label language needs a new set of tiles.

Vector tiles

A vector tile carries the underlying geometry and attributes, such as roads, buildings and names, in a compact data format. The device draws them using a style. This brings several benefits:

• Smaller downloads for the same detail
• Crisp rendering at any screen density
• Styles that can be changed on the device, for example for dark mode
• Smooth rotation and tilting

The trade-off is greater work for the client device.

Why tiles matter to you

• Speed: only what is visible is downloaded.
• Caching: tiles can be cached by browsers and servers, since a tile at a given address rarely changes.
• Consistency: layers that share the same grid align exactly, so overlays such as a traffic or grid layer sit correctly on a base map.

Overlays and grids

An overlay can be drawn over the base tiles, such as a grid of small cells. A system such as UPCS shows its 3 m grid when you zoom in far enough; in the embeddable map, the grid appears from zoom 18. Why that zoom is chosen follows from the ground resolution explained in the zoom levels guide.

For the wider context of how positions become pictures, read what a map projection is.