Svelte Maplibre

API / Markers and Popups

Marker

Show a marker on the map at lngLat. The children of this component become the marker element, so you can use any 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 and anchor are applied only when the marker is created. lngLat, offset, rotation, opacity, and class update the existing marker.

The marker sends click, mouse, and drag events. Set interactive to false to stop them. Set asButton to make the marker tabbable with a button role. Put a Popup inside the children to attach a popup to the marker.

import { Marker } from 'svelte-maplibre';

Generic parameters: FEATURE 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
  • interactive boolean

    Default: true

    Handle mouse events

  • asButton boolean

    Default: false

    Make markers tabbable and add the button role.

  • draggable boolean

    Default: false

  • feature FEATURE

    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.

  • zIndex number

    The z-index of the marker. This can also be set via CSS classes using the class prop

  • 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<GenMarkerClickInfoFeature<FEATURE>>) => void
  • ondragstart (e: MarkerClickInfo<GenMarkerClickInfoFeature<FEATURE>>) => void
  • ondragend (e: MarkerClickInfo<GenMarkerClickInfoFeature<FEATURE>>) => void
  • onclick (e: MarkerClickInfo<GenMarkerClickInfoFeature<FEATURE>>) => void
  • ondblclick (e: MarkerClickInfo<GenMarkerClickInfoFeature<FEATURE>>) => void
  • oncontextmenu (e: MarkerClickInfo<GenMarkerClickInfoFeature<FEATURE>>) => void
  • onmouseenter (e: MarkerClickInfo<GenMarkerClickInfoFeature<FEATURE>>) => void
  • onmouseleave (e: MarkerClickInfo<GenMarkerClickInfoFeature<FEATURE>>) => void
  • onmousemove (e: MarkerClickInfo<GenMarkerClickInfoFeature<FEATURE>>) => void

Source: src/lib/Marker.svelte