Allow for different Map instances to use different Mapbox access tokens

[anandthakker]

Motivation

Currently, a Mapbox access token must be set on the global mapboxgl library object. There are some use cases that require multiple maps on a page, each using a different access token.

Design Alternatives

1. Do nothing

It's technically possible to use the Map's transformRequest option to get different maps using different access tokens via something like:

mapboxgl.accessToken = '<access token>' // placeholder
var map1 = new mapboxgl.Map({
    container: container,
    style: style,
    transformRequest: (url) => ({url: url.replace('<access token>', token_1)})
});
var map2 = new mapboxgl.Map({
    container: container,
    style: style,
    transformRequest: (url) => ({url: url.replace('<access token>', token_2)})
});

2. Accept accessToken as a Map option that takes precedence over mapboxgl.accessToken.

Design

While option 1 above works, I think it would be better to address this use case more directly via option 2.

Mock-Up

mapboxgl.accessToken = token_1;
var map1 = new mapboxgl.Map({ // defaults to `mapboxgl.accessToken`
    container: container,
    style: style,
});
var map2 = new mapboxgl.Map({
    container: container,
    style: style,
    accessToken: token_2 // overrides `mapboxgl.accessToken`
});

[stevage]

It's also arguably possible for someone to want to have two different Mapbox tokens in the same map, to mash up layers from two different accounts. Assuming that doesn't violate any Mapbox policy, might be worth supporting at the same time.

[andrewharvey]

It's also arguably possible for someone to want to have two different Mapbox tokens in the same map, to mash up layers from two different accounts. Assuming that doesn't violate any Mapbox policy, might be worth supporting at the same time.

Licensing aside, I assume you know that by making the tileset public, then it's no longer tied to an access token from that account and you can use any token from any account. Of course this only works when you're happy to make it public.

[asheemmamoowala]

Closed by #8364

[3zzy]

@andrewharvey I have the exact same use case where I need to show maps from different accounts using their accessToken and the maps cannot be made public. I guess my only option is to set the token on the global object?

[andrewharvey]

@andrewharvey I have the exact same use case where I need to show maps from different accounts using their accessToken and the maps cannot be made public. I guess my only option is to set the token on the global object?

What about setting a transformRequest? and based on the resource being requested you swap the tokens?

[3zzy]

@andrewharvey I have a simple find and replace as in the original description but looks like some requests (Sprite and Glyph) don't go through the transform?

For example:

Object { status: 403, url: "https://api.mapbox.com/fonts/v1/myusername/CoM Regular,Arial Unicode MS Regular/0-255.pbf?access_token=myTokenThatDidNOTgetreplaced", name: "e", message: "Forbidden", stack: "" }

Object { status: 404, url: "https://api.mapbox.com/styles/v1/myusername/cjh9zyduz8ajk2rp9nn8lw0qo/sprite@2x.json?access_token=myTokenThatDidNOTgetreplaced", name: "e", message: "Not Found", stack: "" }