Unspected behaviour on @map-load about vue-mapbox-gl

[jpsc]

@phegman thank you for the the answer. It helped changing to map-init. I still think that it is odd that the load has that behavior.

Regarding the id that makes sense, but I just thought that mapbox would be transformed into the #map container. Why element with the id created is not created by the ?

Thanks!

[phegman]

The div with an ID of map is created by the Mapbox component so there is no need to wrap the component in a div with an ID of map.

[phegman]

Hi João,

That is very weird, I will have to dig deeper into this to find out why this would happen. I played around with it and discovered if you use the @map-init event to set the map object then the bug is no longer there.

I also noticed you are wrapping the mapbox component in a div with an ID of map. The mapbox component by default gets rendered with an ID of map so this would cause a duplicate ID. You can pass a custom container ID to the mapbox component through the options prop.

See below example for bug fix and passing custom container

<template>
  <div id="map" class="map">
    <mapbox 
        access-token=""
        :map-options="{
            style: 'mapbox://styles/mapbox/streets-v9',
            center: [-96, 37.8],
            zoom: 9,
            container: 'map2'
          }"
          @map-init="mapInitialized"
        >
      </mapbox>
      <button @click="flyTo">Center</button>
    </div>
</template>

<script>
  import Mapbox from 'mapbox-gl-vue';

  export default {
    data() {
      return {
        map: {}
      }
    },
    components: { Mapbox },
    methods: {
      mapInitialized(map) {
        this.map = map
      },
      flyTo () {
        this.map.flyTo({
          center: [4.498558399999999, 51.9220879]
        })
      }
    }
  }
</script>

Hope that is helpful!