Using mapbox-gl-js 2.8.2
To setup the map I have to fetch data from an api. Given that, I have to init mapbox in the then and, since I need the map object in my vue component, I have to init Vue in the then too.
But since I do that, every time I call a function on the map object (i.e. map.setFilter()), I have TypeError: map.setFilter is not a function.
The code looks like this :
<head>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js"></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css' rel='stylesheet'/>
</head>
<body>
<div id="map"></div>
<app :map="this.map"></app>
<script>
Vue.component('app',{
props:['map'],
template: `
<div id="app">
<button v-on:click="logFilter"></button>
</div>
`,
data:function(){
return {};
},
methods:{
logFilter:function(){
console.log(this.map.setFilter('land',["any"]))
}
}
}
</script>
<script>
fetch('some/api/url')
.then((res)=> {
res.json()
.then(cityData=>{
mapboxgl.accessToken = 'my_token'
let map = new mapboxgl.Map({
container: 'map',
center: cityData.location,
zoom: cityData.zoom
})
const vue = new Vue({
el : 'app',
data:{
map : map,
}
});
});
});
</script>
</body>
When the button is clicked, the console will show the error TypeError: map.getStyle is not a function.
This issue has occured since I make the vue declaration in the then so I guess it's an issue with vue and async functions but I can't find anything about that online.