Interactive Maps with Leaflet
Leaflet is a widely used JavaScript library for interactive web maps. Observable Framework includes it as a built-in - no import needed.
Basic Map with OpenStreetMap
The minimal Leaflet setup: create a <div> container, initialize the map, and add a tile layer.
Adding Markers and Popups
GeoJSON Layer
Load a GeoJSON file and render it on the map with custom styles:
Layer Control (Multiple Base Layers)
Offer the user a choice of base maps using L.control.layers:
Overlay Layers
Add optional overlays (e.g., markers, GeoJSON) that the user can toggle independently of the base layer:
Leaflet Quick Reference
| Method | Description |
|---|---|
L.map(el).setView([lat, lng], zoom) |
Initialize map |
L.tileLayer(url, options) |
Raster tile layer |
L.marker([lat, lng]) |
Pin marker |
L.circleMarker([lat, lng], options) |
Circle marker |
L.circle([lat, lng], {radius}) |
Circle in meters |
L.geoJSON(data, options) |
GeoJSON layer |
L.layerGroup([...layers]) |
Group layers |
L.control.layers(baseMaps, overlays) |
Layer switcher |
.addTo(map) |
Add to map |
.bindPopup(html) |
Attach popup |
invalidation.then(() => map.remove()) |
Clean up |
Full documentation: leafletjs.com/reference.html