MapboxNavigationControl

Display navigation controls on the map, including two zoom buttons + - and a compass button to rotate the map.

• Mapbox navigation controls documentation
• Mapbox navigation controls example

Table of contents

• Examples
• Props

Examples

Basic usage

<script setup>
  import { MapboxMap, MapboxNavigationControl } from '@studiometa/vue-mapbox-gl';
</script>

<template>
  <MapboxMap
    style="height: 400px"
    :access-token="MAPBOX_API_KEY"
    map-style="mapbox://styles/mapbox/streets-v11">
    <MapboxNavigationControl position="bottom-right" />
  </MapboxMap>
</template>

Props

position

• Type: String
• Default: top-right

The position for the navigation control.

showCompass

• Type: Boolean
• Default: true

Show the compass button with the navigation control.

showZoom

• Type: Boolean
• Default: true

Show the zoom button with the navigation control.

visualizePitch

• Type: Boolean
• Default: false

If true the pitch is visualized by rotating Y-axis of compass.