Mapbox GL JS - setData

Question

I'm using the setData URL to improve the MapBox performance:

(source as GeoJSONSource).setData('http://localhost:8888/api/tracking/all');

However, the API didn't send a GeoJson which is directly readable by MapBox. So in order to avoid to update the backend part, I would like to do some transformation in my frontend.

But I don't find a way to do it, do you have any idea?

I tried this, but it doesn't work:

(source as GeoJSONSource).setData('http://localhost:8888/api/tracking/all').map(this.aisDataService.transformBackend)

Thanks in advance for your help.

Damien

Answer 1

Since the method setData requires either a correct geo-json as an object or a URL line with the correct geo-json, you need:

1) get remote json 2) transform it to geo-json 3) setData

Example with the axios library :

  axios
    .get(remoteDataURL)
    .then(function(res) {
      var geojson = {
        "type": "FeatureCollection",
        "features": res.data.map(transformBackend)
      }
      map.getSource('data').setData(geojson)
    })

[ https://jsfiddle.net/97wq4L0f/ ]