Map
OpenLayers map components for display, selection, clustering, and heatmap visualization. OSM tiles, WGS84 coordinates. All dynamically imported for SSR safety.
MapDisplay
Read-only map for detail views. Shows a point marker or polygon. No interactions — purely visual.
MapPicker
Interactive map for form fields. Click to place a point or draw a polygon. Follows Input patterns (label, help, error).
Layers & boundary
Ordered GeoJSON overlays under the interactive layer — entity feeds, WFS GeoJSON, or inline data; styles are flat or GeoStyler (first rule). MapPicker additionally takes a boundary polygon rendered as a dashed outline, and signals onoutofbounds when a placed point leaves it — the pin still lands; blocking is the consumer's (and ultimately the server's) decision.
MapCluster
Clustered markers for list views. Click a cluster to zoom in, click a single marker to trigger the onclick callback. Auto-centers on markers.
With GeoJSON overlay layers (same layers contract as MapDisplay/MapPicker — ordered, unbounded):
MapHeatmap
Density visualization of weighted points. Built-in OpenLayers heatmap layer — no plugins. Configurable blur and radius.
With GeoJSON overlay layers:
Styled Tiles
All map components accept a tileSource prop. Default is OSM. Stadia Maps layers are free for web (no API key). XYZ supports Mapbox, CARTO, and any tile URL.
Tile Source Config
{ type: "osm" } Default. Standard OpenStreetMap tiles.{ type: "stadia", layer: "...", apiKey: "..." } Stadia Maps. Requires API key. Layers: stamen_toner_lite, alidade_smooth, alidade_smooth_dark, stamen_watercolor, outdoors, osm_bright.{ type: "xyz", url: "..." } Any XYZ tile URL. Use for Mapbox, CARTO, or self-hosted tiles.TOKEN REFERENCE
Map components use component tokens from components.css:
--map-radius: var(--radius-md)--map-border: var(--elevation-border)--map-marker-radius: var(--space-sm)--map-marker-fill: var(--color-accent)--map-marker-stroke: var(--color-surface)--map-cluster-radius: var(--space-md)--map-cluster-fill: var(--color-accent)--map-cluster-text-fill: var(--color-text-on-accent)--map-polygon-fill: color-mix(in srgb, var(--color-accent) 20%, transparent)--map-polygon-stroke: var(--color-accent)