Module 17: Web GIS & APIs

17.1 The Anatomy of a Web Map

Tiles, layers, styles, interactivity — the components behind every interactive map you've ever used.

Lesson 82 of 100·15 min read

Key takeaways

Every web map is a stack of tile layers rendered by a client-side library.

The z/x/y tile scheme (slippy map) is standard across Google, OSM, Mapbox, Apple.

Modern web maps use vector tiles for flexible, high-performance styling.

Introduction

When you pan a web map smoothly across the world, you're using a stack of technologies invented over the past 20 years. This lesson maps out the architecture — tiles, styles, layers, and interactivity — so you can build or debug web maps confidently.

The slippy map tile scheme

Invented by Google Maps (2005). The world is divided into a tile pyramid:

Zoom 0: one tile covering the entire globe.
Zoom 1: 2 × 2 = 4 tiles.
Zoom 2: 4 × 4 = 16 tiles.
...
Zoom z: 2^z × 2^z tiles.

Each tile is referenced by (z, x, y) — zoom level, column, row. The URL template:

Code

https://example.com/tiles/{z}/{x}/{y}.png

When you pan, the client requests the visible tiles; when you zoom, it requests from the next zoom level.

Web Mercator

Tiles are in EPSG:3857 (Web Mercator) — a cylindrical projection that makes square tiles convenient but distorts area (Greenland = Africa). Understanding this is key to web mapping.

Y goes top-to-bottom; some systems use TMS (y from bottom) instead of XYZ (y from top) — a source of many off-by-one bugs.

Raster tiles

Pre-rendered images (PNG or JPEG). Fast for the client (draw the image), but:

Large in aggregate.
Styling is fixed at tile generation.
No interactivity beyond the tile.

Raster tiles dominated 2005–2015.

Vector tiles

Invented by Mapbox around 2014. Tiles contain vector geometries (roads, buildings, labels) encoded in Mapbox Vector Tile (MVT) format. The client renders them on demand using a style specification. Benefits:

Style-on-read: change colours, labels, visibility without re-tiling.
Pixel-perfect rendering at any screen DPI.
Much smaller than raster tiles for the same information.
Interactive — click on a feature and you get its attributes.

The rendering is done client-side using WebGL — MapLibre GL and Mapbox GL are the canonical libraries.

The tile server

A tile server answers /z/x/y requests. Options:

Pre-rendered — tiles generated ahead of time, stored in a CDN.
Live rendered — tiles generated on demand from source data (PostGIS, Mapnik).
Cloud-native — PMTiles, packaged single file, served from static hosting.

Modern web maps increasingly use the PMTiles pattern for simplicity.

The client library

JavaScript libraries that assemble tiles into an interactive map:

Leaflet — lightweight (42 KB), raster-first, huge ecosystem. Good default for simple maps.
Mapbox GL JS — WebGL-rendered vector tiles, closed source recently.
MapLibre GL JS — open-source fork of Mapbox GL, fully compatible with vector tile styles.
OpenLayers — feature-rich, slightly more complex API, supports more CRSs.
Google Maps JS API — commercial, feature-rich.
CesiumJS — 3D globe.
deck.gl — WebGL layers for data visualisation.

For new projects: MapLibre GL for vector-first, Leaflet for quick raster-first.

Layers

A web map typically has:

Base map — streets, labels, terrain.
Overlays — your thematic data (choropleth, points, lines).
Labels — place names, road names.

Each layer can be raster, vector, or WebGL-rendered.

In Atlas, these same concepts appear as a working map rather than code: choose a base map, add data layers, style them, and configure the attributes shown on click. It is a useful way to understand the anatomy before you build the same stack manually with MapLibre.

Interactivity

Modern web maps support:

Pan / zoom — default.
Click / hover — feature selection.
Tooltips / popups — show attributes.
Drawing tools — user-created features.
Filtering — hide/show features by attribute.
Animation — time sliders, transitions.

A minimal MapLibre setup

html

1<!DOCTYPE html>
2<html>
3<head>
4  <link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
5  <script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
6</head>
7<body>
8  <div id="map" style="width: 100vw; height: 100vh"></div>
9  <script>
10    new maplibregl.Map({
11      container: 'map',
12      style: 'https://demotiles.maplibre.org/style.json',
13      center: [12.5683, 55.6761],
14      zoom: 12
15    });
16  </script>
17</body>
18</html>

Under 20 lines, global interactive map.

Performance tips

Use vector tiles for most applications.
Limit source-layer features per tile (generalise at low zooms).
Cache tiles via CDN.
Compress (gzip / brotli) tile responses.
Deliver WEBP where supported.
Bundle clusters at low zoom.

Mobile considerations

Touch events differ from mouse.
Limited bandwidth → lean tile sizes.
Limited memory → fewer simultaneous layers.
High-DPI screens → retina-ready tiles or vector.

Self-check exercises

1. Why are there two y-coordinate conventions in tile schemes?

XYZ (Google-style) puts y = 0 at the top; TMS puts y = 0 at the bottom. The two predate each other by a few years and neither dominated early; tile servers typically support both. When integrating systems, verify which convention is in use — a flipped y produces a map that looks fine but is upside-down by a few tiles.

2. When would you use raster tiles instead of vector tiles?

When the map content doesn't change (historical imagery, specific styled output for a report), when the client library can't render vector tiles (some embedded devices), or when simplicity of deployment outweighs flexibility. Raster tiles are easier to cache at CDN level. For almost every new interactive web map, vector tiles are the better default.

3. Why is MapLibre GL JS often preferred over Mapbox GL JS for new projects?

MapLibre is the open-source fork of Mapbox GL (since Mapbox relicensed v2 in 2020). It remains fully MIT-licensed, community-governed, and compatible with Mapbox-style tile sources and style specifications. For teams that want to avoid vendor lock-in or commercial licence fees, MapLibre is the natural choice. For teams deeply integrated with Mapbox services, Mapbox's own library is still a solid option.

Summary

Web maps are tile pyramids + client-side renderer.
Web Mercator is the default CRS.
Vector tiles allow style-on-read and interactivity.
MapLibre GL JS + PMTiles is a modern open-source stack.