Adding a basic geojson layer

I am having some confusion about the layer prop and how it ties into the component. I have a test geojson feature but I can’t get it to add to the map.

    <MglGeojsonLayer
      sourceId="mySourceId"
      :source="geoJsonSource"
      layerId="myLayerId"
      :layer="geoJsonlayer"
    />

geoJsonSource: {
  type: "Feature",
  geometry: {
    type: "Point",
    coordinates: [125.6, 10.1]
  },
  properties: {
    name: "Dinagat Islands"
  }
},
geoJsonlayer: {
  type: "circle",
  paint: {
    "circle-color": "#00ffff"
  }
},

[cberthiaume]

@gorbypark, I was having similar issues getting my map to render features. I forked your codepen and got it working here. I made two changes.

First, I changed the structure of geoJsonSource to match what @Blimk described.

Second, I modified line 5 of App.vue to read, :sourceId="geoJsonSource.data.id". This matches the location of the id in geoJsonSource. I believe there is a bug in the documentation here in the adding layers section. It indicates that the sourceId will be in :sourceId="geoJsonSource.id" which I think is incorrect.

It’d be really nice to have some working examples in the documentation. The codepen here might serve as a starting point.

[Blimk]

Hello gorbypark, The type for object geoJsonSource must be geojson

geoJsonSource: { 'type': 'geojson', 'data': { 'id': 'test', 'type': 'Feature', 'properties': {}, 'geometry': { 'type': 'LineString', 'coordinates': [ [-122.48369693756104, 37.83381888486939],

Here is the extract of the source code in vue-mapbox.umd.min.js :

var t = s({ type: "geojson" }, this.source); try { this.map.addSource(this.sourceId, t);