Skip to content

MapboxMap

Root component, it is required to have a working map. This component is based on the Map class of Mapbox GL, all props are mapped to the options passed to the class constructor.

It is recommended to have a look at their API reference on the subject.

Table of contents

Examples

Basic usage

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

  const mapCenter = ref([0, 0]);
</script>

<template>
  <MapboxMap
    style="height: 400px"
    access-token="..."
    map-style="mapbox://styles/mapbox/streets-v11"
    :center="mapCenter"
    :zoom="1" />
</template>

Accessing the Mapbox instance

You will probably need to use the Mapbox instance to use some of its methods such as flyTo, panTo, etc. The MapboxMap component emits an mb-ready event right after the Mapbox instantiation, with the Mapbox instance of Map as a parameter. See the example below:

vue
<template>
  <MapboxMap
    access-token="..."
    map-style="..."
    @mb-created="(mapInstance) => map = mapInstance" />
</template>

<script>
  import 'mapbox-gl/dist/mapbox-gl.css';
  import MapboxMap from '@studiometa/vue-mapbox-map/dist/components/MapboxMap';

  export default {
    components: {
      MapboxMap,
    },
    data() {
      return {
        map: null,
      };
    },
  },
</script>

Props

accessToken

  • Type String
  • Required true

Your Mapbox access token.

mapStyle

  • Type [ String, Object ]
  • Required true

A map style definition, can be a JSON object following the Mapbox Style specification of an URL to such a JSON. This prop is mapped to the options.style configuration of the map creation.

container

  • Type [ HTMLElement, String ]
  • Default undefined

minZoom

  • Type Number
  • Default 0

maxZoom

  • Type Number
  • Default 22

minPitch

  • Type: Number
  • Default: 0

maxPitch

  • Type: Number
  • Default: 60

hash

  • Type Boolean
  • Default false

interactive

  • Type Boolean
  • Default true

bearingSnap

  • Type Number
  • Default 7

pitchWithRotate

  • Type Boolean
  • Default true

clickTolerance

  • Type Number
  • Default 3

attributionControl

  • Type Boolean
  • Default true

customAttribution

  • Type [ String, Array ]
  • Default null

logoPosition

  • Type String
  • Default 'bottom-left'

failIfMajorPerformanceCaveat

  • Type Boolean
  • Default false

preserveDrawingBuffer

  • Type Boolean
  • Default false

antialias

  • Type Boolean
  • Default false

refreshExpiredTiles

  • Type Boolean
  • Default true

maxBounds

  • Type [ LngLatBounds, Array ]
  • Default undefined

scrollZoom

  • Type [ Boolean, Object ]
  • Default true

boxZoom

  • Type Boolean
  • Default true

dragRotate

  • Type Boolean
  • Default true

dragPan

  • Type [ Boolean, Object ]
  • Default true

keyboard

  • Type Boolean
  • Default true

doubleClickZoom

  • Type Boolean
  • Default true

touchZoomRotate

  • Type [ Boolean, Object ]
  • Default true

trackResize

  • Type Boolean
  • Default true

center

  • Type [ LngLat, Array, Object ]
  • Default () => [ 0, 0 ]

zoom

  • Type Number
  • Default 0

bearing

  • Type Number
  • Default 0

pitch

  • Type Number
  • Default 0

bounds

  • Type [ LngLatBounds, Array ]
  • Default undefined

fitBoundsOptions

  • Type Object
  • Default null

renderWorldCopies

  • Type Boolean
  • Default true

maxTileCacheSize

  • Type Number
  • Default null

localIdeographFontFamily

  • Type String
  • Default 'sans-serif'

transformRequest

  • Type Function
  • Default null

collectResourceTiming

  • Type Boolean
  • Default false

fadeDuration

  • Type Number
  • Default 300

crossSourceCollisions

  • Type Boolean
  • Default true

cooperativeGestures

  • Type: Boolean
  • Default: false

language

  • Type: ["auto", String, Array]
  • Default: null

locale

  • Type: Object
  • Default: null

localFontFamily

  • Type: String
  • Default: false

minTileCacheSize

  • Type: Number
  • Default: null

optimizeForTerrain

  • Type: Boolean
  • Default: true

WARNING

The optimizeForTerrain prop will only work with mapbox-gl@2, as it has been removed in v3.0.0 of the package (see release notes).

performanceMetricsCollection

  • Type: Boolean
  • Default: true

projection

  • Type: ProjectionSpecification
  • Default: 'mercator'

style

  • Type: [Object, String]

testMode

  • Type: Boolean
  • Default: false

touchPitch

  • Type: [Boolean, Object]
  • Default: true

useWebGL2

  • Type: Boolean
  • Default: false

worldview

  • Type: String
  • Default: null

Events

mb-created

Emitted when the Mapbox instance has been created.

Params

  • map (Map): the Mapbox map instance

Other events

In addition to the mb-created event, all events available on the Mapbox Map class are also available on the MapboxMap component, prefixed by mb-.

  • resizemb-resize
  • clickmb-click
  • ...

See the API Reference on the subject for more detailed information about each event.

Slots

default

The default slot must contain all other components as the mapbox-gl instance is provided by this component to be injected in all its children.

See the documentation on provide / inject for more informations.

loader

This slot is displayed while the map is loading.

Released under the GPL 3.0 License.