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()
+})