Example how to add geojson file by url

[iBobik]

What is minimal working example attaching remote geojson file into the map?

Tried this:

      <MglGeojsonLayer
        sourceId="123"
        source="/geojson.json"
        layerId="456"
        :layer="{}"
      />

But it fails with a lot of unclear errors

TypeError: "this._sw is undefined" getWest mapbox-gl.js:29 getNorthWest mapbox-gl.js:29 cameraForBounds mapbox-gl.js:33 fitBounds mapbox-gl.js:33 mapLoaded TripPage.vue:77 VueJS 4 method backend.js:1793 mounted GlMap.vue:105 vue.runtime.esm.js:1888 Error: "sources.123: unknown property "0"" qn mapbox-gl.js:29 Be mapbox-gl.js:33 _validate mapbox-gl.js:33 addSource mapbox-gl.js:33 addSource mapbox-gl.js:33 $_deferredMount GeojsonLayer.js:113 created GeojsonLayer.js:100 VueJS 18 mapbox-gl.js:29 Error: "sources.123: unknown property "1"" qn mapbox-gl.js:29 Be mapbox-gl.js:33 _validate mapbox-gl.js:33 addSource mapbox-gl.js:33 addSource mapbox-gl.js:33 $_deferredMount GeojsonLayer.js:113 created GeojsonLayer.js:100 VueJS 18 mapbox-gl.js:29 Error: "sources.123: unknown property "2"" qn mapbox-gl.js:29 Be mapbox-gl.js:33 _validate mapbox-gl.js:33 addSource mapbox-gl.js:33 addSource mapbox-gl.js:33 $_deferredMount GeojsonLayer.js:113 created GeojsonLayer.js:100 VueJS 18 mapbox-gl.js:29 Error: "sources.123: unknown property "3"" qn mapbox-gl.js:29 Be mapbox-gl.js:33 _validate mapbox-gl.js:33 addSource mapbox-gl.js:33 addSource mapbox-gl.js:33 $_deferredMount GeojsonLayer.js:113 created GeojsonLayer.js:100 VueJS 18 mapbox-gl.js:29 Error: "sources.123: unknown property "4"" qn mapbox-gl.js:29 Be mapbox-gl.js:33 _validate mapbox-gl.js:33 addSource mapbox-gl.js:33 addSource mapbox-gl.js:33 $_deferredMount GeojsonLayer.js:113 created GeojsonLayer.js:100 VueJS 18 mapbox-gl.js:29 Error: "sources.123: unknown property "5"" qn mapbox-gl.js:29 Be mapbox-gl.js:33 _validate mapbox-gl.js:33 addSource mapbox-gl.js:33 addSource mapbox-gl.js:33 $_deferredMount GeojsonLayer.js:113 created GeojsonLayer.js:100 VueJS 18 mapbox-gl.js:29 Error: "sources.123: unknown property "6"" qn mapbox-gl.js:29 Be mapbox-gl.js:33 _validate mapbox-gl.js:33 addSource mapbox-gl.js:33 addSource mapbox-gl.js:33 $_deferredMount GeojsonLayer.js:113 created GeojsonLayer.js:100 VueJS 18 mapbox-gl.js:29 Error: "sources.123: unknown property "7"" qn mapbox-gl.js:29 Be mapbox-gl.js:33 _validate mapbox-gl.js:33 addSource mapbox-gl.js:33 addSource mapbox-gl.js:33 $_deferredMount GeojsonLayer.js:113 created GeojsonLayer.js:100 VueJS 18 mapbox-gl.js:29 Error: "sources.123: unknown property "8"" qn mapbox-gl.js:29 Be mapbox-gl.js:33 _validate mapbox-gl.js:33 addSource mapbox-gl.js:33 addSource mapbox-gl.js:33 $_deferredMount GeojsonLayer.js:113 created GeojsonLayer.js:100 VueJS 18 mapbox-gl.js:29 Error: "sources.123: unknown property "9"" qn mapbox-gl.js:29 Be mapbox-gl.js:33 _validate mapbox-gl.js:33 addSource mapbox-gl.js:33 addSource mapbox-gl.js:33 $_deferredMount GeojsonLayer.js:113 created GeojsonLayer.js:100 VueJS 18 mapbox-gl.js:29 Error: "sources.123: unknown property "10"" qn mapbox-gl.js:29 Be mapbox-gl.js:33 _validate mapbox-gl.js:33 addSource mapbox-gl.js:33 addSource mapbox-gl.js:33 $_deferredMount GeojsonLayer.js:113 created GeojsonLayer.js:100 VueJS 18 mapbox-gl.js:29 Error: "sources.123: unknown property "11"" qn mapbox-gl.js:29 Be mapbox-gl.js:33 _validate mapbox-gl.js:33 addSource mapbox-gl.js:33 addSource mapbox-gl.js:33 $_deferredMount GeojsonLayer.js:113 created GeojsonLayer.js:100 VueJS 18 mapbox-gl.js:29 Error: "sources.123: unknown property "12"" qn mapbox-gl.js:29 Be mapbox-gl.js:33 _validate mapbox-gl.js:33 addSource mapbox-gl.js:33 addSource mapbox-gl.js:33 $_deferredMount GeojsonLayer.js:113 created GeojsonLayer.js:100 VueJS 18 mapbox-gl.js:29 Error: "layers.456: either "type" or "ref" is required" qn mapbox-gl.js:29 Be mapbox-gl.js:33 _validate mapbox-gl.js:33 addLayer mapbox-gl.js:33 addLayer mapbox-gl.js:33 $_addLayer GeojsonLayer.js:142 $_deferredMount GeojsonLayer.js:121 created GeojsonLayer.js:100 VueJS 18 mapbox-gl.js:29 Error: "layers.456: source "123" not found" qn mapbox-gl.js:29 Be mapbox-gl.js:33 _validate mapbox-gl.js:33 addLayer mapbox-gl.js:33 addLayer mapbox-gl.js:33 $_addLayer GeojsonLayer.js:142 $_deferredMount GeojsonLayer.js:121 created GeojsonLayer.js:100 VueJS 18 mapbox-gl.js:29 Error: "There is no source with ID '123'" isSourceLoaded mapbox-gl.js:33 sourceLoaded layerMixin.js:63 VueJS 3 processComputed backend.js:2809 getInstanceState backend.js:2613 getCustomInstanceDetails backend.js:2624 replacer backend.js:320 cache backend.js:254 replacer backend.js:320 encode backend.js:3100 encode backend.js:3110 encode backend.js:3101 stringifyStrict backend.js:3180 stringify backend.js:3149 stringify backend.js:270 logEvent backend.js:1778 method backend.js:1795 $_emitEvent withEvents.js:10 $_addLayer GeojsonLayer.js:143 $_deferredMount GeojsonLayer.js:121 created GeojsonLayer.js:100 VueJS 18 mapbox-gl.js:29

I read this guide: https://soal.github.io/vue-mapbox/guide/layers&sources.html#adding-layers but it expects all data to be in the component. I am especially confised about layer settings - can not find minimal working example for remote geojson file loaded by url.

[MegaOsama]

hi all this is very important solution of vue-mabpox after a lot of days work and searches i created dynamic map throw drawing direction at MglGeojsonLayer : -) it work full like 123

1-MglGeojsonLayer template :-

MglGeojsonLayer :layer=geoJsonLayer :layerId=geoJsonLayer.id :source=geoJsonSource :sourceId=geoJsonSource.data.id

2-geoJsonSource:-

geoJsonSource= { type: "geojson", data: { id: "test", type: "Feature", geometry: { type: "LineString", coordinates: [125.6, 10.1] }, properties: { name: "Dinagat Islands" } } }

3-geoJsonLayer= { id:'mylayer', type: "line", layout: { 'line-join': 'round', 'line-cap': 'round' }, paint: { 'line-color': '#3887be', 'line-width': 5, 'line-opacity': 0.75 } }

4- inside your method of getting the coords just add your coordinates to geoJsonSource like :-

this.geoJsonSource.data.geometry.coordinates=coordinates

5- the coordinates look like [ [ lng , lat ] ,....., [lng , lat] ]

i will make tutorial soon for clearing ;-) and again it really work