@load not firing

[johnl6234]

The map loads fine but nothing fires from @load

console

util.js:538 The map container element should be empty, otherwise the map's interactivity will be negatively impacted. If you want to display a message when WebGL is not supported, use the Mapbox GL Supported plugin instead.

<template>
    <main class="map-container">
        <VMap class="w-full h-full" :options="state.map" @load="onMapLoaded" />
    </main>
</template>

<script>
import { VMap, } from "v-mapbox";
import mapbox from "mapbox-gl";
import { reactive } from "vue";

export default {
    components: {
        VMap,
    },
    props: {
        workout: Object,
        startPos: Array
    },
    setup(props) {
        const state = reactive({
            map: {
                accessToken:  import.meta.env.VITE_MAPBOX_ACCESS_TOKEN,
                style: "mapbox://styles/mapbox/streets-v11?optimize=true",
                // style: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json",
                center: props.startPos,
                zoom: 15,
                maxZoom: 22,
                crossSourceCollisions: false,
                failIfMajorPerformanceCaveat: false,
                attributionControl: false,
                preserveDrawingBuffer: true,
                hash: false,
                minPitch: 0,
                maxPitch: 60,
            }
        });

        return {
            state,
        };
    },
    methods: {
        onMapLoaded(event) {
            console.log(' event', event)
        }
    },
    created() {
        // We need to set mapbox-gl library here in order to use it in template
        this.mapbox = mapbox;
    }
}

[oripka]

I'm having the same issue.

[vinayakkulkarni]

Can you do a repro ?

[mrc-bsllt]

Same issue me!

[mrc-bsllt]

Can you do a repro ?

this is a repro: https://stackblitz.com/edit/nuxt-starter-lig9bb?file=app.vue

[Buk1m]

Docs seems to be totally outdated, use @loaded event instead.

  VMap(
    :options="{accessToken: 'your-token', style: 'mapbox://styles/mapbox/streets-v11' }"
    @loaded="onMapLoaded"
  )

onMapLoaded(event) {
  this.map = event
}

[PeterEsenwa]

@Buk1m, yep, outdated docs. Not just this issue but many other little things I had to figure out myself 🥲