Move config to config.json file

This commit allows the user to have greater control of the services,
layers and overlays in the frontend. Instead of only being able to send
one backend variable, which would then be replaced into a javscript file
read as a text file by hardcoded values, this file can be passed to the
docker container with the -v command.

The README file has been updated to describe the changes.

Author: fbarbe00

README.md

@@ -16,8 +16,11 @@ Serves the frontend at `http://localhost:9966` running queries against the routi
 docker run -p 9966:9966 ghcr.io/project-osrm/osrm-frontend:latest
 ```
 
-Per default routing requests are made against the backend at `http://localhost:5000`.
-You can change the backend by using `-e OSRM_BACKEND='http://localhost:5001'` in the `docker run` command.
+By default, the docker container uses the settings in `config/config.json` file. If you'd like to provide a custom config file (with your own backend server, layers and overlays), you can run the container with the following command:
+
+```
+docker run -p 9966:9966 -v ./YOUR_CONFIG.json:/src/config/config.json osrm-frontend
+```
 
 In case Docker complains about not being able to connect to the Docker daemon make sure you are in the `docker` group.
 
@@ -56,15 +59,20 @@ npm run start-index
 
 ## Changing Backends
 
-In `src/leaflet_options.js` adjust:
+In `config/config.json` add or adjust your own services:
 
 ```
 services: [{
-  label: 'Car (fastest)',
+  label: 'Car',
   path: 'http://localhost:5000/route/v1'
 }],
 ```
 
+You can also adjust your own layers and overlays.
+
+## Debug
+> Note: "debug" pages currently do not work "out of the box" and require manual configuration
+
 For debug tiles showing speeds and small components available at `/debug` adjust in `debug/index.html`
 
 ```

config/config.json

@@ -0,0 +1,54 @@
+{
+    "zoom": 13,
+    "center": [
+        50.8503,
+        4.3517
+    ],
+    "language": "en",
+    "layers": [
+        {
+            "name": "openstreetmap.org",
+            "url": "//tile.openstreetmap.org/{z}/{x}/{y}.png",
+            "attribution": "© <a href=\"https://www.openstreetmap.org/copyright/en\">OpenStreetMap</a> contributors"
+        },
+        {
+            "name": "openstreetmap.de",
+            "url": "//tile.openstreetmap.de/tiles/osmde/{z}/{x}/{y}.png",
+            "attribution": "<a target=\"_blank\" href=\"http://www.openstreetmap.org/\">Karte hergestellt aus OpenStreetMap-Daten</a> | Lizenz: <a rel=\"license\" target=\"_blank\" href=\"http://opendatacommons.org/licenses/odbl/\">Open Database License (ODbL)</a>"
+        }
+    ],
+    "overlays":[
+        {
+            "name": "Hiking",
+            "url": "//tile.waymarkedtrails.org/hiking/{z}/{x}/{y}.png",
+            "attribution": "© <a href=\"http://waymarkedtrails.org\">Sarah Hoffmann</a> (<a href=\"https://creativecommons.org/licenses/by-sa/3.0/\">CC-BY-SA</a>)"
+        },
+        {
+            "name": "Bike",
+            "url": "//tile.waymarkedtrails.org/cycling/{z}/{x}/{y}.png",
+            "attribution": "© <a href=\"http://waymarkedtrails.org\">Sarah Hoffmann</a> (<a href=\"https://creativecommons.org/licenses/by-sa/3.0/\">CC-BY-SA</a>)"
+        },
+        {
+            "name": "Small Components",
+            "url": "https://tools.geofabrik.de/osmi/tiles/routing/{z}/{x}/{y}.png"
+        }
+        
+    ],
+    "services": [
+        {
+            "label": "Car",
+            "path": "https://routing.openstreetmap.de/routed-car/route/v1",
+            "debug": "car"
+        },
+        {
+            "label": "Bike",
+            "path": "https://routing.openstreetmap.de/routed-bike/route/v1",
+	    "debug": "bike"
+        },
+        {
+            "label": "Foot",
+            "path": "https://routing.openstreetmap.de/routed-foot/route/v1",
+            "debug": "foot"
+        }
+    ]
+}

docker/Dockerfile

@@ -1,13 +1,5 @@
 FROM alpine:3.21
 
-# Enables customized options using environment variables
-ENV OSRM_BACKEND='http://localhost:5000'
-ENV OSRM_CENTER='38.8995,-77.0269'
-ENV OSRM_ZOOM='13'
-ENV OSRM_LANGUAGE='en'
-ENV OSRM_LABEL='Car (fastest)'
-ENV OSRM_MAPBOX_TOKEN='pk.eyJ1IjoibXNsZWUiLCJhIjoiclpiTWV5SSJ9.P_h8r37vD8jpIH1A6i1VRg'
-
 # Copy package.json
 RUN mkdir -p /src
 COPY package.json /src

package.json

@@ -5,9 +5,8 @@
   "main": "src/index.js",
   "scripts": {
     "test": "eslint src/*.js i18n/*.js",
-    "replace": "node ./scripts/replace.js",
     "compile": "browserify -d src/index.js -s osrm > bundle.raw.js && uglifyjs bundle.raw.js -c -m --source-map filename=bundle.js.map -o bundle.js",
-    "build": "npm run replace && npm run compile && cp node_modules/leaflet/dist/leaflet.css css/leaflet.css",
+    "build": "npm run compile && cp node_modules/leaflet/dist/leaflet.css css/leaflet.css",
     "start-index": "budo src/index.js --serve=bundle.js --live -d | bistre",
     "start": "npm run build && npm run start-index",
     "prepub": "npm run build"

scripts/replace.js

@@ -1,78 +1,39 @@
 'use strict';
 
 var L = require('leaflet');
+const config = require('../config/config.json');
 
-var mapboxTileURL = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}',
-    mapboxAttribution = '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>',
-    mapboxToken = 'pk.eyJ1IjoibXNsZWUiLCJhIjoiclpiTWV5SSJ9.P_h8r37vD8jpIH1A6i1VRg',
-    osmAttribution = '© <a href="https://www.openstreetmap.org/copyright/en">OpenStreetMap</a> contributors',
-    waymarkedtrailsAttribution = '© <a href="http://waymarkedtrails.org">Sarah Hoffmann</a> (<a href="https://creativecommons.org/licenses/by-sa/3.0/">CC-BY-SA</a>)';
+var layers = {};
+var overlays = {};
 
-var streets = L.tileLayer(mapboxTileURL, {
-    attribution: mapboxAttribution,
-    tileSize: 512,
-    zoomOffset: -1,
-    id: 'mapbox/streets-v11',
-    accessToken: mapboxToken
-  }),
-  outdoors = L.tileLayer(mapboxTileURL, {
-    attribution: mapboxAttribution,
-    tileSize: 512,
-    zoomOffset: -1,
-    id: 'mapbox/outdoors-v11',
-    accessToken: mapboxToken
-  }),
-  satellite = L.tileLayer(mapboxTileURL, {
-    attribution: mapboxAttribution,
-    tileSize: 512,
-    zoomOffset: -1,
-    id: 'mapbox/satellite-streets-v11',
-    accessToken: mapboxToken
-  }),
-  osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-    attribution: osmAttribution,
-  }),
-  osm_de = L.tileLayer('https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png', {
-    attribution: osmAttribution,
-  }),
-  hiking = L.tileLayer('https://tile.waymarkedtrails.org/hiking/{z}/{x}/{y}.png', {
-    attribution: waymarkedtrailsAttribution,
-  }),
-  bike = L.tileLayer('https://tile.waymarkedtrails.org/cycling/{z}/{x}/{y}.png', {
-    attribution: waymarkedtrailsAttribution,
-  }),
-  small_components = L.tileLayer('https://tools.geofabrik.de/osmi/tiles/routing/{z}/{x}/{y}.png', {});
+// Load layers from config
+for (let layer of config.layers) {
+  layers[layer.name] = L.tileLayer(layer.url, {
+    attribution: layer.attribution
+  });
+}
+
+// Load overlays from config
+for (let overlay of config.overlays) {
+  overlays[overlay.name] = L.tileLayer(overlay.url, {
+    attribution: overlay.attribution
+  });
+}
 
 module.exports = {
   defaultState: {
-    center: L.latLng(38.8995,-77.0269),
-    zoom: 13,
+    center: L.latLng(config.center[0], config.center[1]),
+    zoom: config.zoom,
     waypoints: [],
-    language: 'en',
+    language: config.language,
     alternative: 0,
-    layer: streets
-  },
-  services: [{
-    label: 'Car (fastest)',
-    path: 'https://router.project-osrm.org/route/v1'
-  }],
-  layer: [{
-    'Mapbox Streets': streets,
-    'Mapbox Outdoors': outdoors,
-    'Mapbox Streets Satellite': satellite,
-    'openstreetmap.org': osm,
-    'openstreetmap.de.org': osm_de
-  }],
-  overlay: {
-    'Hiking': hiking,
-    'Bike': bike,
-    'Small Components': small_components
+    layer: layers[config.layers[0].name], // Set the base layer to the first layer in the list
+    service: 0
   },
+  services: config.services,
+  layer: [layers],
+  overlay: overlays,
   baselayer: {
-    one: streets,
-    two: outdoors,
-    three: satellite,
-    four: osm,
-    five: osm_de
+    one: layers[config.layers[0].name], // Set the base layer to the first layer in the list
   }
 };