Svelte Maplibre

API / Layers

DeckGlLayer

Add a deck.gl layer to the map. Set type to the deck.gl layer class and data to the array of data items.

The component loads @deck.gl/mapbox when it mounts, and adds a MapboxOverlay to the map as a control. All other props go to the deck.gl layer constructor. When a prop changes, the component makes a new layer instance with the new props. Set interleaved to draw the layer between the MapLibre layers. This prop is only used when the overlay is created.

The layer is hidden when visible is false or when the map zoom is outside minzoom and maxzoom. When interactive is true, the layer handles clicks and hover, and hovered holds the data item under the mouse. Child components, such as Popup, render only after the overlay is created.

import { DeckGlLayer } from 'svelte-maplibre';

Generic parameters: DATA

Examples

Props

  • id any

    Default: getId('deckgl-layer')

  • interleaved boolean

    Default: false

  • minzoom number
  • maxzoom number
  • visible boolean

    Default: true

  • interactive boolean

    Default: true

    Handle mouse events on this layer.

  • hovered bindable DATA

    This indicates the currently hovered feature. Setting this attribute has no effect.

  • type required any

    The deck.gl layer class to create

  • data required DATA[]
  • beforeId string
  • children Snippet
  • onclick (e: PickingInfo<DATA>) => void
  • onmousemove (e: PickingInfo<DATA>) => void
  • onmouseleave (e: PickingInfo<DATA>) => void

Source: src/lib/DeckGlLayer.svelte