mirror of
https://github.com/hyperknot/openfreemap.git
synced 2026-05-21 14:02:15 +00:00
work
This commit is contained in:
Zsolt Ero
15
website/public/debug/lang/mix.html
Normal file
15
website/public/debug/lang/mix.html
Normal file
@@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OpenFreeMap Debug</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||||
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map" class="w-full h-screen"></div>
|
||||
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
|
||||
<script src="mix.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
66
website/public/debug/lang/mix.js
Normal file
66
website/public/debug/lang/mix.js
Normal file
@@ -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()
|
||||
})
|
||||
15
website/public/debug/lang/params.html
Normal file
15
website/public/debug/lang/params.html
Normal file
@@ -0,0 +1,15 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>OpenFreeMap Debug</title>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||||
<link href="https://unpkg.com/maplibre-gl/dist/maplibre-gl.css" rel="stylesheet" />
|
||||
</head>
|
||||
<body>
|
||||
<div id="map" class="w-full h-screen"></div>
|
||||
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
|
||||
<script src="params.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
78
website/public/debug/lang/params.js
Normal file
78
website/public/debug/lang/params.js
Normal file
@@ -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()
|
||||
})
|
||||
Reference in New Issue
Block a user