Accessing The Map

Events

All Map events are accessible directly through the component (With full Typescript support!)

View a list of events in the Mapbox Docs

Example:

    <MapboxMap
      ...
      @load="exampleFunction"
      @click="exampleFunction"
      @resize="exampleFunction"
    >

You can access events directly on layers as well

Example:

    <MapboxLayer
      ...
      @click="exampleFunction"
    >

Composables

useMapbox

The simplest way to access the map instance on setup is with the useMapbox composable. You must provide the map id.

The map instance will not be available until the page is fully loaded, so you must access it through a callback.

<script setup>
    useMapbox(mapId, (map) => {
      // Do whatever with map here
    })
</script>

If you want to access the map before it has loaded, there is the useMapboxBeforeLoad composable instead.

useMapbox should be preferred over useMapboxBeforeLoad with map.on('load') to ensure that your code gets run on reactive updates while the map is already loaded.

Refs

When working with the map reactively (for example, in a watcher or computed method), you should instead use the map ref. The refs should be treated similar to Vue template refs.

  const mapRef = useMapboxRef(mapId);

  const mapStyle = computed(() => {
    return mapRef.value?.getStyle();
  });

  watch([lng, lat], () => {
    mapRef.value?.flyTo({
        center: [lng.value, lat.value],
        zoom: 16,
        speed: 4,
    });
  });