If you have used Google Maps, OpenStreetMap, or any modern web map in the last decade, every road and building you saw was probably loaded as a vector tile. The format is the unsung hero of modern web cartography. It is what makes web maps load fast, look sharp on any screen, and let designers ship beautiful styled maps without re-rendering the whole world for every brand.
This guide explains what a vector tile is, how it works, why it replaced raster tiles for most use cases, and how MapAtlas serves them in production.
The One-Sentence Definition
A vector tile is a small binary file containing the geographic features for one tile of a map at a specific zoom level, encoded as data rather than as a pre-rendered image.
The "data rather than image" part is the whole point. With a raster tile, the server has already decided what each pixel looks like. With a vector tile, the client receives the underlying geometry (lines, polygons, points) and labels, and renders them on the fly into whatever style the user has chosen.
How Web Maps Use Tiles
Every web map you have ever used divides the world into a tile grid. At zoom 0, the entire world fits in one tile. At zoom 1 there are 4 tiles, at zoom 2 there are 16, and so on. Each tile is identified by three numbers: zoom (z), column (x), and row (y). When you pan or zoom, the map library fetches only the visible tiles, caches them, and discards the ones that have left the viewport.
For raster tiles, the server pre-renders a PNG for every (z, x, y). This works but has limitations: the style is fixed at render time, every style change means re-rendering the whole world, and the images must ship at 1x and 2x resolution to look sharp on retina screens.
Vector tiles flip the model. The server ships geometry. The client renders. One tileset supports any number of styles, looks crisp at any DPI, and stays small on the wire.
The MVT Format
The de facto standard format is MVT, the Mapbox Vector Tile specification. MVT is a Protocol Buffers encoding that organizes features into named layers, typically:
transportation(roads, railways)buildings(footprints)places(named cities, towns, neighbourhoods)landuse(parks, residential, commercial)water(oceans, lakes, rivers)boundaries(admin areas)
Each feature in a layer has a geometry (point, line, polygon) and a set of attributes (name, type, importance, language variants). Geometry coordinates are integers in tile-local coordinate space, ranging from 0 to 4096, which is what gives MVT its compact size.
MVT is fully open, vendor-neutral, and supported by every major rendering engine: Mapbox GL JS, MapLibre GL JS, OpenLayers, deck.gl, and the iOS and Android Mapbox SDKs.
Why Vector Tiles Replaced Raster Tiles
There are five reasons modern web maps almost universally use vector tiles for the base layer:
Style flexibility. With one tileset you can render a light theme, a dark theme, a print-optimised style, a satellite-overlay style, and a brand-coloured style for marketing. No re-rendering on the server.
Pixel-perfect at any DPI. A raster tile at 1x looks fuzzy on a Retina screen. A vector tile is rendered fresh on the client at the device's native resolution.
Smaller payloads. A complex urban tile is often smaller as MVT than as a high-quality PNG, especially when gzipped.
Runtime interactivity. You can highlight a specific road on hover, fade out unused layers, animate transitions, and respond to feature clicks because the client knows what every pixel represents.
Smooth zooming and rotation. Vector geometry rotates and scales without aliasing. Raster tiles look pixelated when zoomed between integer zoom levels or rotated off-axis.
The cost is client CPU and GPU work, which is a non-issue on any device made in the last decade.
What You Style at Runtime
A style document (typically a JSON in the Mapbox Style Spec, also adopted by MapLibre) describes how each layer should be drawn. Examples of what you can change without touching the tile data:
- The colour of every road class
- The width of road lines, varying by zoom
- Which place labels show at which zoom
- Font, size, and halo of every text label
- Visibility of entire layers (turn off all admin boundaries with one toggle)
- Pattern fills, dashed lines, gradients, blur effects
This is what makes branded maps possible. A design team can ship a Mapbox style JSON, a MapLibre style JSON, or a MapAtlas style preset and the same tileset renders in their brand identity.
Caching and Performance
Vector tiles cache extremely well because the geometry of the world does not change every minute. CDN edge caches typically hold MVT tiles for hours or days. The map library prefetches tiles ahead of the user's likely pan direction and keeps recently viewed tiles in memory. The result is that a user panning across a city sees a smooth experience because the tiles for the next viewport are usually already loaded.
Production tile services typically expose the tiles at a path like /{z}/{x}/{y}.pbf (PBF is the protobuf binary extension). A modern HTTP/2 or HTTP/3 connection multiplexes dozens of tile requests in parallel.
Where MapAtlas Fits
MapAtlas serves MVT-compatible vector tiles for the Dynamic Maps product, with EU-only hosting, predictable pricing, and a tile schema designed for downstream styling and AI annotation. The same data layers that drive the visible map (places, transportation, buildings, points of interest) are also exposed as structured data through the Geocoding and Search APIs, so a feature you see on the map can be retrieved as a typed JSON record for your own logic.
For a deeper look at the rendering layer, the Custom Map Styling guide covers how to ship a brand-aligned vector tile style end to end.
Frequently Asked Questions
What is a vector tile?
A vector tile is a small binary file that contains the geographic features (roads, buildings, points of interest, labels) for a single tile of a web map at a specific zoom level. Unlike a raster tile, which is a pre-rendered PNG or JPG image, a vector tile holds the underlying geometry and attributes as data. The browser or mobile client renders that data into pixels at runtime, which means the same tile can be styled differently, rotated, and rendered at any pixel density without losing sharpness.
What is the difference between a vector tile and a raster tile?
A raster tile is a fixed PNG or JPG image, typically 256x256 or 512x512 pixels, pre-rendered on the server with a fixed style. A vector tile is a binary file containing geometry and attributes, rendered into pixels by the client. Vector tiles are smaller over the wire, support runtime restyling, look sharp at any zoom and any DPI, and let you toggle layers on and off without re-fetching. The tradeoff is that the client needs to do the rendering work, which is fine on any modern browser or phone.
What is the MVT format?
MVT is the Mapbox Vector Tile specification, the de facto standard format for vector tiles. It is a Protocol Buffers (protobuf) encoding of geographic features for a single tile, organized into named layers (e.g. roads, buildings, places). The format is open, vendor-neutral, and supported by every modern map renderer (Mapbox GL, MapLibre, OpenLayers, deck.gl). MapAtlas serves MVT-compatible tiles through its dynamic maps endpoint.
How small are vector tiles?
A typical urban vector tile at zoom 14 is between 50 KB and 200 KB on the wire, often compressed to 30-100 KB after gzip. The size depends on the area's data density: a tile covering central Paris is heavier than a tile covering the Atlantic Ocean. Most production maps achieve smooth panning and zooming because tiles are cached aggressively, prefetched ahead of the user's view, and rendered on the GPU.
