sysadmin/openfreemap
1
0
Fork 0
mirror of https://github.com/hyperknot/openfreemap.git synced 2026-05-21 14:02:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

work

Browse Source
This commit is contained in:
Zsolt Ero
2025-10-22 11:23:03 +02:00
parent b06f5f248f
commit b43a1f5830
4 changed files with 174 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
website/public/debug/lang/mix.html Normal file
View 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
View 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
View 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
View 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()
})