MapLibre GL JS renders vector and raster sources in the browser. A source supplies data; a style layer specifies which features to draw and how. Several style layers can reference one source.
Add data and symbols separately
Create the map container with an explicit height. Wait for the map's load event before adding sources and layers. Register each GeoJSON source once, then use fill, line, circle or symbol layers appropriate to its geometry. Vector tiles also require the correct source-layer name.
Layer order controls occlusion. Place polygon context below roads, power networks and facility markers. Keep labels above the features they identify. Use the same color and line definitions in the map and legend.
Update and inspect
Toggle a layer with its visibility layout property. Update GeoJSON through the existing source's setData method. On a feature click, inspect event.features and show a small set of named attributes. Insert untrusted property values as text rather than interpolated HTML.
Call map.resize() when its container changes size. In an Observable cell, use invalidation to remove the map and its observers when the cell is replaced.
Temane map and SVG comparison
The examples use attached Temane data and a remote basemap. Local data can remain available when a provider is unreachable, but basemap tiles still require a connection. The SVG comparison fixes the same study frame without tile requests.