How do I load vector tile completely on my own?
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 12.4k
- Forks
- 2.4k
- PR merge metrics
- No merged PRs in 30d
Description
**mapbox-gl-js version**: 2.15.0
### Question
Hey Mapbox friends!
We are trying to use MapboxGL for our internal tool where we need to visualise custom vector tiles and faced issue. We extensively use code generation and our generated API clients provide layer of authentication, i.e. it can request and refresh token when needed.
On another hand as far I could learn MapboxGL doesn't have an ability to load tiles with code provided by client. The only thing I could come up with is the following:
```
const currentMap = new mapboxgl.Map({
/* ... */,
transformRequest: (url: string, resourceType: string) => {
if (resourceType === "Tile" && url.includes("CUSTOM_TILE_URL")) {
return {
url,
credentials: "include",
headers: {
Authorization: `Bearer ${getAccessToken()}`,
},
};
}
return undefined;
},
});
currentMap.on("load", () => {
currentMap.addSource("osrm", {
type: "vector",
tiles: [
`CUSTOM_TILE_URL?x={x}&y={y}&z={z}`,
],
minzoom: 12,
maxzoom: 19,
});
// ...
});
```
I.e. I manually pass URL of our API + handle authentication manually in `transformRequest` and it ALMOST works. Why almost: our tokens get expired quite often and we need to call refresh API when it happens. At the moment I work it around via nasty hack: I simply call API from one of generated clients from time to time by timer, but it is obviously ugly and not that convenient.
What I would like to have instead is ability to do something like this:
```
const currentMap = new mapboxgl.Map({
/* ... */,
loadTile: (url, x, y, z) => {
if (isMyCustomTile(url) {
return ourOwnApiClient.getTile(x, y, z); // return ArrayBuffer with Mapbox Vector Tile
}
return null; // fallback to default
}
});
});
```
Is there something I miss and it is possible to do in some better way?
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the Map constructor's transformRequest option and the vector source added through addSource in the issue example. Trace how tile requests and authentication failures are handled, using the expiring-token scenario as the reproduction. Done means documenting a supported integration path or defining a scoped tile-loading extension.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100