mirror of
https://github.com/hyperknot/openfreemap.git
synced 2026-05-21 14:02:15 +00:00
90 lines
2.3 KiB
JavaScript
90 lines
2.3 KiB
JavaScript
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'
|
|
}
|
|
|
|
const nameUnderscore = `name_${langCode}`
|
|
const nameColon = `name:${langCode}`
|
|
|
|
// Construct parts with exactly name_ and name: versions only (no int special case, no 'name' fallback)
|
|
const parts = [
|
|
['get', nameUnderscore],
|
|
['get', nameColon],
|
|
]
|
|
|
|
layer.layout['text-field'] = [
|
|
'case',
|
|
['has', 'name:nonlatin'],
|
|
['concat', ['get', 'name:latin'], separator, ['get', 'name:nonlatin']],
|
|
['coalesce', ...parts],
|
|
]
|
|
|
|
// Set color to red if both exist and are different, black otherwise
|
|
if (!layer.paint) layer.paint = {}
|
|
|
|
layer.paint['text-color'] = [
|
|
'case',
|
|
// If both name_ and name: exist and are different, show red
|
|
[
|
|
'all',
|
|
['has', nameUnderscore],
|
|
['has', nameColon],
|
|
['!=', ['get', nameUnderscore], ['get', nameColon]]
|
|
],
|
|
'#ff0000', // Red when different
|
|
'#000000' // Black when same or only one exists
|
|
]
|
|
}
|
|
}
|
|
|
|
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 if name_xx and name:xx differ')
|
|
window.location.hash = '#en'
|
|
// The hashchange event will trigger applyLanguage()
|
|
} else {
|
|
applyLanguage()
|
|
}
|
|
})
|
|
|
|
// Listen for hash changes in URL
|
|
window.addEventListener('hashchange', () => {
|
|
applyLanguage()
|
|
})
|