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;
}
}
The map loads fine but nothing fires from @load
console