Plate 01Where the styling decision sits
Render the style on the server and it ships fast; render it in the client and it bends to the reader. You cannot fully have both.
A fixed swatch book is a server-side decision: choose once, and everything downstream inherits the choice.
Photo: Brett Jordan / Pexels
The two positions, and what each costs
A server-rendered tile is a finished image — pixels committed, colours baked, labels placed. The server does the work once, caches the result, and serves the same file to everyone who asks. Delivery is fast and predictable; the infrastructure is simple. The cost is inflexibility. Change the road colour and every tile in the pyramid must be redrawn. Ask the map to respond to a user's preference — night mode, a different language, an accessibility palette — and the server has to either pre-bake every variant or abandon caching and render on demand, which is expensive and slow.
Client-side styling reverses the bargain. The server sends raw geometry and attribute data; the client receives those shapes and applies a style document at render time. The map can respond to anything: the device's colour scheme, a user-drawn filter, a data value that just changed. Labels can be placed against the screen's actual pixel density rather than guessed in advance. The penalty is weight — parsing geometry, evaluating a style sheet, and rasterising the result all happen on the device, every time. On a low-power phone on a poor connection, the user feels it.
The practical middle ground most delivery systems have settled on is the vector tile, served from the server and styled in the client: geometry is cached at the server because it changes rarely, while the style lives in the client because it changes often. The cache stays valid; the flexibility stays real. What this arrangement cannot solve is the rendering cost on the device, and it cannot help where JavaScript is unavailable or where the geometry payload itself is large.
Plate 2Every drawn grid is an agreement about where things sit — on tracing paper as much as on a screen.
Photo: Ksenia Chernaya / Pexels
One subtlety worth holding onto: styling is not just colour. It includes which features appear at which zoom level, how labels are placed, which attributes drive symbol size, and what gets dropped entirely. Pushing all of that into the client means the client must carry not only style rules but enough attribute data to evaluate them. A style that looks weightless in a desktop browser can be punishing on embedded hardware. The decision of where styling sits is therefore inseparable from decisions about what data the tile contains — strip the attributes and the client loses its flexibility; keep them all and the tile grows fat.
Also in Vector & Raster