API Reference

Complete reference for all map components and their props.

Note: This library is built on top of MapLibre GL JS . Most components extend the native MapLibre options. Refer to the MapLibre Map API for additional options not listed here.

Component Anatomy

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={...} />
</Map>

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 ).

Prop Type Default Description
children Snippet — Child components (markers, popups, controls, routes).
styles { light?: string | StyleSpecification; dark?: string | StyleSpecification } — Custom map styles for light and dark themes.

Map Context

Access the MapLibre map instance and loading state via Svelte context. Must be used within a Map component.

<script lang="ts">
  import { getContext } from "svelte";
  import type MapLibreGL from "maplibre-gl";

  const mapCtx = getContext<{
    getMap: () => MapLibreGL.Map | null;
    isLoaded: () => boolean;
  }>("map");

  // Access the map instance
  const map = mapCtx.getMap();
  const isLoaded = mapCtx.isLoaded();
</script>

Provides getMap() returning the MapLibre.Map instance, and isLoaded() returning a boolean.

MapControls

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

Prop Type Default Description
position "top-left" | "top-right" | "bottom-left" | "bottom-right" "bottom-right" Position of the controls.
showZoom boolean true Show zoom buttons.
showCompass boolean false Show compass button.
showLocate boolean false Show locate button.
showFullscreen boolean false Show fullscreen button.
className string — Additional CSS classes.
onLocate (coords: { longitude: number; latitude: number }) => void — Called when user is located.

MapRoute

Renders a line on the map connecting coordinate points. Must be used inside Map .

Prop Type Default Description
coordinates [number, number][] — Array of [lng, lat] pairs.
color string "#4285F4" Line color.
width number 3 Line width.
opacity number 0.8 Line opacity.
dashArray [number, number] — Dash pattern for dashed lines.
Previous Installation Next Basic Map