diff --git a/website/public/debug/lang/mix.html b/website/public/debug/lang/mix.html index 13d231f..d51d79a 100644 --- a/website/public/debug/lang/mix.html +++ b/website/public/debug/lang/mix.html @@ -7,9 +7,54 @@ - -
+ + +
+
+
+
+ + +
+ +
+ + +
+ +
+ + +
+
+
+
+ +
+ - + \ No newline at end of file diff --git a/website/public/debug/lang/mix.js b/website/public/debug/lang/mix.js index dd4528b..2bd7878 100644 --- a/website/public/debug/lang/mix.js +++ b/website/public/debug/lang/mix.js @@ -1,16 +1,59 @@ 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' +const line1Input = document.getElementById('line1') +const line2Input = document.getElementById('line2') +const langInput = document.getElementById('lang') + +// Parse URL search params to get line1 and line2 +function parseParams() { + const params = new URLSearchParams(window.location.search) + return { + line1: params.get('line1') || 'underscore,colon,name,latin', + line2: params.get('line2') || 'nonlatin', + lang: params.get('lang') || 'en', + } +} + +// Update URL search params +function updateParams(line1, line2, lang) { + const url = new URL(window.location) + url.searchParams.set('line1', line1) + url.searchParams.set('line2', line2) + url.searchParams.set('lang', lang) + window.history.replaceState({}, '', url) +} + +// Build field accessor from config string +function buildFieldAccessor(config, langCode) { + const parts = [] + const fields = config.split(',').map(f => f.trim()).filter(f => f) + + for (const field of fields) { + if (field === 'underscore') { + parts.push(['get', `name_${langCode}`]) + } else if (field === 'colon') { + parts.push(['get', `name:${langCode}`]) + } else if (field === 'name') { + parts.push(['get', 'name']) + } else if (field === 'latin') { + parts.push(['get', 'name:latin']) + } else if (field === 'nonlatin') { + parts.push(['get', 'name:nonlatin']) + } else { + // Custom field name + parts.push(['get', field]) + } } + return parts.length > 0 ? ['coalesce', ...parts] : ['get', 'name'] +} + +function modifyStyle({ style, line1Config, line2Config, langCode }) { for (const layer of style.layers) { if (layer.source !== 'openmaptiles') continue if (!layer.layout) continue @@ -18,49 +61,80 @@ function modifyStyle({ style, langCode }) { const textField = layer.layout['text-field'] if (!textField) continue - // highway numbers, etc. - skip ref-only fields + // Skip ref-only fields if (JSON.stringify(textField) === JSON.stringify(['to-string', ['get', 'ref']])) continue - const nameUnderscore = `name_${langCode}` - const nameColon = `name:${langCode}` + const id = layer.id + let separator = id.includes('line') || id.includes('highway') ? ' ' : '\n' - // Always display both values - layer.layout['text-field'] = ['concat', ['get', nameUnderscore], '\n', ['get', nameColon]] + const line1Expr = buildFieldAccessor(line1Config, langCode) + const line2Expr = buildFieldAccessor(line2Config, langCode) - // 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) - ] + // Combine both lines + layer.layout['text-field'] = ['concat', line1Expr, separator, line2Expr] } } -function applyLanguage() { - const hash = window.location.hash.substring(1) // Remove the '#' - const langCode = hash || null +function applyConfiguration() { + const { line1, line2, lang } = parseParams() + + if (!map.getStyle()) return const style = map.getStyle() - modifyStyle({ style, langCode }) + modifyStyle({ style, line1Config: line1, line2Config: line2, langCode: lang }) 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() - } +function syncInputsFromParams() { + const { line1, line2, lang } = parseParams() + line1Input.value = line1 + line2Input.value = line2 + langInput.value = lang +} + +// Update params when inputs change +line1Input.addEventListener('input', () => { + updateParams(line1Input.value, line2Input.value, langInput.value) }) -// Listen for hash changes in URL -window.addEventListener('hashchange', () => { - applyLanguage() +line2Input.addEventListener('input', () => { + updateParams(line1Input.value, line2Input.value, langInput.value) }) + +langInput.addEventListener('input', () => { + updateParams(line1Input.value, line2Input.value, langInput.value) +}) + +// Apply configuration when Enter is pressed +line1Input.addEventListener('keypress', (e) => { + if (e.key === 'Enter') applyConfiguration() +}) + +line2Input.addEventListener('keypress', (e) => { + if (e.key === 'Enter') applyConfiguration() +}) + +langInput.addEventListener('keypress', (e) => { + if (e.key === 'Enter') applyConfiguration() +}) + +map.on('load', () => { + // Initialize params if not present + const params = new URLSearchParams(window.location.search) + if (!params.has('line1') || !params.has('line2') || !params.has('lang')) { + const url = new URL(window.location) + if (!params.has('line1')) url.searchParams.set('line1', 'underscore,colon,name,latin') + if (!params.has('line2')) url.searchParams.set('line2', 'nonlatin') + if (!params.has('lang')) url.searchParams.set('lang', 'en') + window.history.replaceState({}, '', url) + } + + syncInputsFromParams() + applyConfiguration() +}) + +// Listen for URL changes (e.g., browser back/forward) +window.addEventListener('popstate', () => { + syncInputsFromParams() + applyConfiguration() +}) \ No newline at end of file