Could not add header by transformRequest to PmTiles

[enersis-pst]

mapbox-gl-js version

v3.25.0

Browser and version

Chrome 149.0.7827.103

Expected behavior

by using transformRequest i could add header for PmTiles.

Actual behavior

Header did not changed.

Link to the demonstration

https://jsbin.com/biqowafoce/edit?html,output

Steps to trigger the unexpected behavior

• open example
• open network monitor
• have a look at headers
• see that the { Authorization: "SECRET" }, is missing

Relevant log output

[jpr-nrg-62867]

I have the same problem. Even if I unconditionally include headers, it does not, i.e.

transformRequest: (url, resourceType) => {
   return { url, headers: { custom: "value" } };
}

[jpr-nrg-62867]

I believe have a workaround

You essentially need to manage the connection to the PMTiles endpoint yourself. Create a PMTiles object, passing in a FetchSource as the type so you can use the customHeaders option. Implement a custom TileLoader that uses a PMTiles object created with this FetchSource. I don't have something fully working yet, but I imagine it'll be something like (this is mostly a copy of the current PMTilesProvider implementation in MapBox)

import {PMTiles, FetchSource} from 'pmtiles';

import type {TileJSON, TileDataResponse, TileProvider, VectorSourceSpecification} from 'mapbox-gl';


class PMTilesProvider implements TileProvider<ArrayBuffer> {
    private url: string;
    private pmtiles: PMTiles;

    constructor(options: VectorSourceSpecification) {
        if (!options.url) throw new Error('PMTilesProvider requires a source url');
        this.url = options.url;
        // key line here
        const fetchSource = new FetchSource(this.url, { "Authorization": `Bearer ${options.token}` });
        this.pmtiles = new PMTiles(fetchSource);
    }

    async load(): Promise<TileJSON> {
        // PMTiles reads TileJSON from the archive header via byte-range requests,
        // so we use this.url directly instead of options.request.url.
        return await this.pmtiles.getTileJson(this.url) as TileJSON;
    }

    async loadTile(tile: {z: number; x: number; y: number}, options: {signal: AbortSignal}): Promise<TileDataResponse<ArrayBuffer> | null> {
        const response = await this.pmtiles.getZxy(tile.z, tile.x, tile.y, options.signal);
        if (!response) return null;

        return {
            data: response.data,
            expires: response.expires,
            cacheControl: response.cacheControl,
        };
    }
}

See

• PMTiles Fetch Source
• PMTilesProvider class in MapBox