Widget:KoelnGebietsentwicklung

<!DOCTYPE html> <html> <head> <title>Gebietsentwicklung</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<style>

       body { padding:10px; font-family:sans-serif; }

       #map-frame { border-radius:8px; position: relative;}

#map { width: 100%; height: 88vh; /* größere Karte */ border: 3px solid black; border-radius: 10px; }

#map-title { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 1000; background: rgba(255,255,255,0.85); padding: 6px 14px; font-weight: bold; font-size: 18px; border-radius: 6px; box-shadow: 0 0 6px rgba(0,0,0,0.3); }

#map-footer { position: absolute; bottom: 10px; left: 10px; z-index: 1000; background: rgba(255,255,255,0.85); padding: 4px 10px; border-radius: 6px; font-size: 13px; box-shadow: 0 0 6px rgba(0,0,0,0.3); }

#map-footer a { color: red; text-decoration: none; font-weight: bold; }

</style> </head> <body>

Gebietsentwicklung

// Basiskarten const osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© OpenStreetMap' }).addTo(map);

const satellit = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { maxZoom: 18, attribution: 'Tiles © Esri' });

// Layer-Gruppen für die Auswahl-Buttons const groupEntwicklung = L.layerGroup().addTo(map); // Bleibt sichtbar const groupStaende = L.layerGroup(); // NICHT direkt zur Karte hinzufügen

// Layer Auswahl Menü (hier wird gesteuert, was angehakt ist) const baseMaps = { "OpenStreetMap": osm, "Satellit": satellit }; const overlayMaps = { "Gebietsentwicklung": groupEntwicklung, "Gebietsstände": groupStaende }; L.control.layers(baseMaps, overlayMaps, { collapsed: false }).addTo(map);

// Geocoder L.Control.geocoder({ position: 'topleft', placeholder: 'Ort suchen...' }).addTo(map);

// Stile const styleRed = { radius: 7, fillColor: "#e63946", color: "#fff", weight: 1, fillOpacity: 0.9 }; const styleBlue = { radius: 7, fillColor: "#0077b6", color: "#fff", weight: 1, fillOpacity: 0.9 };

let selectedLayer = null;

// Popup Logik function createPopup(props, type) { // Holt den Namen egal ob er 'NAME' oder 'Name' geschrieben wird const name = props.NAME || props.Name || "Unbekannt";

let content = `

${name}

`;

if (type === 'entwicklung') { content += `Wann ${props.DATUM || "-"}
Info: ${props.ERWEITERUNG || "-"}
Fläche: ${props.FLAECHE || "-"} km²`; } else { // Gebietsstände: Name ist bereits oben, hier nur noch die restlichen Infos content += `Fläche: ${props.Flaeche || props.FLAECHE || "-"} km²`; }

content += `

`;

return content; }

// Lade-Funktion function loadGeoJSON(url, group, style, type) { fetch(url) .then(res => res.json()) .then(data => { const geoLayer = L.geoJSON(data, { pointToLayer: (feature, latlng) => L.circleMarker(latlng, style), onEachFeature: (feature, layer) => { layer.bindPopup(createPopup(feature.properties, type), { maxWidth: 250 });

layer.on({ mouseover: e => { if (e.target !== selectedLayer) e.target.setRadius(10); }, mouseout: e => { if (e.target !== selectedLayer) geoLayer.resetStyle(e.target); }, click: e => { // Alle Layer zurücksetzen [groupEntwicklung, groupStaende].forEach(group => { if (group.mainLayer) group.mainLayer.resetStyle(); });

selectedLayer = e.target; selectedLayer.setStyle({ radius: 12, fillColor: "yellow", weight: 3, color: "cyan" });

if (selectedLayer.bringToFront) selectedLayer.bringToFront(); L.DomEvent.stopPropagation(e); } }); } }).addTo(group);

// Wichtig: Referenz für Reset speichern group.mainLayer = geoLayer; }) .catch(error => console.error("Fehler bei " + url, error)); }

// Daten laden (Dateien müssen im selben Ordner wie das HTML liegen) loadGeoJSON('/alteskoeln/Gebietsentwicklung.geojson', groupEntwicklung, styleRed, 'entwicklung'); loadGeoJSON('/alteskoeln/Gebietsstaende.geojson', groupStaende, styleBlue, 'staende');

// Reset Klick map.on('click', () => { if (selectedLayer) { if(groupEntwicklung.mainLayer) groupEntwicklung.mainLayer.resetStyle(); if(groupStaende.mainLayer) groupStaende.mainLayer.resetStyle(); selectedLayer = null; } });

const resetControl = L.control({ position: 'topleft' });

</script> </body> </html>

Altes Köln

Widget:KoelnGebietsentwicklung