A Vue.js component for Mapbox GL JS

by Vue.js Examples

Mapbox GL JS Vue.js

A Vue.js Mapbox component.

Installation

NPM

npm install mapbox-gl-vue --save

Setup

This package does not include the Mapbox GL JS and CSS files. They need to be included in the <head> of your HTML file. See Mapbox GL quickstart guide here: https://www.mapbox.com/mapbox-gl-js/api/

If you decide to pull in Mapbox Gl via npm and use a module bundler you need to require it globally from your main js file like this: window.mapboxgl = require('mapbox-gl');

In your main js file:

import Mapbox from 'mapbox-gl-vue';
const app = new Vue({
    el: '#app',
    components: {
        'mapbox': Mapbox
    },
]);

In your HTML file:

<!-- #app -->
<div id="app">
	<mapbox></mapbox>
</div>

Vueify

If you are using Vueify in your build script the Mapbox component can be included as follows:

Vue.component('mapbox', require('mapbox-gl-vue/src/components/Mapbox.vue'));
const app = new Vue({
    el: '#app'
]);

CSS

CSS needs to be added for the map to show up. The #map container needs a height and a width. Example:

#map {
	width: 100%;
	height: 500px;
}

GitHub