From b43a1f583068aeb7a22240599643307fd0f3b94f Mon Sep 17 00:00:00 2001 From: Zsolt Ero Date: Wed, 22 Oct 2025 11:23:03 +0200 Subject: [PATCH] work --- website/public/debug/lang/mix.html | 15 ++++++ website/public/debug/lang/mix.js | 66 +++++++++++++++++++++++ website/public/debug/lang/params.html | 15 ++++++ website/public/debug/lang/params.js | 78 +++++++++++++++++++++++++++ 4 files changed, 174 insertions(+) create mode 100644 website/public/debug/lang/mix.html create mode 100644 website/public/debug/lang/mix.js create mode 100644 website/public/debug/lang/params.html create mode 100644 website/public/debug/lang/params.js diff --git a/website/public/debug/lang/mix.html b/website/public/debug/lang/mix.html new file mode 100644 index 0000000..13d231f --- /dev/null +++ b/website/public/debug/lang/mix.html @@ -0,0 +1,15 @@ + + + + + + OpenFreeMap Debug + + + + +
+ + + + diff --git a/website/public/debug/lang/mix.js b/website/public/debug/lang/mix.js new file mode 100644 index 0000000..dd4528b --- /dev/null +++ b/website/public/debug/lang/mix.js @@ -0,0 +1,66 @@ +const map = new maplibregl.Map({ + container: 'map', + hash: 'map', + style: 'https://tiles.openfreemap.org/styles/liberty', + center: [0, 0], + zoom: 2, +}) + +function modifyStyle({ style, langCode }) { + if (!langCode) { + langCode = 'en' + } + + for (const layer of style.layers) { + if (layer.source !== 'openmaptiles') continue + if (!layer.layout) continue + + const textField = layer.layout['text-field'] + if (!textField) continue + + // highway numbers, etc. - skip ref-only fields + if (JSON.stringify(textField) === JSON.stringify(['to-string', ['get', 'ref']])) continue + + const nameUnderscore = `name_${langCode}` + const nameColon = `name:${langCode}` + + // Always display both values + layer.layout['text-field'] = ['concat', ['get', nameUnderscore], '\n', ['get', nameColon]] + + // Color red when they are different + if (!layer.paint) layer.paint = {} + layer.paint['text-color'] = [ + 'case', + ['!=', ['get', nameUnderscore], ['get', nameColon]], + '#ff0000', // Red when different + '#000000', // Default color when same (adjust as needed) + ] + } +} + +function applyLanguage() { + const hash = window.location.hash.substring(1) // Remove the '#' + const langCode = hash || null + + const style = map.getStyle() + modifyStyle({ style, langCode }) + map.setStyle(style, { diff: false }) +} + +map.on('load', () => { + // Add default hash if not present + if (!window.location.hash) { + alert( + 'To change the map language, modify the language code in the URL #.\nLabels will be RED when different.\nname_xx on line 1, name:xx on line 2', + ) + window.location.hash = '#en' + // The hashchange event will trigger applyLanguage() + } else { + applyLanguage() + } +}) + +// Listen for hash changes in URL +window.addEventListener('hashchange', () => { + applyLanguage() +}) diff --git a/website/public/debug/lang/params.html b/website/public/debug/lang/params.html new file mode 100644 index 0000000..29c0763 --- /dev/null +++ b/website/public/debug/lang/params.html @@ -0,0 +1,15 @@ + + + + + + OpenFreeMap Debug + + + + +
+ + + + diff --git a/website/public/debug/lang/params.js b/website/public/debug/lang/params.js new file mode 100644 index 0000000..673f13f --- /dev/null +++ b/website/public/debug/lang/params.js @@ -0,0 +1,78 @@ +const map = new maplibregl.Map({ + container: 'map', + hash: 'map', + style: 'https://tiles.openfreemap.org/styles/liberty', + center: [0, 0], + zoom: 2, +}) + +function modifyStyle({ style, langCode }) { + if (!langCode) { + langCode = 'en' + } + + for (const layer of style.layers) { + if (layer.source !== 'openmaptiles') continue + if (!layer.layout) continue + + const textField = layer.layout['text-field'] + if (!textField) continue + + // highway numbers, etc. - skip ref-only fields + if (JSON.stringify(textField) === JSON.stringify(['to-string', ['get', 'ref']])) continue + + const nameUnderscore = `name_${langCode}` + const nameColon = `name:${langCode}` + + // Always display both values + layer.layout['text-field'] = ['concat', ['get', nameUnderscore], '\n', ['get', nameColon]] + + // Color red when they are different + if (!layer.paint) layer.paint = {} + layer.paint['text-color'] = [ + 'case', + ['!=', ['get', nameUnderscore], ['get', nameColon]], + '#ff0000', // Red when different + '#000000', // Default color when same (adjust as needed) + ] + } +} + +function getLanguageParam() { + const urlParams = new URLSearchParams(window.location.search) + return urlParams.get('lang') +} + +function applyLanguage() { + const langCode = getLanguageParam() || null + + const style = map.getStyle() + modifyStyle({ style, langCode }) + map.setStyle(style, { diff: false }) +} + +map.on('load', () => { + let langCode = getLanguageParam() + + // Alert the URL param value on first load + alert( + `Language parameter: ${langCode || 'not set (defaulting to en)'}\n\n` + + 'To change the map language, modify the ?lang= parameter in the URL.\n' + + 'Labels will be RED when different.\n' + + 'name_xx on line 1, name:xx on line 2' + ) + + // Add default param if not present + if (!langCode) { + const url = new URL(window.location) + url.searchParams.set('lang', 'en') + window.history.replaceState({}, '', url) + } + + applyLanguage() +}) + +// Listen for URL changes (e.g., browser back/forward) +window.addEventListener('popstate', () => { + applyLanguage() +})