mirror of
https://github.com/hyperknot/openfreemap.git
synced 2026-05-21 05:52:17 +00:00
readonly fields
This commit is contained in:
@@ -21,6 +21,13 @@
|
||||
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"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
id="line1-expr"
|
||||
readonly
|
||||
class="w-full px-3 py-1 text-xs border border-gray-700 rounded bg-gray-950 text-gray-500 font-mono mt-1"
|
||||
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex-1">
|
||||
@@ -32,6 +39,13 @@
|
||||
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"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
id="line2-expr"
|
||||
readonly
|
||||
class="w-full px-3 py-1 text-xs border border-gray-700 rounded bg-gray-950 text-gray-500 font-mono mt-1"
|
||||
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="w-24">
|
||||
@@ -89,4 +103,4 @@
|
||||
<script src="https://unpkg.com/maplibre-gl/dist/maplibre-gl.js"></script>
|
||||
<script src="mix.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@@ -13,6 +13,8 @@ const map = new maplibregl.Map({
|
||||
const line1Input = document.getElementById('line1')
|
||||
const line2Input = document.getElementById('line2')
|
||||
const langInput = document.getElementById('lang')
|
||||
const line1ExprInput = document.getElementById('line1-expr')
|
||||
const line2ExprInput = document.getElementById('line2-expr')
|
||||
|
||||
map.on('load', () => {
|
||||
const params = new URLSearchParams(window.location.search)
|
||||
@@ -41,6 +43,7 @@ function initializeInputListeners() {
|
||||
|
||||
const handleInput = () => {
|
||||
updateParamsFromInputs()
|
||||
updateExpressionDisplays()
|
||||
debouncedApplyConfig()
|
||||
}
|
||||
|
||||
@@ -88,9 +91,10 @@ function applyConfiguration() {
|
||||
style,
|
||||
line1Config: line1 ?? '',
|
||||
line2Config: line2 ?? '',
|
||||
langCode: lang || 'en',
|
||||
langCode: lang,
|
||||
})
|
||||
map.setStyle(style, { diff: true })
|
||||
updateExpressionDisplays()
|
||||
}
|
||||
|
||||
function syncInputsFromParams() {
|
||||
@@ -113,6 +117,17 @@ function updateParamsFromInputs() {
|
||||
window.history.replaceState({}, '', newUrl)
|
||||
}
|
||||
|
||||
function updateExpressionDisplays() {
|
||||
const { line1, line2, lang } = parseParams()
|
||||
const langCode = lang
|
||||
|
||||
const line1Expr = buildFieldAccessor(line1 ?? '', langCode)
|
||||
const line2Expr = buildFieldAccessor(line2 ?? '', langCode)
|
||||
|
||||
line1ExprInput.value = line1Expr ? JSON.stringify(line1Expr) : ''
|
||||
line2ExprInput.value = line2Expr ? JSON.stringify(line2Expr) : ''
|
||||
}
|
||||
|
||||
// ============================================
|
||||
// 4. STYLE MODIFICATION
|
||||
// ============================================
|
||||
@@ -165,7 +180,7 @@ function parseParams() {
|
||||
return {
|
||||
line1: params.get('line1'),
|
||||
line2: params.get('line2'),
|
||||
lang: params.get('lang'),
|
||||
lang: params.get('lang') || 'en',
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user