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

[Nmargolis]

+1 also experiencing this issue. Would be very excited to implement PMTiles with mapbox-gl, but we need to be able to update the credentials header for the HTTP requests the way we currently do for regular vector tiles.

Is it on the roadmap to support this?

Thanks!