Map controls

Overview

Controls are UI elements for controlling the view of the map, such as scale or bearing. You can check them out in Mapbox GL JS documentation In v-mapbox they exposed as Vue components, so you can control their properties and behavior dynamically by changing props.

All controls:

<template>
  <div id="#app">
    <VMap
      :accessToken="accessToken"
      :mapStyle.sync="mapStyle"
      :attributionControl="false"
    >
      <MglAttributionControl />
      <MglNavigationControl position="top-right" />
      <MglGeolocateControl position="top-right" />
      <MglNavigationControl position="top-right" />
      <MglGeolocateControl position="top-right" />
      <MglScaleControl />
    </VMap>
  </div>
</template>

<script>
import {
  VMap,
  MglAttributionControl,
  MglNavigationControl,
  MglGeolocateControl,
  MglFullscreenControl,
  MglScaleControl
} from "v-mapbox";

export default {
  components: {
    VMap,
    MglNavigationControl,
    MglGeolocateControl
  },
  data() {
    return {
      accessToken: "some_token",
      mapStyle: "style_object"
    };
  }
};
</script>

See list of controls and they properties in API docs.

Attribution control

Due to Mapbox policy attribution control is enabled by default. You can disable default attributions by setting attributionControl prop of VMap to false and set your own attribution using AttributionControl component.