Allow air-gapped usage of the web app

[rlenferink]

Description

What kind of feature you are suggesting?

Use-case: Allow air-gapped usage of Valhalla. This means that end-users can fully run Valhalla against their own openstreetmap/valhalla/nominatim stack.

Most of this is possible already, except for a few things:

• 1: Allow the user to specify their own OSM URL (default = https://www.openstreetmap.org)
  • Suggestion: Add a key (e.g. VITE_OSM_URL) to the .env file, which is used in the applicable places. E.g. here:

    • web-app/src/utils/nominatim.ts

      Line 56 in 54d89c9

      description: `https://www.openstreetmap.org/${result.osm_type}/${result.osm_id}`,

    • web-app/src/components/map/index.tsx

      Line 236 in 54d89c9

      const osmURL = `https://www.openstreetmap.org/#map=${zoom}/${lat}/${lng}`;

• 2: Allow the user to specify their own OSM tile server URL (default = https://tile.openstreetmap.org/{z}/{x}/{y}.png)
  • Suggestion: Use the already available VITE_TILE_SERVER_URL for this:

    • web-app/.env

      Line 4 in 54d89c9

      VITE_TILE_SERVER_URL="https://tile.openstreetmap.org/{z}/{x}/{y}.png"

    • web-app/public/styles/carto.json

      Line 6 in 54d89c9

      "tiles": ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"],

• 3: Include the required shortbread sprites (currently vector.openstreetmap.org is referenced)
  • Suggestion: Include a copy of the required shortbread sprites in the web-app repo.

    • web-app/public/styles/versatiles-colorful.json

      Line 11 in 54d89c9

      "url": "https://vector.openstreetmap.org/demo/shortbread/sprites/basics/sprites"

• 4: In the versatiles-colorful.json file, other vector.openstreetmap.org references are in place. Think of a plan how to solve this. See

  • web-app/public/styles/versatiles-colorful.json

    Line 7 in 54d89c9

    "glyphs": "https://vector.openstreetmap.org/demo/shortbread/fonts/{fontstack}/{range}.pbf",

  • web-app/public/styles/versatiles-colorful.json

    Line 18 in 54d89c9

    "https://vector.openstreetmap.org/shortbread_v1/{z}/{x}/{y}.mvt"

Does it solve any problem?

Yes. This allows the self-hosting of the Valhalla web-app so users can use the web-app against their own data store. This is useful in two situations:

1. An air-gapped environment, where no external internet access is possible.
2. Offline access of map data, in case of an internet outage. This requires that the map data must already be downloaded and setup prior to the usage (as per any self-hosted component).

Situation 2 is what I am interested in. To still be able to access map data at home in case of internet outages.

Screenshots

No response

Additional information

No response

[nilsnolde]

Jep sure sounds good to me! All the URLs can even be runtime rather than config time, e.g. hiding them behind "advanced settings" UI. That's a slightly more invasive change, but might make it easier in your scenario?

[mustaphaturhan]

this is really an interesting topic but most of the items here can be solved with custom styles, can't they (except the first one)? something like:

{
  "version": 8,
  "name": "versatiles-colorful-custom",
  "glyphs": "localhost:3001/fonts/{fontstack}/{range}.pbf",
  "sprite": [
    {
      "id": "basics",
      "url": "localhost:3001/sprites/basics/sprites"
    }
  ],
  "sources": {
    "versatiles-shortbread": {
      "tiles": ["localhost:3001/tile_server/{z}/{x}/{y}.mvt"],
      "type": "vector",
      "scheme": "xyz"
    }
  },
  "layers": [],
}

should fix your offline access problem.

the problem though, we are saving the custom style only to the local storage so the changes won't be applicable for everyone (you have to re-upload the configuration again and again in different devices). choosing runtime rather than config time also doesn't fix this problem.

[nilsnolde]

urgh right, style.json is mostly responsible. those URLs cant be specified(/overridden outside the style.json when configuring the maplibre source?

[mustaphaturhan]

it is possible. i converted them to static assets with #277 but we can do something like:

import { versatilesColorful } from '@/public/styles/versatiles-colorful.json';

export const createStyleWithCustomURL = ({
  spriteURL = import.meta.env.SPRITE_URL,
  glyphsURL = import.meta.env.GLYPHS_URL,
  tilesURL = import.meta.env.TILES_URL,
}: {
  spriteURL: string;
  glyphsURL: string;
  tilesURL: string;
}) => {
  return {
    ...versatilesColorful,
    sprite: [...versatilesColorful.sprite, { id: 'basics', url: spriteURL }],
    glyphs: glyphsURL,
    sources: {
      'versatiles-shortbread': {
        tiles: [tilesURL],
        ...versatilesColorful.sources['versatiles-shortbread'],
      },
      ...versatilesColorful.sources,
    },
  };
};

something like this would override style.json file but I don't think this is good solution.

we can change the logic where we are listing map styles and we can add something like if ENV.MAP_STYLES-0 exist, add it to listing. so if user adds this to their environment variables:

MAP_STYLES-0="my-self-hosted-server.cloudflare/style.json"

it might be the default style of the application.

[nilsnolde]

ah ok, no I agree, doesnt feel good. custom style makes more sense. the first one we can change to config @rlenferink , does that work for you too? feel free to send over a PR if so