Definitelytyped: '@types/mapbox-gl': Property 'setData' does not exist on type 'Source'

[mmartimo]

I tried using the @types/mapbox-gl package v.0.29.1 and had problems.

Since last Aug, we are to use map.getSource(...).setData(...) to update GeoJSON sources.
(https://github.com/mapbox/mapbox-gl-js/blob/master/CHANGELOG.md#0220-august-11-2016)

Also documented in the API docs:
https://www.mapbox.com/mapbox-gl-js/api/#GeoJSONSource

However, I'm getting the following Typescript error when trying to implement:
TS2339:Property 'setData' does not exist on type 'Source'

I'm not sure how to update or fix this...

• Authors: @dobrud, @alex3165, @andy-ms

[andy-ms]

The definition for getSource is getSource(id: string): VectorSource | RasterSource | GeoJSONSource | ImageSource | VideoSource; Looks like you'll have to cast to GeoJSONSource: (map.getSource(...) as GeoJSONSource).setData(...).

To help debug this kind of error, try opening your code in an editor and hovering near the location of the error. In this case it would tell you that the return type of getSource was not what you expected. Then goto definition on getSource to view it in the declaration file (node_modules/@types/mapbox-gl/index.d.ts).

If a type definition is in error you can change the corresponding file in your checkout of this repository (DefinitelyTyped/mapbox-gl/index.d.ts). See full instructions here.

[GaryS68]

I'm running into this problem trying to port a mapbox tutorial into Angular. Was this ever resolved?

[andy-ms]

@GaryS68 Probably not, PRs accepted.

[tudor2004]

Did anybody solve this issue? Or is there any kind of workaround?

[hbendix]

I am also having this problem. My Source is set to GeoJson and even trying:
const source = this.map.getSource('source-name')
source.type = 'geojson';

doesn't help. The error throws because setData is not present in the other Source Types and is only present on GeoJsonSource.

[Akatosh]

For those who are still having this problem, one way to do that is to cast like:
const source: mapboxgl.GeoJSONSource = this.map.getSource('source-name') as mapboxgl.GeoJSONSource. Seems typescript has no problem with that and source.setData(... works as expected.

[mepadron]

this.mapa.getSource('route').setData(geojson); property setData does not exist on type, I use angular 7 as ts, help??????

const source: Mapboxgl.GeoJSONSource = this.mapa.getSource('route') as Mapboxgl.GeoJSONSource;
source.setData(geojson); ->argument type string
and should be type geojson = {
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: route
}
};

[sebastiangug]

@mepadron sorry dude, being able to read is a prerequisite to coding

[iriekun]

I'm having the same issue and use casting as suggested by @andy-ms but then it showed error when rendering the map

App.tsx:154 Uncaught TypeError: Cannot read property 'setData' of undefined
    at r.<anonymous> (App.tsx:154)
    at r.kt.fire (mapbox-gl.js:29)
    at r._render (mapbox-gl.js:33)
    at mapbox-gl.js:33

Could anyone help why it's like this even though I have correct data as in api doc ?

[abhinavkumar985]

Me to stuck with the same issue.

[iriekun]

Me to stuck with the same issue.
@abhinavkumar985 with type problem? I actually got it work by using above suggestion.

[martis-git]

Still actual