Browse Source

Merge pull request #1261 from nextstrain/rotate-mapbox-token

Rotate Mapbox API token
master
james hadfield 10 months ago
committed by GitHub
parent
commit
31815a0a7e
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 22
      docs/customise-client/api.md
  2. 30
      src/components/map/map.js
  3. 19
      src/util/globals.js

22
docs/customise-client/api.md

@ -26,6 +26,7 @@ A useful reference may be the [customisation JSON file](https://github.com/nexts
* `browserTitle` The browser title for the page. Defaults to "auspice" if not defined.
* `googleAnalyticsKey` You can specify a Google Analytics key to enable (some) analytics functionality. More documentation to come.
* `serverAddress` Specify the address / prefix which the auspice client uses for API requests.
* `mapTiles` Specify the address (and other information) for the tiles used to render the map.
> Please remember to make any modifications, including customisations described here, publicly available. See [the previous page](./index.rst) for more details.
@ -128,3 +129,24 @@ This can be changed by specifying `serverAddress` in the customisation JSON.
> Note that currently you can't specify a different domain due to CORS headers.
This may well be a simple fix -- please get in touch if you can help here!
---
### Custom Map tiles
Auspice uses [Leaflet](https://leafletjs.com/) to render the map, which requires access to a tile set in order to render the geography.
By default, auspice uses [Mapbox](https://www.mapbox.com/) for these tiles, and we make these available for local use of auspice.
If you are distributing your own version of auspice (i.e. not running it locally) you must set an appropriate API address here so that the map can fetch suitable tiles.
```json
{
"mapTiles": {
"api": "API address for Leaflet to fetch map tiles",
"attribution": "HTML-formatted attribution string to be displayed in bottom-right-hand corner of map",
"mapboxWordmark": "(optional) should the Mapbox logo be displayed in the bottom-left of the map? (boolean)"
}
}
```
For some examples of other tile sets you may use, see the [OpenStreetMap wiki](https://wiki.openstreetmap.org/wiki/Tile_servers), and please remember to adhere to the licenses and terms of use for each tile server.
The API address contains parameters as specified by the [Leaflet API](https://docs.mapbox.com/api/overview/).

30
src/components/map/map.js

@ -25,6 +25,7 @@ import { MAP_ANIMATION_PLAY_PAUSE_BUTTON } from "../../actions/types";
import { timerStart, timerEnd } from "../../util/perf";
import { tabSingle, darkGrey, lightGrey, goColor, pauseColor } from "../../globalStyles";
import ErrorBoundary from "../../util/errorBoundry";
import { getMapTilesSettings } from "../../util/globals";
import Legend from "../tree/legend/legend";
import "../../css/mapbox.css";
@ -79,7 +80,8 @@ class Map extends React.Component {
transmissionData: null,
demeIndices: null,
transmissionIndices: null,
userHasInteractedWithMap: false
userHasInteractedWithMap: false,
tilesSettings: getMapTilesSettings()
};
// https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md#es6-classes
this.playPauseButtonClicked = this.playPauseButtonClicked.bind(this);
@ -493,24 +495,24 @@ class Map extends React.Component {
map.getRenderer(map).options.padding = 2;
L.tileLayer('https://api.mapbox.com/styles/v1/trvrb/ciu03v244002o2in5hlm3q6w2/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoidHJ2cmIiLCJhIjoiY2l1MDRoMzg5MDEwbjJvcXBpNnUxMXdwbCJ9.PMqX7vgORuXLXxtI3wISjw', {
attribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <a style="font-weight: 700" href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a>'
}).addTo(map);
L.tileLayer(this.state.tilesSettings.api, {attribution: this.state.tilesSettings.attribution || ''})
.addTo(map);
if (!this.props.narrativeMode) {
L.zoomControlButtons = L.control.zoom({position: "bottomright"}).addTo(map);
}
const Wordmark = L.Control.extend({
onAdd: function onAdd() {
const wordmark = L.DomUtil.create('a', 'mapbox-wordmark');
wordmark.href = "http://mapbox.com/about/maps";
wordmark.target = "_blank";
return wordmark;
}
});
(new Wordmark({position: 'bottomleft'})).addTo(map);
if (this.state.tilesSettings.mapboxWordmark) {
const Wordmark = L.Control.extend({
onAdd: function onAdd() {
const wordmark = L.DomUtil.create('a', 'mapbox-wordmark');
wordmark.href = "http://mapbox.com/about/maps";
wordmark.target = "_blank";
return wordmark;
}
});
(new Wordmark({position: 'bottomleft'})).addTo(map);
}
/* Set up leaflet events */
map.on("moveend", this.respondToLeafletEvent.bind(this));

19
src/util/globals.js

@ -205,3 +205,22 @@ export const isValueValid = (value) => {
return true;
};
export const strainSymbol = Symbol('strain');
/**
* Address to fetch tiles from (including access key).
* We currently set a default key to fetch these from a Mapbox API.
* This API is set to allow tiles to be served for local installs and nextstrain-related projects only.
* See https://docs.nextstrain.org/projects/auspice/en/stable/customise-client/api.html for more.
*/
export const getMapTilesSettings = () => {
if (hasExtension("mapTiles")) {
return getExtension("mapTiles");
}
/* defaults */
const api = 'https://api.mapbox.com/styles/v1/trvrb/ciu03v244002o2in5hlm3q6w2/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoidHJ2cmIiLCJhIjoiY2tqcnM5bXIxMWV1eTJzazN2YXVrODVnaiJ9.7iPttR9a_W7zuYlUCfrz6A';
return {
api,
attribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <a style="font-weight: 700" href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a>',
mapboxWordmark: true
};
};
Loading…
Cancel
Save