Feat: Add owner and parcel labels for ALKIS layer on high zoom levels
Deploy Bürgerwind / deploy (push) Successful in 16s Details

This commit is contained in:
Johannes Baumeister 2026-05-11 09:08:09 +02:00
parent f9c0532140
commit b07a0ac88a
3 changed files with 77 additions and 1 deletions

27
app.js
View File

@ -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 += `<b>Notiz:</b> ${notiz}<br>`;
popup += `<hr style="margin: 5px 0; border: 0; border-top: 1px solid #444;">`;
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 += `<b>${key}:</b> ${val}<br>`;
}
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 = `
<div class="alkis-label-inner">
<span class="owner-name">${lastName}, ${firstName}</span><br>
<span class="parcel-info">Flur ${flur}, Flst. ${fst}</span>
</div>
`;
layer.bindTooltip(labelContent, {
permanent: true,
direction: 'center',
className: 'alkis-label',
offset: [0, 0]
});
}
}
});

View File

@ -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
)

View File

@ -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);