feat:add map language control by rohhann12 · Pull Request #385 · valhalla/web-app

rohhann12 · 2026-03-18T13:39:20Z

Starting Step to close #384

🛠️ Fixes Issue

The issue was the map would show the names of the countries in the format of their own local language (eg- middle eastern countries name would be shown in arabic).

👨‍💻 Changes proposed

-src/components/map/index.tsx
-src/components/map/map-language-control.tsx

📄 Note to reviewers

Approach:
The Shortbread OSM vector tiles use text-field: "{name}" on all symbol layers for label rendering. The tiles also provide name_en and name_de as alternative name properties.
I added a MapLanguageControl component that:

Iterates over all symbol layers in the current map style
Swaps the text-field layout property between {name}, {name_en}, or {name_de} based on user selection
Persists the choice in localStorage so it survives page reloads and style switches (restored via onLoad and onStyleData events)
Currently limited to 3 languages since that's all Shortbread tiles support. This can be extended once we move to Maptiler tiles which offer broader language coverage.

📷 Screenshots

Screen.Recording.2026-03-18.at.6.55.27.PM.mov

github-actions · 2026-03-18T20:51:37Z

Preview is ready! 🚀 You can view it here: https://valhalla-app-tests.gis-ops.com/385

nilsnolde · 2026-03-18T21:12:09Z

the video doesn't work on my machine/browser (maybe re-encode to smth else?). and just looking at the app I have no idea how I show shortbread tiles with english/german names.

nilsnolde · 2026-03-18T21:16:37Z

ah now it worked and my eyes didn't see the new map control. I think that's because that's a really strange place to put smth like that. we don't want 2 places with the same intention, language control. we want to rename the "directions language" dropdown and just always show it. then match to german/english for the map, everything else becomes "local".

nilsnolde · 2026-03-18T21:18:40Z

lastly, are you sure the stadiamaps "alidade smooth" doesn't offer language support? I'd be surprised if not. probably via a header.

rohhann12 · 2026-03-19T06:57:37Z

hey @nilsnolde
updated as requested
1.Removed the separate map language control — unified it with the existing language dropdown in the settings panel
2.Renamed "Directions Language" to "Language" and made it visible on all tabs (not just directions)
3.When language is changed, it now updates both navigation instructions and map labels — en-* maps to English labels, de-DE to German, everything else falls back to local names
4. Added support for both Shortbread (string-based text-field) and Alidade Smooth (expression-based text-field) label formats
5.Alidade Smooth supports language via style modification (not request headers) — the code now handles both tile sources
https://github.com/user-attachments/assets/32de5f2d-6139-4be7-8b8d-a8f9c5aaa6fd

rohhann12 · 2026-03-19T07:52:42Z

Hi @nilsnolde
1.Updated the settings panel tests to reflect the changes — "Directions Language" is now "Language" and is visible on all tabs.
2.Also added mocks for useMap and updateMapLabels.

nilsnolde

thanks, LGTM. and there's no AI note necessary in the PR description? I should've written the guidelines in a way to always put a AI note, no matter if used or not. now it's too ambiguous..

nilsnolde · 2026-03-19T08:00:28Z

+  const base = directionsLanguage.split('-')[0];
+  if (base === 'en' || base === 'de') {


nilsnolde · 2026-03-19T08:08:09Z

there's actually one small thing that's already a problem now in master: on first page load the language doesn't get set in localstorage, so even though we fall back to system language, the map or instructions serve the "default" en-US.

feel free to fix that in this PR. if not, we'll do it in a separate PR. it's more important now with (default) basemap language control than it was before with maneuver language, which the vast majority of people probably won't look at anyways when playing around.

rohhann12 · 2026-03-19T09:28:22Z

Hi @nilsnolde
So on first page load, if no language is stored in localStorage, it now resolves the system language (falling back to en-US) and persists it immediately. This way the map labels and instructions stay in sync from the start.
Let me know if we should keep it local.

nilsnolde · 2026-03-19T09:44:28Z

Let me know if we should keep it local.

I think it's only consistent to change the behavior, i.e. only local if language doesn't have a match.

and there's no AI note necessary in the PR description?

how about this?

rohhann12 · 2026-03-19T10:03:42Z

Agreed — current behavior already does that. If the system locale matches a supported language (e.g. en-*, de-DE), it uses that for both map labels and instructions. Otherwise it falls back to local names.
No change needed there,already did that.

AI Disclosure: Code was written by me. Used AI to help reframe PR descriptions and comments for grammar corrections :D

nilsnolde · 2026-03-19T18:26:22Z

+    // Shortbread: simple string like "{name}", "{name_en}", "{name_de}"
+    if (typeof textField === 'string') {
+      if (!textField.match(/\{name(_[a-z]{2})?\}/)) continue;
+
+      const newTextField = langKey ? `{name_${langKey}}` : '{name}';
+      map.setLayoutProperty(layer.id, 'text-field', newTextField);
+      continue;
+    }
+
+    // Alidade Smooth: expression-based, e.g. ["get", "name:latin"]
+    // or ["coalesce", ["get", "name:en"], ["get", "name:latin"]]
+    if (Array.isArray(textField)) {
+      const json = JSON.stringify(textField);
+      if (!json.includes('"name:') && !json.includes('"name"')) continue;


these ifs look a bit "smelly". I'm not sure if somehow making this more dependent on the MVT endpoint instead of field types (which is still a provider dependency, any MVT source can do anything to support languages) or name or whatever would make it more or less "smelly". wdyt @mustaphaturhan ?

feat:add map language control

e53907f

rohhann12 mentioned this pull request Mar 18, 2026

i18n: Show English names for country labels on the map #384

Open

feat:added support for lang in existing comp & removed duplicate comp

c114189

fix: update settings panel tests

e7162f1

nilsnolde previously approved these changes Mar 19, 2026

View reviewed changes

nilsnolde requested a review from mustaphaturhan March 19, 2026 08:04

fix: persist default language to localStorage on first load

fbce090

rohhann12 dismissed nilsnolde’s stale review via fbce090 March 19, 2026 09:27

rohhann12 requested a review from nilsnolde March 19, 2026 10:06

Merge branch 'master' into feat-language-support-maps-clean

a098f0a

nilsnolde reviewed Mar 19, 2026

View reviewed changes

rohhann12 requested a review from nilsnolde March 23, 2026 15:23

		const base = directionsLanguage.split('-')[0];
		if (base === 'en' \|\| base === 'de') {

Conversation

rohhann12 commented Mar 18, 2026

🛠️ Fixes Issue

👨‍💻 Changes proposed

📄 Note to reviewers

📷 Screenshots

Uh oh!

github-actions Bot commented Mar 18, 2026

Uh oh!

nilsnolde commented Mar 18, 2026

Uh oh!

nilsnolde commented Mar 18, 2026

Uh oh!

nilsnolde commented Mar 18, 2026

Uh oh!

rohhann12 commented Mar 19, 2026

Uh oh!

rohhann12 commented Mar 19, 2026

Uh oh!

nilsnolde left a comment

Choose a reason for hiding this comment

Uh oh!

nilsnolde Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

nilsnolde commented Mar 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

rohhann12 commented Mar 19, 2026

Uh oh!

nilsnolde commented Mar 19, 2026

Uh oh!

rohhann12 commented Mar 19, 2026

Uh oh!

nilsnolde Mar 19, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

nilsnolde commented Mar 19, 2026 •

edited

Loading