Leaflet Examples

Observable Framework is an open source static site generator for data apps.

Protomaps is an open source static site generator for maps.

Let's use them together!

Basic: API

Just a sharp basemap built from OpenStreetMap, using Leaflet, with vector tiles loaded from api.protomaps.com (API key required).

Basic: No API

The same map, but reading from a single PMTiles basemap archive hosted on Source Cooperative. No API keys needed, no tileserver needed! CORS required, though. Each tile is loaded via HTTP Range Requests.

Themes

Client-side rendered map means we can have... dark mode!

Tiled Data Loading

Overlaying a 20 megabyte PMTiles archive in the Observable Framework's data/ dir. Each tile is loaded via HTTP Range Requests.

Interaction: MapLibre GL JS

MapLibre GL JS is more advanced than leaflet. Use it if you require: