diff --git a/app.js b/app.js index 0fd4083..ec5160a 100644 --- a/app.js +++ b/app.js @@ -53,6 +53,15 @@ document.addEventListener('DOMContentLoaded', async () => { // Add Zoom Control to the right L.control.zoom({ position: 'topright' }).addTo(state.map); + const updateZoomClass = () => { + const zoom = state.map.getZoom(); + const container = state.map.getContainer(); + container.className = container.className.replace(/\bzoom-\d+\b/g, ''); + container.classList.add(`zoom-${zoom}`); + }; + state.map.on('zoomend', updateZoomClass); + updateZoomClass(); + // Standard Tile Layer (requires Internet, but we provide it as default) // In a real offline scenario, this would be a local MBTiles layer or similar. L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { @@ -1371,11 +1380,27 @@ document.addEventListener('DOMContentLoaded', async () => { if (notiz) popup += `Notiz: ${notiz}
`; popup += `
`; for (let key in props) { - if (['VNA', 'GNA', 'status', 'notiz', 'id'].includes(key)) continue; + if (['VNA', 'GNA', 'vorname', 'nachname', 'status', 'notiz', 'id', 'FLN', 'ZAE', 'NEN', 'FSK'].includes(key)) continue; const val = props[key]; if (val !== null && val !== undefined) popup += `${key}: ${val}
`; } layer.bindPopup(popup); + + // NEU: Tooltip-Label für die Karte (wird per CSS gesteuert erst bei Zoom eingeblendet) + const flur = props.FLN || '-'; + const fst = props.ZAE ? (props.NEN ? `${props.ZAE}/${props.NEN}` : props.ZAE) : '-'; + const labelContent = ` +
+ ${lastName}, ${firstName}
+ Flur ${flur}, Flst. ${fst} +
+ `; + layer.bindTooltip(labelContent, { + permanent: true, + direction: 'center', + className: 'alkis-label', + offset: [0, 0] + }); } } }); diff --git a/server.js b/server.js index 0dc26cb..ee4eea4 100644 --- a/server.js +++ b/server.js @@ -227,6 +227,9 @@ app.get('/api/layers/alkis', async (req, res) => { 'ORP', "ORP", 'STR', "STR", 'HSN', "HSN", + 'FLN', "FLN", + 'ZAE', "FSN__ZAE", + 'NEN', "FSN__NEN", 'status', status, 'notiz', notiz ) diff --git a/style.css b/style.css index b0e3519..8aabade 100644 --- a/style.css +++ b/style.css @@ -648,6 +648,54 @@ body { width: 100%; } +/* ALKIS Labels */ +.alkis-label { + background: transparent !important; + border: none !important; + box-shadow: none !important; + padding: 0 !important; + display: none; + pointer-events: none !important; +} + +.alkis-label::before { + display: none !important; +} + +/* Show labels at Zoom 16 and above */ +.zoom-16 .alkis-label, +.zoom-17 .alkis-label, +.zoom-18 .alkis-label, +.zoom-19 .alkis-label { + display: block; +} + +.alkis-label-inner { + text-align: center; + background: rgba(0, 30, 46, 0.6); + backdrop-filter: blur(2px); + color: white; + padding: 2px 6px; + border-radius: 4px; + border: 1px solid rgba(151, 197, 212, 0.2); + font-size: 0.7rem; + line-height: 1.1; + pointer-events: none; + text-shadow: 1px 1px 2px rgba(0,0,0,0.8); + white-space: nowrap; +} + +.alkis-label-inner .owner-name { + font-weight: bold; + font-size: 0.75rem; + color: var(--primary-color); +} + +.alkis-label-inner .parcel-info { + font-size: 0.65rem; + opacity: 0.8; +} + /* Status Indicators (UI & Legend) */ .status-gbr { color: rgb(115, 176, 118);