mapbox-gl-js
mapbox-gl-js copied to clipboard
accessToken is not working as expected when loading Mapbox as dynamic library
I'm not entirely sure if this is Mapbox issue but I thought I will let you know. Maybe this will be useful for someone with similar issue. mapbox-gl-js version: 3.1.2
browser: Arc 1.31.0 MacOS: Sonoma 14.1
Steps to Trigger Behavior
const mapboxgl = await import("mapbox-gl");
// according to https://docs.mapbox.com/mapbox-gl-js/guides/ this line should be correct
mapboxgl.accessToken = "YOUR_ACCESS_TOKEN"
new mapboxgl.Map({
container: document.getElementById('map'),
});
Link to Demonstration
none
Expected Behavior
assigned key just like in the docs should work
Actual Behavior
Console output:
Error: An API access token is required to use Mapbox GL. See https://docs.mapbox.com/api/overview/#access-tokens-and-token-scopes
at ze._makeAPIURL (mapbox-gl.js?v=eb8ae707:663:23)
at ze.normalizeStyleURL (mapbox-gl.js?v=eb8ae707:599:90)
at iS.loadURL (mapbox-gl.js?v=eb8ae707:22889:43)
at Map._updateStyle (mapbox-gl.js?v=eb8ae707:26368:251)
at Map.setStyle (mapbox-gl.js?v=eb8ae707:26359:436)
at new Map (mapbox-gl.js?v=eb8ae707:26097:797)
at initMap (CoreMapbox.vue:99:9)
Workaround
My temporary solution is to assign accessToken in default object:
mapboxgl.default.accessToken = "YOUR_ACCESS_TOKEN"
Map
can be used directly from mapboxgl
no need to create it with mapboxgl.default.Map