Add Authentication header

[hitokiri]

Is your feature request related to a problem? Please describe.
Add headers to the request, in order to implement Authentication against the server

Describe the solution you'd like
folium.Map(location=[45.372, -121.6972],
zoom_start=12,
tiles='http://{s}.tiles.yourtiles.com/{z}/{x}/{y}.png',
attr='My Data Attribution'),
headers: {"Authorization": "Bearer Token" }

[Conengmo]

Please read this discussion on the Leaflet issue tracker: Leaflet/Leaflet#2091
The TileLayer class doesn't support custom headers. At the bottom of the discussion they link to a JS plugin you could try.

I don't suppose it's common to need authentication headers for tileservers. I thought they mostly pass the api key as part of the url or as a parameter. What tileserver are you using that requires authentication headers?

[bkanuka]

I'm using a tile server behind OAuth so I'm interested in this.

[Yasharesk]

I'm trying to use a tile server that requires the api key to be passed on through header, so I am interested in this as well.

[davidcavazos]

+1 Many Cloud providers require OAuth credentials to even reach the server, so I'm also interested in this.

[PhilippBuehlerOkeanos]

+1

[hansthen]

@Conengmo I am willing to take a stab at this.

Before I start though, I came up with three design alternatives. My preference would be option 1, but you decide. (Or propose something else altogether.)

Option 1
It is for use cases like this that I propose to introduce folium.Class with an include method.
Users would be able to implement the requested functionality like this:

tiles = TileLayer()
tiles.add_js_link("superagent", "https://cdnjs.cloudflare.com/ajax/libs/superagent/9.0.2/superagent.js")
tiles.include(create_tile=JsCode("""
    function(coords, done) {
       const url = this.getTileUrl(coords);
       const img = document.createElement('img');
       superagent
         .get(url)
         .set(‘header’, ‘header value’)
         .responseType('blob')
         .then((response) => {
           img.src = URL.createObjectURL(response.body);
           done(null, img);
         });
      return img;
    }
"""))

** Option 2 **
As an alternative, I can create a new folium.element.Include that can be added using add_child.

I don't like this option very much. The method add_child with Include can called on any branca.element. Only for certain elements (the ones representing Leaflet classes) would it actually make sense. I am not afraid that people will try it, but it does not feel right.

** Option 3 **
Implement this specifically on TileLayer. E.g. by adding a JsCode parameter to the constructor for create_tile.

[james-hinton]

+1

[hansthen]

I am working on a solution that builds on the code here: Leaflet/Leaflet#2091 (comment).