map.fly to about vue-mapbox-gl

[phegman]

You can get the map object on load, save it to the data object and then use the flyTo method. Check out the below example of a .vue file, it should give you a starting point. It is based off of this example https://www.mapbox.com/mapbox-gl-js/example/flyto/

<template>
  <div id="app">
    <mapbox 
    access-token="your access token"
    :map-options="{
      container: 'map',
      style: 'mapbox://styles/mapbox/streets-v9',
      center: [-74.50, 40],
      zoom: 9
    }"
    @map-load="mapLoaded"
    >
    </mapbox>

    <button class="fly" @click="flyTo">Fly To</button>
  </div>
</template>

<script>
import Mapbox from 'mapbox-gl-vue';
export default {
  name: 'app',
  components: {
      'mapbox': Mapbox
  },
  data () {
    return {
      map: {}
    }
  },
  methods: {
    mapLoaded(map) {
      this.map = map;
    },
    flyTo() {
      this.map.flyTo({
        center: [
            -74.50 + (Math.random() - 0.5) * 10,
            40 + (Math.random() - 0.5) * 10]
      });
    }
  }
}
</script>

<style lang="scss">
  #map {
    width: 100%;
    height: 500px;
  }
</style>

[Durban-Designer]

Thanks so much! You are a lifesaver.

[felimartina]

This doesn't seem to be working for me. Map breaks as soon as I zoom in or out. Problem goes away if I remove the line

this.map = map

any idea what might be going on?

[felimartina]

I was able to work around this by storing a reference to the map outside of vue 'data' object (aka global variable)

Code looks like this:

<template>
  <div>
    <mapbox
    @map-load="onMapLoaded"
    :accessToken="mapboxToken"
    :map-options="mapOptions"></mapbox>
    <!-- Can't bind options to a Vue DataObject because it breaks mapbox -->
  </div>
</template>

<script>
import Mapbox from "mapbox-gl-vue";
import Constants from "@/services/constants";
import Geolocation from "@/services/geolocation";

/**
 *  We have to keep the map reference outside vue 'data' object
 *  otherwise the mapbox styles break 
 */
let mapRef = {} // <--- HERE
export default {
  name: "Map",
  components: {
    Mapbox
  },
  data: function() {
    return {
      mapboxToken: process.env.VUE_APP_MAPBOX_TOKEN,
      mapOptions: {
        container: 'map',
        style: Constants.Map.Defaults.Style, //'mapbox://styles/mapbox/streets-v9',
        center: [
          Constants.Map.Defaults.Longitude,
          Constants.Map.Defaults.Latitude
        ],
        zoom: Constants.Map.Defaults.Zoom
      },
    };
  },
  methods: {
    onMapLoaded: async function(map) {
      this.$emit("mapLoaded");
      mapRef = map;
      await this.centerAtUserLocation(map);
    },
    centerAtUserLocation: async function(map) {
      try {
        const pos = await Geolocation.getCurrentPosition();
        mapRef.flyTo({
          center: [pos.coords.longitude, pos.coords.latitude],
          zoom: 13
        });
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>

[imfunniee]

bro ty @felimartina