Widget:KoelnGebietsentwicklung

Karte – Köln Gebietsentwicklung

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/> <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>

<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script> <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>

<style>

1. map-frame-gebiet {

margin:10px; border-radius:12px; overflow:hidden; box-shadow:0 5px 15px rgba(0,0,0,0.25); }

1. map-gebiet {

height:80vh; width:100%; }

.gebiet-header { text-align:center; padding:14px; font-size:22px; font-weight:600; color:#2c3e50; }

.gebiet-footer { text-align:center; margin-top:8px; font-size:14px; }

.gebiet-footer a{ color:#d62828; text-decoration:none; }

.leaflet-popup-content{ font-size:14px; } </style>

Köln – Gebietsentwicklung

<a href="https://hermsdoerfer.familyds.com/" target="_blank"> © Dietmar Hermsdörfer </a>

<script> (function(){

const map = L.map('map-gebiet',{ tap: window.screen.width < 600 }).setView([50.95,6.95],11);

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

const groupEntwicklung = L.layerGroup().addTo(map); const groupStaende = L.layerGroup();

const baseMaps = { "OpenStreetMap":osm, "Satellit":satellit };

const overlayMaps = { "Gebietsentwicklung":groupEntwicklung, "Gebietsstände":groupStaende };

L.control.layers(baseMaps,overlayMaps,{collapsed:false}).addTo(map);

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

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;

function createPopup(props,type){

const name=props.NAME || props.Name || "Unbekannt";

let content='

'+name+'

---

';

if(type==="entwicklung"){ content+='Datum: '+(props.DATUM||"-")+ '
Erweiterung: '+(props.ERWEITERUNG||"-")+ '
Fläche: '+(props.FLAECHE||"-")+' km²'; }else{ content+='Fläche: '+(props.Flaeche||props.FLAECHE||"-")+' km²'; }

content+='

';

return content; }

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=>{

[groupEntwicklung,groupStaende].forEach(g=>{ if(g.mainLayer) g.mainLayer.resetStyle(); });

selectedLayer=e.target;

selectedLayer.setStyle({ radius:12, fillColor:"#ffbe0b", weight:3, color:"#000" });

if(selectedLayer.bringToFront) selectedLayer.bringToFront();

L.DomEvent.stopPropagation(e); }

});

}

}).addTo(group);

group.mainLayer=geoLayer;

});

}

loadGeoJSON('/alteskoeln/Gebietsentwicklung.geojson',groupEntwicklung,styleRed,'entwicklung'); loadGeoJSON('/alteskoeln/Gebietsstaende.geojson',groupStaende,styleBlue,'staende');

map.on('click',()=>{

if(selectedLayer){

if(groupEntwicklung.mainLayer) groupEntwicklung.mainLayer.resetStyle(); if(groupStaende.mainLayer) groupStaende.mainLayer.resetStyle();

selectedLayer=null;

}

});

})(); </script>