Layers and sources

Geographic features on the map draws as layers. Every layer must have a source which contains data for layer (for exmaple, GeoJSON object). You can read more about sources in Mapbox GL JS documentation.

Vue-mapbox exposes layers as Vue components and source passed to layer as prop. There is several layers types for drawning different types of sources. For example adding a layer with GeoJSON data:

<template>
  <mgl-map
    :accessToken="accessToken"
    :mapStyle.sync="mapStyle"
  >
    <mgl-navigation-control position="top-right"/> <!-- Adding navigation control-->
    <mgl-geojson-layer
      type="fill"
      :sourceId="geoJsonSource.properties.id"
      :layerId="geoJsonSource.properties.id"
      :source.sync="geoJsonSource"
    >
    </mgl-geojson-layer>

  </mgl-map>
</template>
import {
  MglMap,
  MglNavigationControl,
  MglGeojsonLayer
} from 'vue-mapbox'

export default {
  components: {
    MglMap,
    MglNavigationControl,
    MglGeolocateControl,
    MglGeojsonLayer
  },
  data() {
    return {
      accessToken: 'some_token',
      mapStyle: 'style_object',
      geoJsonSource: {
        //...some GeoJSON object
      }
    }
  }
}

In this example geoJsonSource can be an object, representing GeoJSON feature or string with URL to GeoJSON.

Sources are stored in Mapbox GL JS Map object by sourceId. If you sure that source already added to map, you can skip source prop and just pass sourceId and use same source for different layers. If you try to add same source twice it raises an error, but you can set replaceSource prop to true to just replace old source with new one passed in source prop.

By default when Layer components destroing, it removes source from map. If you want to keep source in Map (for e.g. for future using or if other layers use this source), set clearSource prop to false.