Map Controls

You can add map controls 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
  }"
>
    <MapboxGeolocateControl />
    <MapboxFullscreenControl />
</MapboxMap>

You can configure the position of controls with the position prop.

<MapboxGeolocateControl position="left" />

Geocoder

You can access the geocoder result with a simple v-model

<MapboxGeocoder v-model="geocoderResult" />

You can access all the geocoder events directly from the component as well

<MapboxGeocoder @result="(result) => { console.log(result) }" />

You can also access the geocoder object directly from the geocoder components ref

<template>
<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
  }"
>
    <MapboxGeocoder ref="geocoderRef" />
</MapboxMap>
</template>
<script setup lang='ts'>
    const geocoderRef = ref<InstanceType<typeof MapboxGeocoder>>();
    const geocoder = computed(() => geocoderRef.value?.geocoder);
</script>

Custom Controls

You can make your own control with the defineMapboxControl composable.

Example:

    useMapbox(mapID, (map) => {
        if (htmlRef.value) {
            const control = defineMapboxControl((_map) => {
                return htmlRef.value as HTMLElement;
            }, (map) => {})
            map.addControl(control);
        }
    })
Edit this page on GitHub
Table of Contents