Mapbox-gl-js: [proposal] Improve GeoJSON-by-url setData with complex http calls

[cyrilchapon]

Hey,

I'm currently loading GeoJSON this style

myApi.downloadGeojson()
.then(function(featureCollection) {
  map.getSource('mySource').setData(featureCollection);
});

Which seems ok, but I read at many places that it would be very better to load it via URL directly, for various reasons (see this and this).

But the only thing preventing me from doing this, is that my API is complex, and needs a few different things that setData(url) are not able to provide:

• This is not a GET, this is a POST with header x-http-method-override
• It's needs an auth token as header
• It needs a query in the body

I would be interesting if map.setData() could accept some kind of request as a parameter, wouldn't it ?

Apparently, this check wouldn't be enough to test, so I'd propose trading the parameter of setData to something called options or something, Allowing data key (for direct geojson data passing) OR some http keys (url, method, body, headers, ...). data and url would be exclusive, thus :

//Send object data
map.setData({
  data: {
    type: FeatureCollection,
    features: //some stuff
  }
});


//--OR--

//Bind to static file
map.setData({
  url: 'http://my.geo.json'
});


//--OR--

//Bind to dynamic API
map.setData({
  url: 'http://my.api/geojson',
  method: 'POST',
  headers: {
    'x-http-method-override': 'GET',
    'Authorization': 'Bearer' + mytoken,
    'content-type': 'application/json'
  },
  body: {
    //some json
  }
});

[mollymerp]

Hi @cyrilchapon – thanks for using mapbox! I believe the new transformRequest option on map instantiation will allow you to specify the parameters you need with the exception of needing to fire a POST request. It doesn't seem appropriate to use a POST request to request resources because these requests should not be sending any data to the server, so I'm not sure we'd consider adding this functionality.

example

var map = new mapboxgl.Map({
  container: 'map',
  center: [-122.420679, 37.772537],
  zoom: 13,
  style: style_object,
  hash: true,
  transformRequest: (url, resourceType)=> {
    if(resourceType == 'Source' && url.startsWith('http://myHost') {
      return {
       url: url.replace('http', 'https'),
       headers: { 'my-custom-header': true},
       credentials: 'include'  // Include cookies for cross-origin requests
     }
    }
  }
});