Build with newest nextstrain/ncov has API requests to mapbox 403:Forbidden

I have made a few custom local builds (for the samples we have in Hawaii) using the latest commit of
nextstrain/ncov because of the wonderful frequencies panel that I wanted to add to our builds.
I managed to get a nice build, but there’s something that’s not working - the map panel doesn’t get the geo features from mapbox, it only shows the demes circles and transmission lines (the overlay):

If I look in the browser console, I see the reason - there are a lot of calls to that return 403:Forbidden -(I tried to upload the screenshot, but I’m only allowed one upload as new poster)
It’s as if I’m using the wrong token or I don’t have one.
The API calls look actually like this:

which suggests to me that I’m trying to use a token that was generated for trvrb (Trevor Bedford?)

I was wonder if anybody could offer a hint of what I’m doing wrong or where I should look to debug this problem.

My build is very basic, but I can post it on github if more details are needed.
I’m using Auspice v2.23.0 to show it.

Thank you!

I think the token should be configured that if you are running this locally (of localhost or it should work. But if you are deploying this to your own URL, it won’t. But @trvrb knows more…

You are quite right, thank you Richard!
If I use localhost in the URL, the map shows up.
The problem is that I would indeed need to have people in the local network see this build as well.
I’ll read about deployment other than running auspice view.

Hi @rsultana. The Mapbox calls are getting expensive and we wanted to stop providing non- Auspice servers with tiles through our Mapbox account.

You can register for your own Mapbox account and swap the call to trvrb for your own account with your own access token. We have documentation here: Client Customisation API — Auspice documentation, but you’d basically build Auspice with

"mapTiles": {
    "api": "{z}/{x}/{y}?access_token=YOUR_MAPBOX_ACCESS_TOKEN"

I think I have this right. @james did the implementation here and may be able to offer more detailed insight than I can.

The local network sharing is an edge case here that we’re not dealing with all that well. My best suggestion at the moment would be to share Auspice JSON files to drag-and-drop onto if data needs to be private. If data can be public I’d recommend sharing through GitHub via /community (Community Sharing of Results Via GitHub — Nextstrain documentation). Or build your own custom Auspice server with your own Mapbox credentials (but this is more work).

Good luck!

Thank you, Trevor @trvrb !
This makes sense, it’s not fair to charge your mapbox account for our deployments. solution wouldn’t help us though, since it doesn’t support the frequencies panel, which is the main reason I made these builds.
I will look into publishing these builds on nextstrain community, with the private metadata stripped out (since it can be dragged and dropped later in it).
Thank you again for making these wonderful tools available to the community!

1 Like

you can also change the map server to smth else. Here is a user who seems to have figured this out:

@rneher and @trvrb are spot on. If you do end up setting a custom map tile address could you let us know how you got on?

P.S. will one day support frequencies panels, but not today!

Thank you, @rneher!
I applied the solution that michalkowalski94 suggested:
I checked out the lastest auspice code, then changed src/util/globals.js api to:

export const getMapTilesSettings = () => {
  if (hasExtension("mapTiles")) {
    return getExtension("mapTiles");
  /* defaults */
  const api = '{z}/{x}/{y}.png';
  return {
    attribution: '&copy; <a href="">OpenStreetMap</a> contributors',
    mapboxWordmark: false

then installed auspice from source with
npm install --global .

and voila:

I think I should trace though the piece of code that stamps the map image with the mapbox link - it’s not fair to openstreetmap. I think it’s mapboxWordmark: false above, but I haven’t tried it yet.

Thank you all for the very quick responses!

1 Like

var api = '';
by var api = '{z}/{x}/{y}.png';
in auspice.chunk.5.bundle.js works fine.

Otherwise I created a mapbox account/token, and this url works

var api = "{z}/{x}/{y}?access_token=pk.eyJ1IjoiYmFiYXJsZWxlcGhhbnQiLCJhIjoiY2ttMHh0anJiNDd1eTJxbjFtdXhhMGZsZyJ9.wMhK7JFHJ4vqIPxbzVn8Dg";

@james @rsultana

Nice work. Manually changing the source code (or the bundled code) makes it harder to update auspice etc which is one reason we exposed build-time configuration options (docs here). These can be buggy from time-to-time, but if they work for you then that would be a good long-term solution.