Web maps & tiles
Getting a dataset into a browser: tile pyramids, vector tiles, PMTiles and MapLibre styling.
Everything on Spatial Workflow about web maps & tiles, in the order that usually works: understand the idea, then run the task, then fix it when it goes wrong. 24 guides in total.
5 learning paths run through this topic — follow one if you would rather work through a route than pick a single guide.
🧭 Start with the concepts
The ideas the how-to guides below assume you already have.
- Web Map Tiles Explained: XYZ, Zoom Levels and the Tile Pyramid web map tiles explained
- Vector Tiles Explained: MVT, Layers and Why They Are Not GeoJSON vector tiles explained
- Generalisation for Zoom Levels Explained zoom generalisation explained
- PMTiles and MBTiles Explained: Tile Archives Without a Server pmtiles mbtiles explained
- Serving Spatial Data Explained: Files, Features and Tiles serving spatial data api
- Dynamic Tile Server or Static Tiles: What to Serve tile server vs static tiles
- 3D Tiles and the web delivery of 3D city models explained 3d tiles explained
⚙️ Then do the task
Step-by-step walkthroughs with code you can copy and adapt.
- How to Prepare a GeoDataFrame for the Web prepare geodataframe for web
- How to Build Vector Tiles from a GeoDataFrame in Python build vector tiles python
- How to Serve a Web Map from PMTiles with MapLibre serve pmtiles maplibre
- How to Render Raster Tiles from a COG in Python raster tiles from cog
- How to Export a Static Tile Pyramid for Offline Use export static tile pyramid python
- How to Style Data-Driven Colours in a Web Map data driven web map styling
- How to Add Interactivity and Popups to a Web Map web map popups interactivity
- How to Publish a GeoJSON API from a GeoDataFrame with FastAPI geojson api fastapi python
- How to Index Data by Quadkey and Web Map Tile quadkey python tile index
- How to publish a 3D building layer to a web map 3d buildings web map maplibre
🔧 When it breaks
The errors this topic produces, with the cause explained rather than just the command.
- My GeoJSON Is Too Big for the Browser geojson too big for browser
- My Web Map Is Blank or the Layer Never Appears web map layer not appearing
- My Tiles Are Offset or in the Wrong Place tiles are offset or misplaced
- Fixing CORS Errors on a Spatial API spatial api cors error
- Fixing a Tile Endpoint That Returns 404 or Blank Tiles tile endpoint 404 blank
- Fixing Blank or Grey Tiles in an Embedded Map blank grey tiles map app
- A 3D viewer shows nothing or a black screen 3d viewer shows nothing
Learning paths through this topic
A curated route rather than a list — the guides in the order that builds on itself.
-
Publishing Web Maps
Get the data into a browser without shipping the whole dataset.
Open path → -
Serving Spatial Data
The dataset is finished. Now other people need it over HTTP.
Open path → -
Maps, Apps & Dashboards
Let the reader ask their own question — within a budget.
Open path → -
H3 & Global Grids
Give every point a cell id and half the geometry work becomes a join.
Open path → -
3D & Buildings
A footprint plus a height is not a building, but it is most of one.
Open path →
Related topics
Subjects that keep coming up alongside this one, most overlap first.