A Vue.js component for Mapbox GL js
npm install mapbox-gl-vueA simple lightweight (9kb/3kb gzipped) Mapbox GL JS Vue component. Great for quick prototyping or smaller projects. For larger projects VueMapbox may be a better fit.
- Installation
- Setup
- Props
- Events
- Plugins
- Popups
- Development
``bash`
yarn add mapbox-gl-vue
`bash`
npm install mapbox-gl-vue --save
Download latest vue-mapbox-gl.min.js from https://github.com/phegman/vue-mapbox-gl/releases
Include using a
`
This package does not include the Mapbox GL JS and CSS files. See Mapbox GL JS installation guide here: https://www.mapbox.com/install/js/
#### Importing Mapbox GL JS with Webpack
If you decide to include Mapbox GL JS by installing it with Yarn/NPM you should use Shimming for it to work correctly.
webpack.config.js
`js
const webpack = require('webpack')
plugins: [
new webpack.ProvidePlugin({
mapboxgl: 'mapbox-gl',
}),
]
`
Projects setup with Vue CLI 3:
vue.config.js
`js
const webpack = require('webpack')
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
mapboxgl: 'mapbox-gl',
}),
],
},
}
`
In the file you will be including the component:
`vue`
In your template block:
`vue`
:map-options="{
style: 'mapbox://styles/mapbox/light-v9',
center: [-96, 37.8],
zoom: 3,
}"
/>
#### CSS
CSS needs to be added for the map to show up. The #map container needs a height and a width. Example:
`vue`
Vue.js Documentation https://vuejs.org/v2/guide/components.html#Props
access-token string
Type: true
Required:
Your access token is required for Mapbox to work. It can be obtained in the Mapbox Studio dashboard
---
map-options true
Type: MapboxOptions
Required:
Overview of available Mapbox options can be found here: https://www.mapbox.com/mapbox-gl-js/api/#map
container will default to map (giving the container an id of map). If you want to change this or use multiple map components on the same page simply set the container property.
---
nav-control false
Type: NavigationControlOptions
Required: { show: true, position: 'top-right' }
Default:
More information about navigation control here: https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol
---
geolocate-control false
Type: GeolocateControlOptions
Required: { show: false, position: 'top-left', options: {} }
Default:
More information about geolocate control here: https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol
---
scale-control false
Type: ScaleControlOptions
Required: { show: false, position: 'top-left', options: {} }
Default:
More information about scale control here: https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol
---
fullscreen-control false
Type: FullscreenControlOptions
Required: { show: false, position: 'top-right' }
Default:
More information about full screen control here: https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol
---
attribution-control false
Type: AttributionControlOptions
Required: { show: false, position: 'top-right' }
Default:
More information about full screen control here: https://docs.mapbox.com/mapbox-gl-js/api/#attributioncontrol
#### Example
`vue`
:map-options="{
style: 'mapbox://styles/mapbox/light-v9',
center: [-96, 37.8],
zoom: 3,
}"
:geolocate-control="{
show: true,
position: 'top-left',
}"
:scale-control="{
show: true,
position: 'top-left',
}"
:fullscreen-control="{
show: true,
position: 'top-left',
}"
/>
@map-init : This event is fired when the map is initialized. It can be used to integrate plugins.
All Mapbox GL JS events are available for use. List of events here: https://docs.mapbox.com/mapbox-gl-js/api/#map.event:resize
Map events can be used by adding the @map- prefix to the beginning of the Mapbox event name. For example for the click event @map-click can be used. All events are passed the mapboxgl Map instance as the first parameter and, if the event has one, the MapboxEvent as the second parameter.
For events that support specifying a layerId as documented here https://docs.mapbox.com/mapbox-gl-js/api/#map#on the layerId can be specified by using a colon to separate the event from the layerId. For example if you have a layer with an id of points the click event can be registered like so: @map-click:points
Geolocation events are available for use by adding the @geolocate- prefix to the beginning of the Mapbox event name. A list of Geolocation events can be found here: https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol.event:geolocate
#### Example
App.vue
`vue
:map-options="{
style: 'mapbox://styles/mapbox/light-v9',
center: [-96, 37.8],
zoom: 3,
}"
:geolocate-control="{
show: true,
position: 'top-left',
}"
@map-load="loaded"
@map-zoomend="zoomend"
@map-click:points="clicked"
@geolocate-error="geolocateError"
@geolocate-geolocate="geolocate"
/>
`
Plugins (https://www.mapbox.com/mapbox-gl-js/plugins/) can be integrated using the map-init event that is fired when Mapbox is initialized. Below is an example:
`vue
:map-options="{
style: 'mapbox://styles/mapbox/light-v9',
center: [-96, 37.8],
zoom: 3,
}"
:geolocate-control="{
show: true,
position: 'top-left',
}"
:scale-control="{
show: true,
position: 'top-left',
}"
:fullscreen-control="{
show: true,
position: 'top-left',
}"
@map-init="mapInitialized"
/>
`
Popups can be a bit tricky if you are trying to use Vue directives inside the popup content. This is because the popups are added to the DOM by Mapbox and not compiled by Vue. See below for one approach to solving this problem.
App.vue
`vue
:map-options="{
style: 'mapbox://styles/mapbox/light-v9',
center: [-96, 37.8],
zoom: 3,
}"
@map-load="loaded"
@map-click:points="clicked"
@map-mouseenter:points="mouseEntered"
@map-mouseleave:points="mouseLeft"
/>
`
PopupContent.vue
`vue
{{ feature.properties.title }}
`
`bash`
yarn install
This will start a dev server with HMR at localhost:8080.
`bash`
ACCESS_TOKEN=yourAccessToken yarn dev
Please make sure all your code passes linting before opening a PR.
`bash``
yarn lint