API / Layers

CircleLayer

Add a MapLibre circle layer to the map. It shows point features as circles.

This is a thin wrapper around Layer with type set to circle. Place it inside a source component such as GeoJSON, or set the source prop.

Set applyToClusters to true to show only clustered points, or to false to show only points that are not clusters.

Set manageHoverState to set the hover feature state on the feature under the mouse. Bind to hovered to get that feature.

import { CircleLayer } from 'svelte-maplibre';

Generic parameters: FEATURE extends Feature = Feature

Examples

id any

Default: getId('circle')
source string

Set the source for this layer. This can be omitted when the Layer is created in the slot of a source component.
sourceLayer string

When setting up a layer for a vector tile source, the source layer to which this layer corresponds.
beforeId string

Draw this layer under another layer. This is only evaluated when the component is created.
beforeLayerType string | ((layer: maplibregl.LayerSpecification) => boolean)

Draw this layer all layers of this type. This is only evaluated when the component is created.
filter maplibregl.ExpressionSpecification
minzoom number
maxzoom number
hoverCursor string

Set the cursor style to this value when the mouse is over the layer.
manageHoverState boolean

Default: false

Enable to use hoverStateFilter or filter on hover-state. Features must have an id property for this to work.
hovered bindable FEATURE & MapGeoJSONFeature
eventsIfTopMost boolean

Default: false
interactive boolean

Default: true

Handle mouse events on this layer.
children Snippet
onclick (e: LayerClickInfo<FEATURE>) => void
ondblclick (e: LayerClickInfo<FEATURE>) => void
oncontextmenu (e: LayerClickInfo<FEATURE>) => void
onmouseenter (e: LayerClickInfo<FEATURE>) => void
onmousemove (e: LayerClickInfo<FEATURE>) => void
onmouseleave (e: Pick<LayerClickInfo<FEATURE>, 'map' | 'layer' | 'source'>) => void