Svelte Maplibre

API / Markers and Popups

Popup

Show a popup on the map. Put it inside a layer or marker component to open it on events from that layer or marker. You can also put it directly inside MapLibre and control it with open and lngLat.

openOn sets when the popup opens: click (the default), dblclick, contextmenu, hover, or manual. The children receive the features from the event, data (the first feature), map, close, and isOpen. If there are no children, the popup shows html.

open and lngLat are bindable. Use canOpen to stop the popup from opening for some features. By default the popup opens only when its layer is the top-most layer at the event location (openIfTopMost). It closes when the user clicks outside it (closeOnClickOutside).

import { Popup } from 'svelte-maplibre';

Generic parameters: DATA = Feature

Examples

Props

  • closeButton boolean

    Show the built-in close button. By default the close button will be shown only if closeOnClickOutside and closeOnClickInside are not set.

  • closeOnClickOutside boolean

    Default: true

    Close on click outside the popup.

  • closeOnClickInside boolean

    Default: false

    Close on click inside the popup. This should only be used for non-interactive popups.

  • closeOnMove boolean

    Default: false

    Close the popup when the map moves.

  • openOn "hover" | "click" | "dblclick" | "contextmenu" | "manual"

    Default: 'click'

    Define when to open the popup. If set to manual, you can open the popup programmatically by setting the open attribute.

  • openIfTopMost boolean

    Default: true

    Only open the popup if there's no feature from a higher layer covering this one.

  • focusAfterOpen boolean

    Default: true

  • anchor maplibregl.PositionAnchor
  • offset maplibregl.Offset
  • popupClass string

    Classes to apply to the map's popup container

  • maxWidth string
  • lngLat bindable maplibregl.LngLatLike

    Where to show the popup.

  • html string

    If set and the slot is omitted, use this string as HTML to pass into the popup.

  • open bindable boolean

    Default: false

    Whether the popup is open or not. Can be set to manually open the popup at lngLat, if openOn is not hover.

  • children Snippet<[{ features: Array<DATA> | undefined; data: DATA | undefined; map: maplibregl.Map | undefined; close: () => void; isOpen: boolean; }]>
  • canOpen (features: Array<DATA> | undefined) => boolean

    A callback which can return false if the popup should not open. For example, the features for this popup may not contain any data for the popup.

  • onopen (popup: maplibregl.Popup) => void
  • onclose (popup: maplibregl.Popup) => void

Source: src/lib/Popup.svelte