[Vuejs]-Setting mapbox-gl marker from click event causes strange artifacts to appear on map in VueJS

by

0👍

So far I have found a way to solve the issue, yet I still do not know exactly why.

I am passing the event object to some other function on click and pulling the map feature from the event object.

If I deep clone the feature in the event object before passing it to my other functions, the artifacts do not appear.

0👍

You need to freeze the map’s instance prior to making any actions to it.
https://github.com/vuejs/vue/issues/2637#issuecomment-331913620

Freeze the object to prevent the map from disorientated and for any actions done to the map, call back the data with an extra Object key which in case is ‘wrapper’. You can replace panMap with any other functions that you want to do with the map

<template><MglMap :accessToken="..." :mapStyle="..." @load="onMapLoaded" /></template>
    
<script>  
methods: {  
 onMapLoaded(event) {
   this.mapboxEvent = Object.freeze({wrapper: event.map});
 },
 panMap(event) {
   this.mapboxEvent.wrapper.panTo([lng, lat], {duration: 1000, zoom: 14});
 }
}
</script>

Reference question:
Mapbox style changes/breaks on zoom when a layer is added

Leave a comment