API Reference

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

<Map>
  <MapMarker :longitude="..." :latitude="...">
    <MarkerContent>
      <MarkerLabel />
    </MarkerContent>
    <MarkerPopup />
    <MarkerTooltip />
  </MapMarker>

  <MapPopup :longitude="..." :latitude="..." />
  <MapControls />
  <MapRoute :coordinates="..." />
  <MapArc :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.

Native MapLibre MapOptions (excluding container and style) flow through $attrs — pass them as regular Vue attributes (e.g. :scroll-zoom="false").

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

const { map, isLoaded } = useMap();

Returns map (a MapLibre.Map Ref) and isLoaded (boolean Ref) which is true once the map is ready.

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.

Native MapLibre MarkerOptions (excluding element) flow through $attrs.

Renders the visual content of a marker. Must be used inside MapMarker. If no slot content is 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 — tooltips auto-dismiss on hover out).

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

A standalone popup component placed at any coordinate without a marker. Must be used inside Map.

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

Renders curved lines between coordinate pairs using a quadratic Bézier in longitude/latitude space. Must be used inside Map.

Built on a MapLibre line layer — the paint and layout props accept any field from LineLayerSpecification.

Style per arc with a MapLibre expression as any paint value. Reference fields on each datum with ["get", "fieldName"].

Renders clustered point data using MapLibre's native clustering. 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> />.