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