Svelte Maplibre

API / Markers and Popups

DefaultMarker

Show the standard MapLibre marker pin on the map at lngLat. Use Marker instead if you want to use your own HTML as the marker.

Set draggable to let the user move the marker. lngLat is bindable, and it updates when the user drags the marker. draggable, anchor, and class are applied only when the marker is created. lngLat, offset, rotation, and opacity update the existing marker.

The children render after the marker is created. Put a Popup inside the children to attach a popup to the marker.

import { DefaultMarker } from 'svelte-maplibre';

Generic parameters: DATA extends Feature = Feature

Examples

Props

  • marker bindable maplibregl.Marker

    The Marker instance which was added to the map

  • lngLat required bindable LngLatLike
  • class string
  • anchor maplibregl.PositionAnchor
  • draggable boolean

    Default: false

    Handle mouse events

  • feature DATA

    A GeoJSON Feature related to the point. This is only actually used to send an ID and set of properties along with the event, and can be safely omitted. The lngLat prop controls the marker's location even if this is provided.

  • offset PointLike

    An offset in pixels to apply to the marker.

  • rotation number

    Default: 0

    The rotation angle of the marker (clockwise, in degrees)

  • opacity number

    Default: 1

    The opacity of the marker

  • children Snippet<[{ marker: maplibregl.Marker; }]>
  • ondrag (e: MarkerClickInfo<Feature<Point, DATA["properties"]>>) => void
  • ondragstart (e: MarkerClickInfo<Feature<Point, DATA["properties"]>>) => void
  • ondragend (e: MarkerClickInfo<Feature<Point, DATA["properties"]>>) => void

Source: src/lib/DefaultMarker.svelte