Zoom issue

[soreana]

I used the examples in documentation to create new project. As you can see in the following gif when I zoom in, my map get corrupted without any exceptions or error in console. Could you please help me debug this strange issue? 😄

Let me know if you need any part of the source code.

[soreana]

Here is the code:

<template>
    <MglMap id="map"
          :accessToken="accessToken"
          :mapStyle="mapStyle"
          :center="center"
          :zoom="zoom"
          @load="onMapLoaded"
          @click="userClick">
</template>

<script>
import Mapbox from "mapbox-gl";
import { MglMap } from "vue-mapbox";

export default {
  components: {
    MglMap
  },
  data() {
    return {
      accessToken: process.env.VUE_APP_MAPBOX_ACCESS_TOKEN, // my access token
      mapStyle: 'mapbox://styles/mapbox/streets-v11',
      center: [4.7500, 52.2900], // starting position
      map: null,
      zoom: 10, // starting zoom
      coordinates: [4.7828,52.2557],
      popupTxt: "",
    };
  },
  methods:{
    onMapLoaded(event) {
      this.map = event.map;
    }
  },
  created() {
    // We need to set mapbox-gl library here in order to use it in template
    this.mapbox = Mapbox;
  }
};

[soreana]

I found the cause and solution. I missed the parentheses in @load="onMapLoaded" as a result onMapLoaded event failed to execute. It should be @load="onMapLoaded()"

<template>
    <MglMap id="map"
...
          @load="onMapLoaded()"
...
</template>

[soreana]

I was wrong !! This documentation is incorrect. Map load documentation has to be something like the following sample. More information is available here.

<template>
    <MglMap id="map"
          :accessToken="accessToken"
          :mapStyle="mapStyle"
          :center="center"
          :zoom="zoom"
          @load="onMapLoaded"
          @click="userClick">
</template>

<script>
import Mapbox from "mapbox-gl";
import { MglMap } from "vue-mapbox";

let map;

export default {
  components: {
    MglMap
  },
  data() {
    return {
      accessToken: process.env.VUE_APP_MAPBOX_ACCESS_TOKEN, // my access token
      mapStyle: 'mapbox://styles/mapbox/streets-v11',
      center: [4.7500, 52.2900], // starting position
      zoom: 10, // starting zoom
      coordinates: [4.7828,52.2557],
      popupTxt: "",
    };
  },
  methods:{
    onMapLoaded(event) {
      map = event.map;
    }
  },
  created() {
    // We need to set mapbox-gl library here in order to use it in template
    this.mapbox = Mapbox;
  }
};