A minimalist Vue component wrapping Mapbox GL JS or MapLibre GL for dynamic maps.
In the spirit of keeping things light and not reinventing the wheel: this component wraps only what is necessary for dynamic updates. Use the map instance directly otherwise.
v1.0.0^
has been refactored for Vue 3. Use the previousv0.14.11
version for Vue 2 projects.
See the complementary vue-mapbox-feature repo for dynamic geoJSON features.
See the documentation's demo component for a complete example.
Install via yarn
or npm
:
yarn add @benchmark-urbanism/vue-mapbox-map
Import the VueMapboxMap
component:
import VueMapboxMap from '@benchmark-urbanism/vue-mapbox-map'
Once imported, the VueMapboxMap
tag will be available for use:
<VueMapboxMap
:map="mapInstance"
:lng="scene.lng"
:lat="scene.lat"
:zoom="scene.zoom"
:pitch="scene.pitch"
:bearing="scene.bearing"
></VueMapboxMap>
A mapbox-gl
or maplibre-gl
instance must be provided: these should be installed and instanced in accordance with standard procedures. Reactive data can be used to update the lng
, lat
, zoom
, pitch
, and bearing
dynamically from the data context of the component:
// use reactive data for updating the map
const scene = reactive({
lng: -73.982,
lat: 40.768,
zoom: 13,
pitch: 20,
bearing: 0,
})
// setup mapbox
mapboxgl.accessToken = aToken
onMounted(() => {
mapInstance = new mapboxgl.Map({
container: 'map-container',
style: 'mapbox://styles/mapbox/light-v9',
center: [scene.lng, scene.lat],
zoom: scene.zoom,
pitch: scene.pitch,
interactive: false,
})
})
The component's props / API is as follows:
// a mapbox or maplibre instance
map: {
type: Object,
default: () => {},
},
// whether to jump, ease, or fly for transitions
transitionMode: {
type: String,
required: false,
default: 'jump',
validator: function (value) {
return ['jump', 'ease', 'fly'].indexOf(value) !== -1
},
},
// longitude (dynamic)
lng: {
type: [Number, String],
required: true,
},
// latitude (dynamic)
lat: {
type: [Number, String],
required: true,
},
// zoom (dynamic)
zoom: {
type: [Number, String],
default: 13,
},
// pitch (dynamic)
pitch: {
type: [Number, String],
default: 60,
},
// bearing (dynamic)
bearing: {
type: [Number, String],
default: 0,
},
// around (dynamic)
around: {
type: Array,
default: null,
validator: function (value) {
return value.length === 2
},
},