Publishing Web Maps

Get the data into a browser without shipping the whole dataset.

The web map publishing path, from the tile pyramid to a served PMTiles archive. into a browser without shipping the whole dataset1the tile pyramidXYZ, and four per step2vector tilesnot GeoJSON3generalise per zoomthe budget is real4PMTiles & MapLibreno tile serverGeneralisation is the stage people skip, and the reason a layer never appears

A GeoDataFrame that plots fine in a notebook is often a 300 MB GeoJSON in a browser, which is a blank page and a spinning fan. These guides cover the pyramid every web map is built on, what vector tiles are and why they are not GeoJSON, generalising for zoom so a coastline is not drawn at full detail at zoom 4, building tiles and PMTiles archives from Python, styling them in MapLibre, and the three reasons a layer that exists in the file never appears on the map.

The generalisation guide at stage three is the one to read if you only read one. A layer that works in Python and never appears in the browser is almost always a layer that was sent at full detail to a zoom level that cannot show it, and no amount of styling fixes that.

The full path, in order

The concepts underneath the work, then each task, then the errors that task produces. Work down, or jump to the step you need.

  1. Vector Tiles Explained: MVT, Layers and Why They Are Not GeoJSON vector tiles explained 🧭 Concept
  2. Generalisation for Zoom Levels Explained zoom generalisation explained 🧭 Concept
  3. How to Prepare a GeoDataFrame for the Web prepare geodataframe for web ⚙️ How-To
  4. My GeoJSON Is Too Big for the Browser geojson too big for browser 🔧 Fix
  5. How to Build Vector Tiles from a GeoDataFrame in Python build vector tiles python ⚙️ How-To
  6. PMTiles and MBTiles Explained: Tile Archives Without a Server pmtiles mbtiles explained 🧭 Concept
  7. How to Serve a Web Map from PMTiles with MapLibre serve pmtiles maplibre ⚙️ How-To
  8. My Web Map Is Blank or the Layer Never Appears web map layer not appearing 🔧 Fix
  9. My Tiles Are Offset or in the Wrong Place tiles are offset or misplaced 🔧 Fix
  10. How to Render Raster Tiles from a COG in Python raster tiles from cog ⚙️ How-To
  11. How to Export a Static Tile Pyramid for Offline Use export static tile pyramid python ⚙️ How-To
  12. How to Style Data-Driven Colours in a Web Map data driven web map styling ⚙️ How-To
  13. How to Add Interactivity and Popups to a Web Map web map popups interactivity ⚙️ How-To
  14. How to Publish a GeoJSON API from a GeoDataFrame with FastAPI geojson api fastapi python ⚙️ How-To

Topics this path covers

A path is a route; a topic is everything the site has on a subject. Open a topic to see the guides this path skips.

Other ways in