Make localization configurable through settings (#702)

Fixes #697

Make the map localization configurable. Followup on #680 and #691.

No page reload needed. Even when changing browser language. The map will
automatically reload.

## Settings

### Custom language

<img width="838" height="258" alt="image"
src="https://github.com/user-attachments/assets/7381074b-d9af-4b09-9e25-a18fa2b01634"
/>
<img width="331" height="221" alt="image"
src="https://github.com/user-attachments/assets/8da421fc-ca91-464a-a854-a63624a8c425"
/>

### Automatic

<img width="838" height="258" alt="image"
src="https://github.com/user-attachments/assets/354fc8f8-0518-4feb-b2f7-1734498d45b6"
/>
<img width="344" height="278" alt="image"
src="https://github.com/user-attachments/assets/747c414d-c2b7-41c5-b5e6-dfdf376c56f7"
/>


### Disabled

<img width="826" height="182" alt="image"
src="https://github.com/user-attachments/assets/b6487928-0f81-4128-9b0f-09d50c8b1631"
/>
<img width="304" height="254" alt="image"
src="https://github.com/user-attachments/assets/2cc07497-7b1a-460d-9bf0-5aba2bf662e1"
/>


### Browser language

When the user changes browser language, the map is automatically
reloaded with the chosen language (if the automatic localization is
used).

<img width="294" height="119" alt="image"
src="https://github.com/user-attachments/assets/f5b5dcc0-9bbe-46ea-bb5b-968f0a2be4b1"
/>

Author: hiddewie

proxy/index.html

@@ -205,6 +205,29 @@ <h5 class="modal-title">Map configuration</h5>
               Control how stations are labeled on the map for zooms 5 to 10. From zoom 10 onwards, the names are always shown.
             </small>
           </div>
+          <div class="mb-3">
+            <label class="form-label">Localization</label>
+            <div>
+              <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="localization" id="localizationDisabled" value="label" onchange="disableLocalization(); localizationCustomLanguageControl.disabled = true">
+                <label class="form-check-label" for="localizationDisabled">Disabled</label>
+              </div>
+              <div class="form-check form-check-inline">
+                <input class="form-check-input" type="radio" name="localization" id="localizationAutomatic" value="name" checked onchange="automaticLocalization(); localizationCustomLanguageControl.disabled = true">
+                <label class="form-check-label" for="localizationAutomatic">Automatic</label>
+              </div>
+              <div class="form-check form-check-inline" style="margin-right: 0.3rem">
+                <input class="form-check-input" type="radio" name="localization" id="localizationCustom" value="name" onchange="customLocalization(localizationCustomLanguageControl.value); localizationCustomLanguageControl.disabled = false">
+                <label class="form-check-label" for="localizationCustom">Custom: </label>
+              </div>
+              <div class="form-check form-check-inline" style="padding-left: 0; width: 5rem">
+                <input type="text" class="form-control" name="localization-language" onchange="customLocalization(this.value)" id="localizationCustomLanguage" />
+              </div>
+            </div>
+            <small class="form-text">
+              Control whether localization is enabled and what language is used. When specifying a custom language, use the language code as specified in <a href="https://en.wikipedia.org/wiki/ISO_639-1" target="_blank">ISO_639-1</a>, for example <code>en</code> for English.
+            </small>
+          </div>
         </form>
       </div>
     </div>

proxy/js/ui.js

@@ -24,6 +24,10 @@ const themeDarkControl = document.getElementById('themeDark');
 const themeLightControl = document.getElementById('themeLight');
 const editorIDControl =  document.getElementById('editorID');
 const editorJOSMControl =  document.getElementById('editorJOSM');
+const localizationDisabledControl =  document.getElementById('localizationDisabled');
+const localizationAutomaticControl =  document.getElementById('localizationAutomatic');
+const localizationCustomControl =  document.getElementById('localizationCustom');
+const localizationCustomLanguageControl =  document.getElementById('localizationCustomLanguage');
 const backgroundMapContainer = document.getElementById('background-map');
 const legend = document.getElementById('legend');
 const legendMapContainer = document.getElementById('legend-map');
@@ -50,7 +54,16 @@ function getFlagEmoji(countryCode) {
   return String.fromCodePoint(...codePoints);
 }
 
-const locale = new Intl.Locale(navigator.language);
+let locale = new Intl.Locale(navigator.language);
+window.addEventListener('languagechange', () => {
+  locale = new Intl.Locale(navigator.language);
+  console.info(`Browser language changed to ${locale.language}`);
+
+  const localization = configuration.localization ?? defaultConfiguration.localization;
+  if (localization === 'automatic') {
+    onStyleChange();
+  }
+})
 
 const icons = {
   railway: {
@@ -92,7 +105,10 @@ function registerLastSearchResults(results) {
 
 function facilitySearchUrl(type, term, language) {
   const url = new URL(`${location.origin}/api/facility`)
-  url.searchParams.set('lang', language)
+
+  if (language) {
+    url.searchParams.set('lang', language)
+  }
 
   switch (type) {
     case 'name':
@@ -286,6 +302,19 @@ function showConfiguration() {
     stationLabelNameControl.checked = true
   }
 
+  const localization = configuration.localization ?? defaultConfiguration.localization;
+  if (localization === 'automatic') {
+    localizationAutomaticControl.checked = true;
+    localizationCustomLanguageControl.disabled = true;
+  } else if (localization === 'disabled') {
+    localizationDisabledControl.checked = true;
+    localizationCustomLanguageControl.disabled = true;
+  } else if (localization === 'custom') {
+    localizationCustomControl.checked = true;
+    localizationCustomLanguageControl.disabled = false;
+  }
+  localizationCustomLanguageControl.value = configuration.localizationCustomLanguage ?? locale.language;
+
   configurationBackdrop.style.display = 'block';
 }
 
@@ -361,7 +390,7 @@ searchFacilitiesForm.addEventListener('submit', event => {
   event.preventDefault();
   const formData = new FormData(event.target);
   const data = Object.fromEntries(formData);
-  searchForFacilities(data.type, data.term, locale.language)
+  searchForFacilities(data.type, data.term, configuredLanguage())
 })
 searchMilestonesForm.addEventListener('submit', event => {
   event.preventDefault();
@@ -648,6 +677,33 @@ function onStationLabelChange(stationlabel) {
   }
 }
 
+function disableLocalization() {
+  updateConfiguration('localization', 'disabled');
+  onStyleChange();
+}
+
+function automaticLocalization() {
+  updateConfiguration('localization', 'automatic');
+  onStyleChange();
+}
+
+function customLocalization(language) {
+  updateConfiguration('localization', 'custom');
+  updateConfiguration('localizationCustomLanguage', language);
+  onStyleChange();
+}
+
+function configuredLanguage() {
+  const localization = configuration.localization ?? defaultConfiguration.localization;
+  if (localization === 'automatic') {
+    return locale.language;
+  } else if (localization === 'disabled') {
+    return null;
+  } else if (localization === 'custom') {
+    return configuration.localizationCustomLanguage;
+  }
+}
+
 function resolveTheme(configuredTheme) {
   return configuredTheme === 'system'
     ? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
@@ -937,7 +993,8 @@ const defaultConfiguration = {
   theme: 'system',
   editor: 'id',
   view: {},
-  stationLowZoomLabel: 'label'
+  stationLowZoomLabel: 'label',
+  localization: 'automatic',
 };
 let configuration = readConfiguration(localStorage);
 configuration = migrateConfiguration(localStorage, configuration);
@@ -1045,13 +1102,17 @@ function rewriteStylePathsToOrigin(style) {
 }
 
 // Rewrite source URLs to append the language query parameter
-function addLanguageToSupportedSources(style) {
+function addLanguageToSupportedSources(style, language) {
   style.sources = Object.fromEntries(
     Object.entries(style.sources)
       .map(([key, source]) => {
         if (source && source.url && ((source.metadata ?? {}).supports ?? []).includes('language')) {
           const parsedUrl = new URL(source.url)
-          parsedUrl.searchParams.set('lang', locale.language)
+
+          if (language) {
+            parsedUrl.searchParams.set('lang', language)
+          }
+
           return [
             key,
             {
@@ -1086,28 +1147,31 @@ function toggleHillShadeLayer(style) {
 }
 
 let lastSetMapStyle = null;
-const onStyleChange = () => {
+let lastSetMapLanguage = null;
+function onStyleChange() {
   const supportsDate = knownStyles[selectedStyle].styles.date;
   const dateActive = supportsDate && dateControl.active;
   const mapStyle = dateActive
     ? knownStyles[selectedStyle].styles.date
     : knownStyles[selectedStyle].styles.default
+  const language = configuredLanguage();
 
-  if (mapStyle !== lastSetMapStyle) {
-    lastSetMapStyle = mapStyle;
-
+  if (mapStyle !== lastSetMapStyle || language != lastSetMapLanguage) {
     // Change styles
     map.setStyle(mapStyles[mapStyle], {
       validate: false,
       transformStyle: (previous, next) => {
         rewriteStylePathsToOrigin(next)
-        addLanguageToSupportedSources(next)
+        addLanguageToSupportedSources(next, language)
         rewriteGlobalStateDefaults(next)
         toggleHillShadeLayer(next)
         return next;
       },
     });
+  }
 
+  if (mapStyle !== lastSetMapStyle) {
+    // Change legend styles
     legendMap.setStyle(legendStyles[mapStyle], {
       validate: false,
       // Do not calculate a diff because of the large structural layer differences causing a blocking performance hit
@@ -1127,6 +1191,9 @@ const onStyleChange = () => {
     dateControl.hide();
   }
 
+  lastSetMapStyle = mapStyle;
+  lastSetMapLanguage = language;
+
   onPageParametersChange();
 }