Skip to content

Major refactoring of docker containers/frontend #381

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 8 commits into
base: gh-pages
Choose a base branch
from
Open

Major refactoring of docker containers/frontend #381

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
443b91d
Update packages in package-lock.json
fbarbe00 Feb 16, 2025
540a4ef
Handle multiple backend services
fbarbe00 Feb 16, 2025
ce87c39
Move config to config.json file
fbarbe00 Feb 16, 2025
ef088ba
Update bundle files
fbarbe00 Feb 16, 2025
1668176
Add translations
fbarbe00 Feb 16, 2025
76ac381
Default to english translation
fbarbe00 Feb 16, 2025
11633c5
Translate service profile names
fbarbe00 Feb 16, 2025
b6b10e8
Output all waypoints as loc parameters, using empty string for missing
Jul 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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
Copy link
Contributor

@arnesetzer arnesetzer Sep 23, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why this note? With the current docker image (sha256:d05515fff579039bc3b45289003174b66d00a72c9a04d841656146cce6aa24ea) the debug map works just fine out of the box

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'll be honest, it's been a while since I've first made this so I'm not too sure. Looking at debug/index.html, it looks like there is a hardcoded mapbox access token, which I think is expired? I just tried running the default docker image on my VPS, and I just get a black page, with this error message on the console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/tile/v1/car/tile(2340,3134,13).mvt. (Reason: CORS request did not succeed). Status code: (null)

Not sure what is supposed to be running on port 5000 (osrm frontend runs on port 9966 by default), so I guess that's what I meant with my edit.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The Mapbox token is used for Mapbox layers in the normal (non-debug) view. The osrm-backend instance runs on port 5000 by default. I don't know what you are doing, but if you run the OSRM backend and frontend Docker images as they are, the debug view works just fine. You may want to specify the correct backend by running the frontend with the command -e OSRM_BACKEND="http://whatever.yourdomain:Port", as mentioned in the README.
grafik

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alright, I can then remove that extra line in the README. Other thoughts on this PR?


For debug tiles showing speeds and small components available at `/debug` adjust in `debug/index.html`

```
Expand Down
2 changes: 1 addition & 1 deletion bundle.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion bundle.js.map
View file
Open in desktop

Large diffs are not rendered by default.

900 changes: 668 additions & 232 deletions bundle.raw.js
View file
Open in desktop

Large diffs are not rendered by default.

54 changes: 54 additions & 0 deletions config/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The former default was http://localhost:5000. Would keep it that way. But I like the approach to make configuration easier.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good. My thought was that someone running the docker for the first time would like to have something working immediately before changing the config, to simply try it out. Hence defaulting to something that works. But I'll change it back to localhost

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So would you instead only have one service, pointing to localhost:5000? Or one pointing to localhost and the other two to the routing.openstreetmap.de for foot and bike?

"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"
}
]
}
8 changes: 0 additions & 8 deletions docker/Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand Down
12 changes: 9 additions & 3 deletions i18n/de.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,13 @@ module.exports = {
'Open in editor': 'Im Editor öffnen',
'Open in JOSM': 'In JOSM öffnen',
'Select language': 'Sprache auswählen',
'Start - press enter to drop marker': 'Start - drücken um einen Marker zu plazieren',
'End - press enter to drop marker': 'Ende - drücken um einen Marker zu plazieren',
'Via point - press enter to drop marker': 'Zwischenstop - drücken um einen Marker zu plazieren'
'Share Route': 'Route teilen',
'Link': 'Link',
'Shortlink': 'Kurzlink',
'Start - press enter to drop marker': 'Start - drücken um einen Marker zu platzieren',
'End - press enter to drop marker': 'Ende - drücken um einen Marker zu platzieren',
'Via point - press enter to drop marker': 'Zwischenstop - drücken um einen Marker zu platzieren',
'Bike': 'Fahrrad',
'Car': 'Auto',
'Foot': 'Fußgänger',
};
8 changes: 7 additions & 1 deletion i18n/en.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,13 @@ module.exports = {
'Open in editor': 'Open in editor',
'Open in JOSM': 'Open in JOSM',
'Select language': 'Select language',
'Share Route': 'Share Route',
'Link': 'Link',
'Shortlink': 'Shortlink',
'Start - press enter to drop marker': 'Start - press enter to drop marker',
'End - press enter to drop marker': 'End - press enter to drop marker',
'Via point - press enter to drop marker': 'Via point - press enter to drop marker'
'Via point - press enter to drop marker': 'Via point - press enter to drop marker',
'Bike': 'Bike',
'Car': 'Car',
'Foot': 'Foot',
};
12 changes: 9 additions & 3 deletions i18n/es.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,17 @@ module.exports = {
key: 'es',
'Open in Debug Map': 'Abrir en mapa depuración',
'Open in Mapillary': 'Abrir en Mapillary',
'GPX': 'Export GPX file',
'GPX': 'Exportar archivo GPX',
'Open in editor': 'Abrir en editor',
'Open in JOSM': 'Abrir en JOSM',
'Select language': 'Seleccionar idioma',
'Start - press enter to drop marker': 'Incio - presione enter para colocar el marcador',
'Share Route': 'Compartir ruta',
'Link': 'Enlace',
'Shortlink': 'Enlace corto',
'Start - press enter to drop marker': 'Inicio - presione enter para colocar el marcador',
'End - press enter to drop marker': 'Fin - presione enter para colocar el marcador',
'Via point - press enter to drop marker': 'Punto en la vía - presione enter para colocar un marcador'
'Via point - press enter to drop marker': 'Punto en la vía - presione enter para colocar un marcador',
'Bike': 'Bicicleta',
'Car': 'Coche',
'Foot': 'Peatón',
};
12 changes: 9 additions & 3 deletions i18n/fr.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,13 @@ module.exports = {
'Open in Mapillary': 'Ouvrir dans Mapillary',
'GPX': 'Exporter fichier GPX',
'Select language': 'Choisir la langue',
'Start - press enter to drop marker': 'Point de départ',
'End - press enter to drop marker': 'Point d\'arrivée',
'Via point - press enter to drop marker': 'Étape intermédiaire'
'Share Route': 'Partager l\'itinéraire',
'Link': 'Lien',
'Shortlink': 'Lien court',
'Start - press enter to drop marker': 'Point de départ - appuyez sur entrée pour placer le marqueur',
'End - press enter to drop marker': 'Point d\'arrivée - appuyez sur entrée pour placer le marqueur',
'Via point - press enter to drop marker': 'Étape intermédiaire - appuyez sur Entrée pour placer le marqueur',
'Bike': 'Vélo',
'Car': 'Voiture',
'Foot': 'Piéton',
};
8 changes: 7 additions & 1 deletion i18n/it.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,13 @@ module.exports = {
'Open in editor': 'Apri nell’editor',
'Open in JOSM': 'Apri in JOSM',
'Select language': 'Seleziona la lingua',
'Share Route': 'Condividi il percorso',
'Link': 'Link',
'Shortlink': 'Link breve',
'Start - press enter to drop marker': 'Inizio - premere invio per rilasciare un marcatore',
'End - press enter to drop marker': 'Fine - premere invio per rilasciare un marcatore',
'Via point - press enter to drop marker': 'Punto di passaggio - premere invio per rilasciare un marcatore'
'Via point - press enter to drop marker': 'Punto di passaggio - premere invio per rilasciare un marcatore',
'Bike': 'Bicicletta',
'Car': 'Auto',
'Foot': 'A piedi',
};
Loading