Mapbox GL JS Component For Vue.js

Install & Download:

# Yarn
$ yarn add mapbox-gl-vue
# NPM
$ npm i mapbox-gl-vue

Description:

A lightweight Mapbox GL JS component that helps developers render interactive maps in Vue applications.

Basic usage:

1. Import and register the component.

import Mapbox from 'mapbox-gl-vue';

export default {
  components: { Mapbox },
}

2. Add the component to the template, insert your own API key, and pass Mapbox GL JS options as follows:

<mapbox
  access-token="your access token"
  :map-options="{
    // map options here
  }"
/>

Preview: