diff --git a/website/public/debug/lang/colon.html b/website/public/debug/lang/colon.html
new file mode 100644
index 0000000..c836a7d
--- /dev/null
+++ b/website/public/debug/lang/colon.html
@@ -0,0 +1,15 @@
+
+
+
+
+
+ OpenFreeMap Debug
+
+
+
+
+
+
+
+
+
diff --git a/website/public/debug/lang/colon.js b/website/public/debug/lang/colon.js
new file mode 100644
index 0000000..8c3b0d6
--- /dev/null
+++ b/website/public/debug/lang/colon.js
@@ -0,0 +1,76 @@
+const map = new maplibregl.Map({
+ container: '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 id = layer.id
+
+ let separator
+ if (id.includes('line') || id.includes('highway')) {
+ separator = ' '
+ } else {
+ separator = '\n'
+ }
+
+ // the default is "en", not "int"
+ let parts
+ if (langCode === 'int') {
+ parts = [['get', 'name']]
+ } else {
+ parts = [
+ ['get', `name_${langCode}`],
+ ['get', `name:${langCode}`],
+ ['get', 'name'],
+ ]
+ }
+
+ layer.layout['text-field'] = [
+ 'case',
+ ['has', 'name:nonlatin'],
+ ['concat', ['get', 'name:latin'], separator, ['get', 'name:nonlatin']],
+ ['coalesce', ...parts],
+ ]
+ }
+}
+
+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.\n\nExamples:\n• #en → English\n• #de → German\n• #fr → French\n• #es → Spanish\n• #int → International names\n\nDefault language set to: en (English)')
+ window.location.hash = '#es'
+ // The hashchange event will trigger applyLanguage()
+ } else {
+ applyLanguage()
+ }
+})
+
+// Listen for hash changes in URL
+window.addEventListener('hashchange', () => {
+ applyLanguage()
+})