Popup

Props

showed

  • Type: Boolean
  • non-synced
  • Description: If true, the popup showes immediately after the component is mounted.

closeButton

  • Type: Boolean
  • Description: If true, a close button will appear in the top right corner of the popup.
  • See: closeButton in Popupopen in new window

closeOnClick

  • Type: Boolean
  • Description: If true, the popup will closed when the map is clicked.
  • See: closeOnClick in Popupopen in new window

closeOnMove

  • Type: Boolean
  • Description: If true, the popup will closed when the map moves.
  • See: closeOnMove in Popupopen in new window

focusAfterOpen

  • Type: Boolean
  • Description: If true, the popup will try to focus the first focusable element inside the popup.
  • See: closeOnClick in Popupopen in new window

anchor

  • Type: String
  • Description: A string indicating the part of the Popup that should be positioned closest to the Popup location. Options are 'top' , 'bottom' , 'left' , 'right' , 'top-left' , 'top-right' , 'bottom-left' , and 'bottom-right' . If unset the anchor will be dynamically set to ensure the popup falls within the map container with a preference for 'bottom'.
  • See: anchor in Popupopen in new window

offset

  • Type: Number | Object | Array

  • Description: A pixel offset applied to the popup's location.

    • a single number specifying a distance from the popup's location
    • a PointLike specifying a constant offset
    • an object of Points specifing an offset for each anchor position Negative offsets indicate left and up.
  • See: offset in Popupopen in new window

coordinates

  • Type: Array
  • Description: Popup coordinates in format [longitude, latitude]
  • See: setLngLat() in Popupopen in new window

onlyText

  • Type: Boolean
  • Description: If true content of the Popup treated as plain text
  • See: setText in Popupopen in new window

maxWidth

  • Type: String
  • Description: A string representing the value for the maximum width. (ex: '400px')
  • See: maxWidth in Popupopen in new window

className

  • Type: String
  • Description: Space-separated CSS class names to add to popup container
  • See: className in Popupopen in new window

Slots

default

  • Description: Slot for Popup content. Can be plain text, HTML or Vue component. If onlyText set to true content in this slot treated as plaint text.

Events

@added

  • Description: Fires when popup added on the map.
  • Payload { popup: Popup } Object with MapboxGL Popup object

@removed

  • Description: Fires when popup removed from the map.
  • Payload { popup: Popup } Object with MapboxGL Popup object

@open

  • Description: Fires when popup is opened manually or programatically.
  • Payload { popup: Popup } Object with MapboxGL Popup object

@close

  • Description: Fires when popup is closed manually or programatically.
  • Payload { popup: Popup } Object with MapboxGL Popup object