mapbox/mapbox-gl-leaflet

Access Token Issue - Mapbox GL JS v2+

guy-keller opened this issue · 4 comments

guy-keller commented

The following packages / versions are okay.

package.json (shortened for brevity)

    "leaflet": "^1.7.1",
    "mapbox-gl": "^1.13.1",
    "mapbox-gl-leaflet": "^0.0.15",

page/view that has a map

import * as L from 'leaflet';
import 'mapbox-gl';
import 'mapbox-gl-leaflet';

  // shortened for brevity
  private initialiseMap(): void {
    const mapOpts = MapHelper.getMapOptions();
    const map = new L.Map('map', mapOpts);

    const mapboxGlOpts = { accessToken: '', style: '' };
    const mapboxGl = (L as any).mapboxGL(mapboxGlOpts);
    mapboxGl.addTo(map);

    const mapboxMap = (mapboxGl as any).getMapboxMap();
    mapboxMap.addSource(MapHelper.MAPBOX_TILE_SOURCE_NAME, MapHelper.getTileSource());
    mapboxMap.addLayer(MapHelper.getTileLayer());

    this.leafletMap = map;
    window.setTimeout(() => {
      this.leafletMap.invalidateSize();
    }, 275);
  }

The source layer is from Bing Maps / Virtual Earth.

  // shortened for brevity
  public static getTileSource(): any {
    const tileSource = {
      type: 'raster',
      tileSize: 256,
      tiles: [
        'https://ecn.t0.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=587&mkt=en-gb&n=z&token='+MapHelper.getMapKey(),
        'https://ecn.t1.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=587&mkt=en-gb&n=z&token='+MapHelper.getMapKey(),
        'https://ecn.t2.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=587&mkt=en-gb&n=z&token='+MapHelper.getMapKey(),
        'https://ecn.t3.tiles.virtualearth.net/tiles/a{quadkey}.jpeg?g=587&mkt=en-gb&n=z&token='+MapHelper.getMapKey(),
      ]
    };
    return tileSource;
  }

If I update "mapbox-gl" from version "^1.13.1", to a newer version mapbox-gl v2+ it complains that no accessToken is present.

jgravois commented

@guikeller do you see the same behavior in v2 mapbox-gl-js app without the leaflet wrapper?

  • 👍1
guy-keller commented

Hi @jgravois ,

Sorry about the late reply.

If I use only the mapbox-gl-js v2 lib the map does not work. 😞
Mapbox GL JS version used on the test below: 2.3.1

package.json:

"mapbox-gl": "^2.3.1"

typescript component with a map:

import * as MB from 'mapbox-gl';

  // shortened for brevity - no access key provided
  private initialiseMap(): void {
    const mapboxMap = new MB.Map({
      container: 'map', // container id
      center: [-74.5, 40], // starting position [lng, lat]
      zoom: 9 // starting zoom
    });
    mapboxMap.addSource(MapHelper.MAPBOX_TILE_SOURCE_NAME, MapHelper.getTileSource());
    mapboxMap.addLayer(MapHelper.getTileLayer());
  }

global app scss / importing the mapbox css

@import "./../node_modules/mapbox-gl/dist/mapbox-gl.css";

Error msg:

Error: A valid Mapbox access token is required to use Mapbox GL JS. To create an account or a new access token, visit https://account.mapbox.com/
    at Object.errorCb (mapbox-gl.js:35)
    at Object.getSessionAPI (mapbox-gl.js:31)
    at Map._authenticate (mapbox-gl.js:35)
    at Map._render (mapbox-gl.js:35)
    at mapbox-gl.js:35
    at timer (zone-evergreen.js:2561)
    at ZoneDelegate.invokeTask (zone-evergreen.js:406)
    at Object.onInvokeTask (core.js:27424)
    at ZoneDelegate.invokeTask (zone-evergreen.js:405)
    at Zone.runTask (zone-evergreen.js:178)
    ...

The "MapHelper" class is in my first post. Cheers!

  • 👍1
  • 😕1
guy-keller commented

Hi @jgravois

Should I raise an issue here ( https://github.com/mapbox/mapbox-gl-js ) too?
Or is this one enough already and covers that repo/project too?

On a side note, the culprit seems to come from around about here:
https://github.com/mapbox/mapbox-gl-js/blob/main/src/ui/map.js#L2809

And end up about here:
https://github.com/mapbox/mapbox-gl-js/blob/main/src/util/mapbox.js#L473

My guess is that is missing a call to "isMapboxURL"
https://github.com/mapbox/mapbox-gl-js/blob/main/src/util/mapbox.js#L214

The line below could look like this here ( see the block of code ):
https://github.com/mapbox/mapbox-gl-js/blob/main/src/util/mapbox.js#L478

if (customAccessToken || config.ACCESS_TOKEN || !isMapboxURL()) {
  this.queueRequest({id: mapId, timestamp: Date.now()}, customAccessToken);
}  else {
  this.errorCb(new Error(AUTH_ERR_MSG));
}

This way if it is not a "mapbox:URL" the JS lib would continue to work.
Hope this helps to track down the issue / fixing the bug.

Cheers.

  • 🚀1
jgravois commented

Should I raise an issue here ( https://github.com/mapbox/mapbox-gl-js ) too?

Thanks for clarifying that the issue is not peculiar to this leaflet wrapper.

i don't think you're encountering a bug. starting in v2, a valid token is required to instantiate a map regardless of whether you're loading a Mapbox hosted basemap or not.

https://docs.mapbox.com/mapbox-gl-js/api/#migrating-to-v2

Or is this one enough already and covers that repo/project too?

the issue tracker in this repo is solely for the leaflet wrapper. if/when you're encountering a problem with mapbox-gl-js all on its own, your best bet is to whittle your repro case down to the bare minimum and look through existing issues prior to logging a new one.

  • 👍1