↓ Skip to main content
Cache Misses and Ideas

Self-Hosted Map Viewer

Table of Contents
A self-hosted, multi-layer map viewer built with React, TypeScript, and MapLibre GL JS. All map data - vector tiles, terrain, land cover - is served from self-hosted storage with no external tile servers or API keys required.

map.pascalspoerri.ch is an interactive map viewer that loads tiles directly in the browser via HTTP range requests from PMTiles archives. The entire dataset - OpenStreetMap vector tiles, terrain elevation data, ESA WorldCover land cover, and Natural Earth raster tilesets - is self-hosted on S3-compatible object storage, making the application fully independent of third-party tile services.

Open map.pascalspoerri.ch

Features
#

  • Multiple base maps: OpenStreetMap (with 8 visual styles), SwissTopo Base, and SwissTopo Relief. OSM feature categories (labels, roads, buildings, 3D buildings, borders, land use, water) can be toggled individually.
  • 3D terrain: Elevation rendering with configurable exaggeration, hillshade, contour lines, slope angle visualization (for avalanche terrain assessment), and a classified avalanche terrain (CAT) simulation.
  • Globe & flat projection: Toggle between 3D globe and standard Mercator views.
  • Layer management: Add layers by URL, file upload, or from a built-in catalog (Natural Earth 6). Layers support drag-and-drop reordering, per-layer visibility and opacity, and type-specific styling (fill/stroke for vector, saturation/contrast for raster).
  • ESA WorldCover: Classified land cover overlay with 11 toggleable classes, colorized on-the-fly from the raw classification data.
  • Sport routing: Client-side A* pathfinding on the OSM road network with six sport modes (walking, running, hiking, cycling, mountain biking, ski touring). Routes include elevation profiles with gain/loss stats and estimated times. Import and export as GPX, KML, or GeoJSON.
  • Location search: Geocoding via Nominatim with fly-to navigation.

Self-Hosted Data
#

The whole dataset totals 5.2 TB and is entirely self-hosted on OVH S3-compatible object storage. No external tile servers or API keys are needed - all tiles are loaded directly in the browser using PMTiles HTTP range requests:

  • Terrain DEM (4.6 TB) - sharded terrarium-encoded PMTiles archives, by far the largest dataset. Can be scaled down to 618 GiB by only serving data up to zoom level 12.
  • OpenStreetMap (122 GB) - the full Protomaps planet build as a single PMTiles archive
  • ESA WorldCover 2021 - land cover classification (processed with geotiff2pmtiles)
  • Natural Earth 6 - 26 high-resolution raster tilesets from shadedrelief.com

Tech Stack
#

React 19, TypeScript, Vite 7, MapLibre GL JS 5, PMTiles 4, Zustand, Tailwind CSS 4.

For a detailed walkthrough of how the map stack works — getting tile data, wiring up MapLibre with Protomaps, adding 3D terrain with Mapterhorn, and the protocol gotchas involved — see Self-Hosting Maps with MapLibre, Protomaps, and Mapterhorn.