How maps render — tiles, vectors, and the GPU pipeline

Understanding how a map renders helps you make better performance decisions: when to use raster tiles, when to switch to vector, why overzooming looks blurry, and what actually happens when you call map.setCenter().

The raster tile pipeline

A traditional web map works like this:

1. Pre-render: The server renders every zoom level (0–22) of the world into 256×256 PNG tiles, storing them as /tiles/{z}/{x}/{y}.png
2. Request: The browser calculates which tiles cover the viewport and requests them
3. Stitch: The browser lays the tiles on a grid with CSS absolute positioning
4. Pan: Moving the map repositions the grid; new tiles load at the edges

Zoom 0: 1 tile   (1×1 grid) — whole world
Zoom 1: 4 tiles  (2×2 grid)
Zoom 2: 16 tiles (4×4 grid)
...
Zoom n: 4ⁿ tiles

Total tiles at zoom 14: 4¹⁴ ≈ 268 million. Pre-rendering the full world to zoom 14 takes terabytes. Most tile providers only pre-render land/sea separation at high zoom and compute city tiles on demand.

Tile coordinates

You saw the math in Chapter 5. The important rendering implication: at any zoom level, a tile is exactly 256×256 pixels (or 512×512 for HiDPI). The tile size never changes; the number of tiles grows.

Vector tiles (MVT)

Instead of pre-rendered images, vector tiles contain raw geometries and attributes. The browser renders them in real time using WebGL.

Raster tile: PNG image (opaque, ~50–200 KB)
Vector tile: Encoded features (lat/lon, properties, ~5–50 KB compressed)

Vector tiles enable:

• Client-side styling — change colours, fonts, filters without new tiles
• 3D extrusion — buildings, terrain
• Interactivity — hover/click on individual features
• Sharp text — labels re-render at native resolution

The Mapbox Vector Tile (MVT) format uses Protocol Buffers. Coordinates are quantised integers in a local tile coordinate space (usually 0–4096), not geographic degrees.

tile_x = Math.round((lon_merc - tile_origin_x) / tile_size * 4096)
tile_y = Math.round((lat_merc - tile_origin_y) / tile_size * 4096)

The quantisation to 4096 units per tile gives ~1/16th of a pixel resolution at zoom 14 (9.5 m/px), far more than visual precision requires. The integer encoding also compresses dramatically with delta-coding — consecutive vertices in a ring typically differ by small values.

The WebGL pipeline

Modern map renderers (Mapbox GL, MapLibre, deck.gl) use WebGL:

1. Geometry upload — vertices uploaded to GPU memory as Float32Array
2. Vertex shader — converts tile coordinates to clip space
3. Rasterisation — GPU fills triangles and lines
4. Fragment shader — computes final pixel colour (applies styles, lighting)
5. Composite — multiple layers blended together

The vertex shader for a simple map tile looks roughly like:

uniform mat4 u_matrix;          // projection + view + model
attribute vec2 a_pos;           // tile coordinate (0–4096)

void main() {
  gl_Position = u_matrix * vec4(a_pos, 0.0, 1.0);
}