Base map

Adding map component

For using maps with Mapbox GL JS you need a map style. See details in Mapbox GL JS documentation.
For using Mapbox-hosted maps, you need to set access_token. See details in Mapbox documentation.
If you using self-hosting maps on your own server you can omit this parameter.

<template>
<mgl-map
    :accessToken="accessToken"
    :mapStyle.sync="mapStyle"
/>
</template>

<script>
import { MglMap } from 'vue-mapbox'

export default {
  components: {
    MglMap
  },
  data() {
    return {
      accessToken: ACCESS_TOKEN, // your access token. Needed if you using Mapbox maps
      mapStyle: MAP_STYLE, // your map style
    }
  }
}
</script>

Interact with map properties as GlMap props

You can control map parameters like zoom, bearing, pitch etc. by changing props. If you set .sync modifier (Vue docs) to prop, it will updates when you use operations that takes time to proceed. For example, if you use flyTo method, props zoom, center, bearing, pitch will be updated when animation ends. Full list of props see in API docs, note field 'Synced' in description

Map methods

You can use methods of GlMap component to control map. Mostly these methods are wrappers around methods of Map object from Mapbox GL JS, but processes corresponding events, that map generates and returns Promise with all changed data when all operations ends. For example GlMap.flyTo method returns Promise that resolves with object, contained changed bearing, zoom, center and pitch values.

Method .stop()

Method .stop() just stops all animations on map, updates props with new positions and return Promise with map parameters in the moment when stop() called.
See full list of methods on API page.