Make Thunderforest token configurable rather than hard-coding it

config.env.example

@@ -35,7 +35,10 @@
 # Get an API key here: https://maps.lima-labs.com/
 #LIMA_LABS_TOKEN=
 
-# Tracestrack provides a nice topographic map.
+# If this is defined, the OpenCycleMap map style will be available.
+# Get an API key here: https://www.thunderforest.com/
+#THUNDERFOREST_TOKEN=
+
 # If this is defined, the Tracestrack Topo map style will be available.
 # Get an API key here: https://tracestrack.com/
 #TRACESTRACK_TOKEN=

docs/src/developers/leaflet/layers.md

@@ -29,6 +29,7 @@ L.control.layers(byName(layers.baseLayers), byName(layers.overlays)).addTo(map);
 
 There are some global layer options that change the behaviour of the available layers:
 * `limaLabsToken`: A [Lima Labs](https://maps.lima-labs.com/) API token. If defined, the Lima Labs layer will be available and used as the default layer instead of Mapnik. Lima Labs layers are very similar to Mapnik in style, but they are double resolution (so they don’t look pixely on high-resolution screens) and have English place names in addition to the local language.
+* `thunderforestToken`: A [Thunderforest](https://www.thunderforest.com/) API token. If defined, the OpenCycleMap map style will be available.
 * `tracestrackToken`: A [Tracestrack](https://tracestrack.com/) API token. If defined, the Tracestrack Topo map style will be available.
 
 To set the global layer options, use the `setLayerOptions()` function:
@@ -37,6 +38,7 @@ import { setLayerOptions } from "facilmap-leaflet";
 
 setLayerOptions({
 	limaLabsToken: "...",
+	thunderforestToken: "...",
 	tracestrackToken: "..."
 });
 ```

docs/src/developers/server/config.md

@@ -20,8 +20,9 @@ The config of the FacilMap server can be set either by using environment variabl
 | `MAPBOX_TOKEN`        |          |             | [Mapbox API key](https://www.mapbox.com/signup/). If neither this nor `ORS_TOKEN` are specified, the routing tab and any routing options will be hidden. |
 | `MAXMIND_USER_ID`     |          |             | [MaxMind user ID](https://www.maxmind.com/en/geolite2/signup). |
 | `MAXMIND_LICENSE_KEY` |          |             | MaxMind license key. |
-| `LIMA_LABS_TOKEN`     |          |             | [Lima Labs](https://maps.lima-labs.com/) API key |
-| `TRACESTRACK_TOKEN`   |          |             | [Tracestrack](https://tracestrack.com/) API key |
+| `LIMA_LABS_TOKEN`     |          |             | [Lima Labs](https://maps.lima-labs.com/) API key (for Lima Labs map style) |
+| `THUNDERFOREST_TOKEN` |          |             | [Thunderforest](https://www.thunderforest.com/) API key (for OpenCycleMap map style) |
+| `TRACESTRACK_TOKEN`   |          |             | [Tracestrack](https://tracestrack.com/) API key (for Tracestrack Topo map style) |
 | `HIDE_COMMERCIAL_MAP_LINKS` |    |             | Set to `1` to hide the links to Google/Bing Maps in the “Map style” menu. |
 | `CUSTOM_CSS_FILE`     |          |             | The path of a CSS file that should be included ([see more details below](#custom-css-file)). |
 | `NOMINATIM_URL`       |          | `https://nominatim.openstreetmap.org` | The URL to the Nominatim server (used to search for places). |

leaflet/src/layers.ts

@@ -82,11 +82,13 @@ export function createDefaultLayers(): Layers & { fallbackLayer: string | undefi
 				noWrap: true
 			})),
 
-			OCyc: fixAttribution(tileLayer("https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=bc74ceb5f91c448b9615f9b576c61c16", {
-				...fmName(() => getI18n().t("layers.ocyc-name")),
-				...attribution(() => getI18n().t("layers.ocyc-attribution")),
-				noWrap: true
-			})),
+			...(layerOptions.thunderforestToken ? {
+				OCyc: fixAttribution(tileLayer(`https://{s}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=${encodeURIComponent(layerOptions.thunderforestToken)}`, {
+					...fmName(() => getI18n().t("layers.ocyc-name")),
+					...attribution(() => getI18n().t("layers.ocyc-attribution")),
+					noWrap: true
+				}))
+			} : {}),
 
 			HiBi: fixAttribution(tileLayer("https://tiles.wmflabs.org/hikebike/{z}/{x}/{y}.png", {
 				...fmName(() => getI18n().t("layers.hobi-name")),
@@ -154,6 +156,7 @@ export function setLayers(create: typeof createDefaultLayers): void {
 
 export interface LayerOptions {
 	limaLabsToken?: string;
+	thunderforestToken?: string;
 	tracestrackToken?: string;
 }
 

server/src/config.ts

@@ -24,6 +24,7 @@ export interface Config {
 	maxmindUserId?: string;
 	maxmindLicenseKey?: string;
 	limaLabsToken?: string;
+	thunderforestToken?: string;
 	tracestrackToken?: string;
 	/** Hide the "Open this on Google/Bing Maps" links in the map style menu */
 	hideCommercialMapLinks?: boolean;
@@ -63,6 +64,7 @@ const config: Config = {
 	maxmindLicenseKey: process.env.MAXMIND_LICENSE_KEY || "",
 
 	limaLabsToken: process.env.LIMA_LABS_TOKEN || "", // Get a token on https://maps.lima-labs.com/
+	thunderforestToken: process.env.THUNDERFOREST_TOKEN || "", // Get a token on https://www.thunderforest.com/
 	tracestrackToken: process.env.TRACESTRACK_TOKEN || "", // Get a token on https://tracestrack.com/
 
 	hideCommercialMapLinks: process.env.HIDE_COMMERCIAL_MAP_LINKS === "1",

server/src/frontend.ts

@@ -68,6 +68,7 @@ function getInjectedConfig(): InjectedConfig {
 		openElevationMaxBatchSize: config.openElevationMaxBatchSize,
 		nominatimUrl: config.nominatimUrl,
 		limaLabsToken: config.limaLabsToken,
+		thunderforestToken: config.thunderforestToken,
 		tracestrackToken: config.tracestrackToken,
 		hideCommercialMapLinks: config.hideCommercialMapLinks,
 		supportsRoutes: !!config.mapboxToken || !!config.orsToken,

utils/src/types.ts

@@ -14,6 +14,7 @@ export interface InjectedConfig {
 	openElevationMaxBatchSize: number;
 	nominatimUrl: string;
 	limaLabsToken?: string;
+	thunderforestToken?: string;
 	tracestrackToken?: string;
 	hideCommercialMapLinks?: boolean;
 	supportsRoutes: boolean;