← Lessons

quiz vs the machine

Gold1400

System Design

Map Tile Serving

Delivering the map image as a pyramid of small precomputed square tiles.

5 min read · core · beat Gold to climb

The tile pyramid

A web map is served as a pyramid of tiles. Each zoom level doubles the resolution, and the world at that level is cut into a grid of fixed size square tiles addressed by zoom, x, and y. Panning and zooming just request the tiles that fall in the viewport.

Why tiles work so well

  • Cacheable. A tile at a given coordinate is the same for everyone, so it caches beautifully at the edge.
  • Bounded work. A viewport needs only a handful of tiles regardless of how large the whole map is.
  • Precomputable. Stable base map tiles can be rendered ahead of time and stored as plain files.

Static versus dynamic tiles

  • Raster tiles are prerendered images, simple and cache friendly.
  • Vector tiles ship geometry that the client styles and labels, allowing smooth zoom and per user styling at the cost of client work.
  • Frequently changing overlays like traffic are rendered on demand with short cache lifetimes.

Key idea

Map tiles turn an unbounded map into bounded cacheable squares addressed by zoom and grid position so any viewport costs only a few requests.

Check yourself

Answer to earn rating on the learn ladder.

1. How is a single map tile addressed?

2. Why do base map tiles cache so well?