home	heroImage	actionText	actionLink	features	footer
true	/logo.svg	Get Started →	/guide/	title details Declarative style You can use map elements like layers, markers, popups as Vue components and control them via synchronized props title details Vuefied Map elements declared as components respect Vue lifecycle, emit map events like Vue events and can be used in OOP-style title details Promisified async actions You can do async map operations and get results in Promise without messing with map events and figuring out what action cause it	MIT Licensed

If you like a long story, check out blog post

<template>
  <MglMap
    container="map-test"
    :center.sync="center"
    :accessToken="accessToken"
    :mapStyle="mapStyle"
  >
    <MglMarker :coordinates.sync="markerCoordinates" color="green" />
    <MglGeojsonLayer
      type="fill"
      :sourceId="sourceId"
      :layerId="layerId"
      :source="geojson"
      @click="handleClick"
    />
  </MglMap>
</template>

<script>
import { MglMap, MglMarker, MglGeojsonLayer } from "vue-mapbox";

export default {
  name: "App",
  data() {
    return {
      accessToken: "some_token",
      mapStyle: "mapbox://map_style",
      geojson: {
        /* … some geojson */
      },
      layerId: "firstLayer",
      sourceId: "firstSource",
      markerCoordinates: [50, 50],
      center: [50, 50]
    };
  },
  methods: {
    handleClick: function() {
      console.log("clicked");
    }
  }
};
</script>

::: tip Dependencies Vue.js 2.5+
Mapbox GL JS 0.51+
map-promisified :::

::: tip Size ~ 15 kB minified and gzipped :::

::: warning Browser compatibility Coming soon :::