API / Layers

MarkerLayer

Manages a set of HTML markers for the features in a source. This acts similar to a Layer component, but is not actually registered with the map as a layer. Markers for non-point features are placed at the geometry's center.

For pin-shaped custom HTML, set anchor="bottom" (and optional offset) so the tip stays on the coordinate when zooming—same as standalone Marker and typical MapLibre custom-marker examples.

import { MarkerLayer } from 'svelte-maplibre';

Generic parameters: FEATURE extends Feature = Feature

Examples

Props

applyToClusters boolean
filter maplibregl.ExpressionSpecification
anchor maplibregl.PositionAnchor
offset PointLike

Pixel offset passed through to Marker / MapLibre.
markerLngLat (feature: FEATURE) => [number, number]

Default: geoCentroid

How to calculate the coordinates of the marker.
interactive boolean

Default: true

Handle mouse events
asButton boolean

Default: false

Make markers tabbable and add the button role.
draggable boolean

Default: false
minzoom number
maxzoom number
hovered bindable FEATURE
zIndex number | ((feature: FEATURE) => number)

The z-index of the markers. This can also be set via CSS classes using the class prop. If a function is provided, it will be called with each feature as an argument.
class string
children Snippet<[{ feature: FEATURE; position: [number, number]; }]>
onclick (e: MarkerClickInfo<MarkerClickInfoFeature<FEATURE>> & { source: string | undefined; feature: FeatureWithId<FEATURE>; }) => void
ondblclick (e: MarkerClickInfo<MarkerClickInfoFeature<FEATURE>> & { source: string | undefined; feature: FeatureWithId<FEATURE>; }) => void
oncontextmenu (e: MarkerClickInfo<MarkerClickInfoFeature<FEATURE>> & { source: string | undefined; feature: FeatureWithId<FEATURE>; }) => void
ondrag (e: MarkerClickInfo<MarkerClickInfoFeature<FEATURE>> & { source: string | undefined; feature: FeatureWithId<FEATURE>; }) => void
ondragstart (e: MarkerClickInfo<MarkerClickInfoFeature<FEATURE>> & { source: string | undefined; feature: FeatureWithId<FEATURE>; }) => void
ondragend (e: MarkerClickInfo<MarkerClickInfoFeature<FEATURE>> & { source: string | undefined; feature: FeatureWithId<FEATURE>; }) => void

Source: src/lib/MarkerLayer.svelte