Popups & Markers
You can create Markers & Popups by nesting their respective components in your map.
<MapboxMap
map-id="<MAP_ID>"
style="position: absolute; top: 0; bottom: 0; left: 250px; width: 500px;"
:options="{
style: 'mapbox://styles/mapbox/light-v11', // style URL
center: [-68.137343, 45.137451], // starting position
zoom: 5 // starting zoom
}"
>
...
<MapboxDefaultMarker
marker-id="<MARKER_ID>"
:options="{}"
:lnglat="[110, 5]"
>
</MapboxDefaultMarker>
<MapboxDefaultPopup
popup-id="<POPUP_ID>"
:lnglat="[100, 0]"
:options="{
closeOnClick: false
}"
>
<h1 class="test">
Hello World!
</h1>
</MapboxDefaultPopup>
</MapboxMap>
Custom HTML
You can pass custom HTML for popups simply by nesting html inside your popup.
You can also pass custom HTML for markers by using the marker slot:
<MapboxDefaultMarker
marker-id="customHTMLMarker"
:lnglat="[110, 5]"
>
<template #marker>
<h1>Easy Html!</h1>
</template>
</MapboxDefaultMarker>
Linking Popups & Markers
You can have a popup linked to a marker by simply nesting the popup component inside the marker. Example:
<MapboxDefaultMarker
marker-id="marker1"
:options="{}"
:lnglat="[110, 5]"
>
<MapboxDefaultPopup
popup-id="popup1"
:lnglat="[100, 0]"
:options="{
closeOnClick: false
}"
>
<h1 class="test">
Hello World!
</h1>
</MapboxDefaultPopup>
</MapboxDefaultMarker>
Composables
useMapboxMarker & useMapboxPopup
You can access your markers and popups in the same way as useMapbox with useMapboxMarker & useMapboxPopup!
<script setup>
useMapboxMarker(markerID, marker => {
// Do whatever with marker
});
useMapboxPopup(popupID, popup => {
// Do whatever with popup
});
</script>
Refs
You can access marker & popup refs just like the map. This should be used when accessing popups or markers reactively (for example, in a watcher or computed method).
It is important to remember that the refs will be undefined until they have been initialized, which will be after the component is mounted.
const marker = useMapboxMarkerRef(markerID);
const popup = useMapboxPopupRef(popupID);
const markerLatLng = computed(() => {
return marker.value?.getLngLat();
});