API Reference

All parts of the component that you can use and combine to build your map.

<Map>
  <MapMarker longitude={...} latitude={...}>
    <MarkerContent>
      <MarkerLabel />
    </MarkerContent>
    <MarkerPopup />
    <MarkerTooltip />
  </MapMarker>

  <MapPopup longitude={...} latitude={...} />
  <MapControls />

  <MapRoute coordinates={...} progress={...}>
    <RouteProgress />
    <RouteMarker at="progress">
      <MarkerContent />
    </RouteMarker>
  </MapRoute>

  <MapArc data={...} />
  <MapGeoJSON data={...} />
  <MapClusterLayer data={...} />
</Map>

The root container component that initializes MapLibre GL and provides context to child components. Automatically handles theme switching between light and dark modes.

Extends MapOptions from MapLibre GL (excluding container and style).

A hook that provides access to the MapLibre map instance and loading state. Must be used within a Map component.

const { map, isLoaded } = useMap();

Returns map (MapLibre.Map) and isLoaded (boolean) tells you if the map is loaded and ready to use.

Renders map control buttons (zoom, compass, locate, fullscreen). Must be used inside Map.

A container for marker-related components. Provides context for its children and handles marker positioning.

Extends MarkerOptions from MapLibre GL (excluding element).

Renders the visual content of a marker. Must be used inside MapMarker. If no children provided, renders a default blue dot marker.

Renders a popup attached to the marker that opens on click. Must be used inside MapMarker.

Extends PopupOptions from MapLibre GL (excluding className and closeButton).

Renders a tooltip that appears on hover. Must be used inside MapMarker.

Extends PopupOptions from MapLibre GL (excluding className, closeButton, and closeOnClick as tooltips auto-dismiss on hover out).

Renders a text label above or below the marker. Must be used inside MarkerContent.

A standalone popup component that can be placed anywhere on the map without a marker. Must be used inside Map.

Extends PopupOptions from MapLibre GL (excluding className and closeButton).

Renders a line/route on the map connecting coordinate points. Must be used inside Map. Supports click and hover interactions for building route selection UIs.

progress marks how far along the route you are; add a RouteProgress child to draw that portion. Mark one route active to raise it above its siblings with the active* styles.

Draws the covered portion of the parent MapRoute on top of the base line, ending exactly at its progress fraction. Must be used inside MapRoute, and renders nothing until the route has a progress value.

A MapMarker pinned to a position along the parent MapRoute, so you never compute the coordinate yourself. Must be used inside MapRoute. Accepts every MapMarker prop except longitude and latitude, and the same children.

Renders curved lines between coordinate pairs using a quadratic Bézier in longitude/latitude space. Must be used inside Map. Supports click and hover interactions for building arc selection UIs.

Built on a MapLibre line layer, so paint and layout accept any field from LineLayerSpecification. Any paint value can be a MapLibre expression — reference datum fields with ["get", "fieldName"].

Renders arbitrary GeoJSON as fill + outline layers. Must be used inside Map — typically with the blank prop for choropleths and region/data maps. Supports a generic type parameter for typed feature properties: MapGeoJSON<MyProperties>.

Fill and outline default to a theme-aware monochrome tone, so shapes read clearly on light/dark out of the box. Any paint value can be a MapLibre expression for data-driven styling.

Renders clustered point data using MapLibre GL's native clustering. Automatically groups nearby points into clusters that expand on click. Must be used inside Map. Supports a generic type parameter for typed feature properties: MapClusterLayer<MyProperties>.