I used the examples in documentation to create new project. As you can see in the foll

Here is the code: <div class="highlight highlight-text-html-vue notranslate positi

I was wrong !! <a href="https://soal.github.io/vue-mapbox/guide/basemap.html#addin

Zoom issue about vue-mapbox HOT 3 OPEN

soreana commented on June 10, 2024

Zoom issue

from vue-mapbox.

Comments (3)

soreana commented on June 10, 2024

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;
  }
};

from vue-mapbox.

soreana commented on June 10, 2024

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>

from vue-mapbox.

soreana commented on June 10, 2024

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;
  }
};