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
.