@elabs-ai/components-maps
Token-driven MapLibre GL maps: MapCanvas, MapMarker, MapPopup, MapControls, MapRoute, MapArc, MapGeoJSON, MapClusterLayer — and custom plan maps (a floor plan, a plant layout, a carriage) drawn in their own units.
pnpm add @elabs-ai/components-mapsHighlights
A few of the 14 pages here. Open a family below, or in the navigation, to see all of it.
Root MapLibre canvas — theme-aware basemap; the ref is the raw MapLibre Map. With plan it is a non-geographic plan instead (a floor, a plant, a carriage) and every layer inside speaks plan units.
Clusters dense point data into count bubbles that split apart as you zoom in.
Curved great-circle-style arcs between coordinate pairs (flight paths, network links).
The keyboard and label layer of a plan: one real <button aria-pressed> per region over the WebGL canvas, with spatial arrow-key travel and a group mode for very large plans.
MapLegend — the map's key: marker rows (items) and / or a colour ramp (scale, built with colorScaleFor from @elabs-ai/components-ui, so its colours are token references in every theme).
Browse by family
MapAnnotation · MapArc · MapCanvas · MapClusterLayer · MapGeoJSON · MapMarker · MapRoute
MapControls · MapInset · MapLegend · MapNorthArrow · MapScaleBar
MapPlanImage · MapPlanOverlay