API / Layers

HeatmapLayer

Add a MapLibre heatmap layer to the map. It shows the density of point features as a heatmap.

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

import { HeatmapLayer } from 'svelte-maplibre';

Generic parameters: FEATURE extends Feature = Feature

Examples

id any

Default: getId('heatmap')
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