Leaflet: Possible to change header info for tile request?

[newmanw]

I need to access tile servers which require a token to be passed. Is there any way to intercept the tile request so that I can add something to the header before the request is made. I.E. it would be nice if I could listen for a pre-tile request, via an event, mess with the headers and send the request on its way.

[mourner]

Hmm... Is there a way to do that in HTML? I mean, how would you load an image with custom headers in general, not talking about Leaflet?

[newmanw]

Good point! Digging deeper I see what is going on. And yes you are correct I do not think there is a way to mod headers unless you are making an AJAX request. Most APIs allow access tokens to also be passed in the url as a query param. I will look more into that.

If possible to pass as params in my case I think I can just extend TileLayer to pass the param information that I need. I can create an extension that essentially adds query params to the TileLayer (TileLayerQueryParam or something). Have you come across any situations in which TileLayer would need to pass query params? I.E. extension is fine, but wondering if this should be part of TileLayer.

[mourner]

Yep, adding query params is much easier. :)

[zhenyanghua]

adding as query params is fine, but it exposes the token in the request url. when implementing a OAuth 2.0, the suggestion is to write the token into the header. This issue should be a new pull request.

[rrameshkumar76]

This feature would be great for OAuth 2.0 to add the authorization header.

[perliedman]

@zhenyanghua @rrameshkumar76 as mentioned above, TileLayer is just an img tag, and to out knowledge there is no way to set custom headers for an image tag.

Having said that, you can load tiles any way you want (like using AJAX) if you extend GridLayer. There's some pretty good examples on how to do things like that in the Extending Leaflet, New Layers tutorial.

[rrameshkumar76]

Thanks @perliedman for the answer and the explanation.
I was able to extend L.TileLayer.WMS and override the createTile method where i made a ajax call to get the tile image with headers.

[SunnyMittal]

Hi Ramesh Kumar, is it possible for you to share the extended WMS class for reference ?
Thanks heaps

[rrameshkumar76]

@SunnyMittal I used superagent for ajax, replace it as needed.

L.TileLayer.WMS_Headers = L.TileLayer.WMS.extend({
  createTile(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;
  }
});

L.tileLayer.wms_headers = (url, options) => new L.TileLayer.WMS_Headers(url, options);

[SunnyMittal]

@rrameshkumar76 thanks it helped :)

[ticinum-aerospace]

based on @rrameshkumar76 anwser, I built a super simple plugin.
Hope you will enjoy it.

[AB-Kent]

If any one wants to add headers to L.TileLayer instead of L.TileLayer.WMS, this is possible by a simple modification of @ticinum-aerospace 's plugin. Just change the base class from L.TileLayer.WMS to L.TileLayer and rename the new class and function appropriately.

[jaq316]

I've modified @ticinum-aerospace 's plugin for L.TileLayer instead of L.TileLayer.WMS here: https://github.com/jaq316/leaflet-header/blob/master/index.js