MapboxPopup

Display a popup on the map.

• Mapbox popup documentation
• Mapbox popup example

Table of contents

• Examples
• Props
• Events
• Slots

Examples

Basic usage

<script setup>
  import { MapboxMap, MapboxPopup } from '@studiometa/vue-mapbox-gl';
</script>

<template>
  <MapboxMap
    style="margin-top: 1em; height: 400px"
    :access-token="MAPBOX_API_KEY"
    map-style="mapbox://styles/mapbox/streets-v11">
    <MapboxPopup :lng-lat="[10, 10]">
      <p>Hello world !</p>
    </MapboxPopup>
  </MapboxMap>
</template>

Props

lngLat

• Type [ LngLat, Array, Object ]
• Required true

Center position for the popup.

closeButton

• Type [ Boolean ]
• Required false
• default true

Display a close button on the popup.

closeOnClick

• Type [ Boolean ]
• Required false
• default true

Close the popup on close button click.

closeOnMove

• Type [ Boolean ]
• Required false
• default false

Close the popup when the map moves.

anchor

• Type [ String ]
• Required false

A string indicating the part of the Popup that should be positioned closest to its coordinate. See the mapbox-gl documentation for more details..

offset

• Type [ Number, Point, Array, Object ]
• Required false
• default null

Offset the popup from it's original lngLat position.

className

• Type [ String ]
• Required false
• default null

Add a className to the popup.

maxWidth

• Type [ String ]
• Required false
• default 240px

Set a max-width to the popup.

renderless

• Type [ Boolean ]
• Required false
• default false

Do not add the popup to the map on creation.

Events

mb-open

Emitted when the popup is opened manually or programatically.

Params

• popup: the object that was opened
• event: the Mapbox event object sent by the layer

mb-close

Emitted when the popup is closed manually or programatically.

Params

• popup: the object that was closed
• event: the Mapbox event object sent by the layer

Slots

default

The default slot will be rendered inside the popup.