mirror of
https://github.com/hyperknot/openfreemap.git
synced 2026-05-21 05:52:17 +00:00
work
This commit is contained in:
Zsolt Ero
@@ -7,9 +7,54 @@
|
||||
<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>
|
||||
<body class="flex flex-col h-screen">
|
||||
<!-- UI Panel -->
|
||||
<div class="bg-gray-900 border-b border-gray-700 shadow-md">
|
||||
<div class="max-w-7xl mx-auto px-4 py-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex-1">
|
||||
<label for="line1" class="block text-xs font-medium text-gray-400 mb-1">
|
||||
Line 1
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="line1"
|
||||
class="w-full px-3 py-1.5 text-sm border border-gray-600 rounded bg-gray-800 text-gray-100 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all font-mono"
|
||||
placeholder="underscore,colon,name,latin"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
<label for="line2" class="block text-xs font-medium text-gray-400 mb-1">
|
||||
Line 2
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="line2"
|
||||
class="w-full px-3 py-1.5 text-sm border border-gray-600 rounded bg-gray-800 text-gray-100 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all font-mono"
|
||||
placeholder="nonlatin"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="w-24">
|
||||
<label for="lang" class="block text-xs font-medium text-gray-400 mb-1">
|
||||
Lang
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="lang"
|
||||
class="w-full px-3 py-1.5 text-sm border border-gray-600 rounded bg-gray-800 text-gray-100 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all font-mono text-center"
|
||||
placeholder="en"
|
||||
maxlength="5"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="map" class="flex-1"></div>
|
||||
|
||||
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
|
||||
<script src="mix.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@@ -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()
|
||||
})
|
||||
Reference in New Issue
Block a user