Need help with vue-mapbox-gl?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

phegman
250 Stars 31 Forks GNU General Public License v3.0 85 Commits 17 Opened issues

Description

A Vue.js component for Mapbox GL JS

Services available

!
?

Need anything else?

Contributors list

# 487,427
HTML
vue2
vuejs2
CSS
1 commit
# 123,806
HTML
Markdow...
earth-o...
arcgis
1 commit
# 428,101
C++
Shell
PHP
mapbox-...
1 commit
# 548,558
wdl
HTML
Shell
executo...
1 commit
# 74,626
Go
vue-cli
vue-cli...
css-tra...
1 commit

Mapbox GL JS Vue.js

A simple lightweight (9kb/3kb gzipped) Mapbox GL JS Vue component.

Demo

Installation

Yarn

yarn add mapbox-gl-vue

NPM

npm install mapbox-gl-vue --save

Vue CDN

Download latest

vue-mapbox-gl.min.js
from https://github.com/phegman/vue-mapbox-gl/releases

Include using a

 tag

Including Mapbox GL JS

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
const webpack = require('webpack')

plugins: [ new webpack.ProvidePlugin({ mapboxgl: 'mapbox-gl', }), ]

Projects setup with Vue CLI 3:

vue.config.js
const webpack = require('webpack')

module.exports = { configureWebpack: { plugins: [ new webpack.ProvidePlugin({ mapboxgl: 'mapbox-gl', }), ], }, }

Setup

In the file you will be including the component:

In your template block:


CSS

CSS needs to be added for the map to show up. The

#map
container needs a height and a width. Example:

Props

Vue.js Documentation https://vuejs.org/v2/guide/components.html#Props

access-token

Type:
string

Required:
true

Your access token is required for Mapbox to work. It can be obtained in the Mapbox Studio dashboard


map-options

Type: MapboxOptions
Required:
true

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

Type: NavigationControlOptions
Required:
false

Default:
{ show: true, position: 'top-right' }

More information about navigation control here: https://docs.mapbox.com/mapbox-gl-js/api/#navigationcontrol


geolocate-control

Type: GeolocateControlOptions
Required:
false

Default:
{ show: false, position: 'top-left', options: {} }

More information about geolocate control here: https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol


scale-control

Type: ScaleControlOptions
Required:
false

Default:
{ show: false, position: 'top-left', options: {} }

More information about scale control here: https://docs.mapbox.com/mapbox-gl-js/api/#scalecontrol


fullscreen-control

Type: FullscreenControlOptions
Required:
false

Default:
{ show: false, position: 'top-right' }

More information about full screen control here: https://docs.mapbox.com/mapbox-gl-js/api/#fullscreencontrol


attribution-control

Type: AttributionControlOptions
Required:
false

Default:
{ show: false, position: 'top-right' }

More information about full screen control here: https://docs.mapbox.com/mapbox-gl-js/api/#attributioncontrol

Example


Map Events

@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

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


Plugins

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:


Popups

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


PopupContent.vue

Development

Install dependencies

yarn install

Start development server

This will start a dev server with HMR at

localhost:8080
.
ACCESS_TOKEN=yourAccessToken yarn dev

Linting

Please make sure all your code passes linting before opening a PR.

yarn lint

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.