[Feat] Fetch tiles using axios

[adriangonzalezrodrigo]

Target Use Case

We would like to fetch map tiles using axios dependency instead of the default fetch call.

Proposal

We have done some tests using

transformRequest={transformRequest}

` const tileCache: Record<string, string> = {};

const fetchTileWithAxios = async (url: string): Promise => { try { const response = await axios.get(url, { responseType: 'arraybuffer' }); const blob = new Blob([response.data], { type: 'image/png' }); const objectURL = URL.createObjectURL(blob); tileCache[url] = objectURL; return objectURL; } catch (error) { console.error('Error fetching tile:', error); throw error; } };

const transformRequest = (url: string): RequestParameters => { if (tileCache[url]) { return { url: tileCache[url], credentials: 'same-origin', }; }

fetchTileWithAxios(url).catch(error => { console.error('Error in transformRequest:', error); });

return { url: '', credentials: 'same-origin', }; }; `

But this works but with a "delay". Maybe this is not possible because react-mapgl internally uses the tile and caches the result, etc...

[Pessimistress]

react-map-gl is a wrapper of the base map library. It does not implement any tile fetching logic.

[adriangonzalezericsson]

ok, thanks for the info. So I suppose this should be enabled by maplibre, mapbox or the lib you use to fetch tiles, right?

[Pessimistress]

Yes, you need to make a feature request to Maplibre.