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

General
1

Hi!
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):

Screen Shot 2021-03-05 at 8.12.16 AM
Screen Shot 2021-03-05 at 8.12.16 AM1132×765 48.3 KB

If I look in the browser console, I see the reason - there are a lot of calls to api.mapbox.com 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:

https://api.mapbox.com/styles/v1/trvrb/ciu03v244002o2in5hlm3q6w2/tiles/256/2/2/2?access_token=pk.eyJ1IjoidHJ2cmIiLCJhIjoiY2tqcnM5bXIxMWV1eTJzazN2YXVrODVnaiJ9.7iPttR9a_W7zuYlUCfrz6A

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!
Razvan

2

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

3

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.

4

Hi @rsultana. The Mapbox calls are getting expensive and we wanted to stop providing non- nextstrain.org 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": "https://api.mapbox.com/styles/v1/YOUR_MAPBOX_USERNAME/ciu03v244002o2in5hlm3q6w2/tiles/256/{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 auspice.us 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!

5

Thank you, Trevor @trvrb !
This makes sense, it’s not fair to charge your mapbox account for our deployments.
auspice.us 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!
Razvan

1 Like
6

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

7

@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. auspice.us will one day support frequencies panels, but not today!

8

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 = 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png';
  return {
    api,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
    mapboxWordmark: false
  };
};

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

and voila:

Screen Shot 2021-03-07 at 6.16.07 PM
Screen Shot 2021-03-07 at 6.16.07 PM904×837 90.8 KB

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!
Razvan

1 Like
9

Replacing
var api = 'https://api.mapbox.com/styles/v1/trvrb/ciu03v244002o2in5hlm3q6w2/...';
by var api = 'https://a.tile.openstreetmap.org/{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 = "https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoiYmFiYXJsZWxlcGhhbnQiLCJhIjoiY2ttMHh0anJiNDd1eTJxbjFtdXhhMGZsZyJ9.wMhK7JFHJ4vqIPxbzVn8Dg";

@james @rsultana

10

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.

11

@babarlelephant @rsultana I tested this today using auspice customsations and all was working well (instructions below). If this works for you it may be a better solution than modifying the source code, as it should allow easier updates to auspice. If you try this and it doesn’t work, please let me know & I’ll try to fix things!

I started by installing a fresh copy of auspice following our install docs

# Start in an empty directory
conda create --name auspice-test-map-customisations nodejs=14
conda activate auspice-test-map-customisations
npm install --global auspice
auspice --version # version 2.28.0

Following the client customisation docs, create a config.json file, with the following contents (I used @rsultana’s settings from above):

{
  "mapTiles": {
    "api": "https://a.tile.openstreetmap.org/{z}/{x}/{y}.png",
    "attribution": "&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors",
    "mapboxWordmark": false
  }
}

Download a dataset to view in auspice (skip this if you have your own!)

mkdir datasets
curl https://data.nextstrain.org/zika.json --compressed -o datasets/zika.json

Build auspice & view in a browser:

auspice build --verbose --extend config.json # note that this creates `index.html`, `dist` etc in the current directory
auspice view --datasetDir datasets
# Ensure that the message printed by the server as it starts up includes
# "Serving the auspice build which exists in this directory."
# so that we are indeed using our custom build of auspice

Open localhost:4000 in your browser and you should see a map similar to:

image
image655×546 132 KB

12

Just a minor point on this: when I ran this (auspice 2.29.1, Ubuntu 20.04), I got this error message:

$ auspice build --verbose --extend config.json
[verbose]	Generating webpack config. Extensions? true. devMode: false
[verbose]	Webpack writing output to: /home/ubuntu/auspice/dist
Running webpack compiler
Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports (/home/ubuntu/miniconda3/envs/auspice/lib/auspice/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/ubuntu/miniconda3/envs/auspice/lib/auspice/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/ubuntu/miniconda3/envs/auspice/lib/auspice/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/ubuntu/miniconda3/envs/auspice/lib/auspice/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/ubuntu/miniconda3/envs/auspice/lib/auspice/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/ubuntu/miniconda3/envs/auspice/lib/auspice/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/ubuntu/miniconda3/envs/auspice/lib/auspice/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/home/ubuntu/miniconda3/envs/auspice/lib/auspice/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /home/ubuntu/miniconda3/envs/auspice/lib/auspice/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at runSyncOrAsync (/home/ubuntu/miniconda3/envs/auspice/lib/auspice/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
    at iterateNormalLoaders (/home/ubuntu/miniconda3/envs/auspice/lib/auspice/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/home/ubuntu/miniconda3/envs/auspice/lib/auspice/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/ubuntu/miniconda3/envs/auspice/lib/auspice/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /home/ubuntu/miniconda3/envs/auspice/lib/auspice/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
node:internal/crypto/hash:67
  this[kHandle] = new _Hash(algorithm, xofLen);

The solution as per this StackOverflow post was to run:

export NODE_OPTIONS=--openssl-legacy-provider

before doing the build.

13

@pvanheus I’m guessing you were running a newer version of Node.js than Auspice supports. In a recent PR, I encountered the same error running Node.js 18. You can find the supported Node.js versions in package.json, for example:

  "engines": {
    "node": "^12 || ^14 || ^16",
    "npm": ">=6.9"
  },

I also created a PR to update the installation docs so this is more clear.

14

Thank you for your reply. But I tried your way, but the map still doesn’t show up.