https://www.altes-koeln.de/index.php?action=history&feed=atom&title=Widget%3AKoelnGebietsentwicklung
Widget:KoelnGebietsentwicklung - Versionsgeschichte
2026-05-13T11:44:47Z
Versionsgeschichte dieser Seite in Altes Köln
MediaWiki 1.43.6
https://www.altes-koeln.de/index.php?title=Widget:KoelnGebietsentwicklung&diff=92660&oldid=prev
HorstR am 18. März 2026 um 10:48 Uhr
2026-03-18T10:48:44Z
<p></p>
<a href="https://www.altes-koeln.de/index.php?title=Widget:KoelnGebietsentwicklung&diff=92660&oldid=92614">Änderungen zeigen</a>
HorstR
https://www.altes-koeln.de/index.php?title=Widget:KoelnGebietsentwicklung&diff=92614&oldid=prev
HorstR: Die Seite wurde neu angelegt: „<noinclude> Karte – Köln Gebietsentwicklung </noinclude> <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> #map-frame-gebiet { margin:10px; border-ra…“
2026-03-09T11:03:33Z
<p>Die Seite wurde neu angelegt: „<noinclude> Karte – Köln Gebietsentwicklung </noinclude> <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> #map-frame-gebiet { margin:10px; border-ra…“</p>
<p><b>Neue Seite</b></p><div><noinclude><br />
Karte – Köln Gebietsentwicklung<br />
</noinclude><br />
<br />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/><br />
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/><br />
<br />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script><br />
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script><br />
<br />
<style><br />
#map-frame-gebiet {<br />
margin:10px;<br />
border-radius:12px;<br />
overflow:hidden;<br />
box-shadow:0 5px 15px rgba(0,0,0,0.25);<br />
}<br />
<br />
#map-gebiet {<br />
height:80vh;<br />
width:100%;<br />
}<br />
<br />
.gebiet-header {<br />
text-align:center;<br />
padding:14px;<br />
font-size:22px;<br />
font-weight:600;<br />
color:#2c3e50;<br />
}<br />
<br />
.gebiet-footer {<br />
text-align:center;<br />
margin-top:8px;<br />
font-size:14px;<br />
}<br />
<br />
.gebiet-footer a{<br />
color:#d62828;<br />
text-decoration:none;<br />
}<br />
<br />
.leaflet-popup-content{<br />
font-size:14px;<br />
}<br />
</style><br />
<br />
<div class="gebiet-header"><br />
Köln – Gebietsentwicklung<br />
</div><br />
<br />
<div id="map-frame-gebiet"><br />
<div id="map-gebiet"></div><br />
</div><br />
<br />
<div class="gebiet-footer"><br />
<a href="https://hermsdoerfer.familyds.com/" target="_blank"><br />
© Dietmar Hermsdörfer<br />
</a><br />
</div><br />
<br />
<script><br />
(function(){<br />
<br />
const map = L.map('map-gebiet',{<br />
tap: window.screen.width < 600<br />
}).setView([50.95,6.95],11);<br />
<br />
const osm = L.tileLayer(<br />
'https://tile.openstreetmap.org/{z}/{x}/{y}.png',<br />
{maxZoom:19, attribution:'© OpenStreetMap'}<br />
).addTo(map);<br />
<br />
const satellit = L.tileLayer(<br />
'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',<br />
{maxZoom:18, attribution:'Tiles © Esri'}<br />
);<br />
<br />
const groupEntwicklung = L.layerGroup().addTo(map);<br />
const groupStaende = L.layerGroup();<br />
<br />
const baseMaps = {<br />
"OpenStreetMap":osm,<br />
"Satellit":satellit<br />
};<br />
<br />
const overlayMaps = {<br />
"Gebietsentwicklung":groupEntwicklung,<br />
"Gebietsstände":groupStaende<br />
};<br />
<br />
L.control.layers(baseMaps,overlayMaps,{collapsed:false}).addTo(map);<br />
<br />
L.Control.geocoder({<br />
position:'topleft',<br />
placeholder:'Ort suchen...'<br />
}).addTo(map);<br />
<br />
const styleRed={<br />
radius:7,<br />
fillColor:"#e63946",<br />
color:"#fff",<br />
weight:1,<br />
fillOpacity:0.9<br />
};<br />
<br />
const styleBlue={<br />
radius:7,<br />
fillColor:"#0077b6",<br />
color:"#fff",<br />
weight:1,<br />
fillOpacity:0.9<br />
};<br />
<br />
let selectedLayer=null;<br />
<br />
function createPopup(props,type){<br />
<br />
const name=props.NAME || props.Name || "Unbekannt";<br />
<br />
let content='<div style="line-height:1.6;"><b style="font-size:16px;">'+name+'</b><hr>';<br />
<br />
if(type==="entwicklung"){<br />
content+='<b>Datum:</b> '+(props.DATUM||"-")+<br />
'<br><b>Erweiterung:</b> '+(props.ERWEITERUNG||"-")+<br />
'<br><b>Fläche:</b> '+(props.FLAECHE||"-")+' km²';<br />
}else{<br />
content+='<b>Fläche:</b> '+(props.Flaeche||props.FLAECHE||"-")+' km²';<br />
}<br />
<br />
content+='</div>';<br />
<br />
return content;<br />
}<br />
<br />
function loadGeoJSON(url,group,style,type){<br />
<br />
fetch(url)<br />
.then(res=>res.json())<br />
.then(data=>{<br />
<br />
const geoLayer=L.geoJSON(data,{<br />
<br />
pointToLayer:(feature,latlng)=>L.circleMarker(latlng,style),<br />
<br />
onEachFeature:(feature,layer)=>{<br />
<br />
layer.bindPopup(createPopup(feature.properties,type),{maxWidth:250});<br />
<br />
layer.on({<br />
<br />
mouseover:e=>{<br />
if(e.target!==selectedLayer)<br />
e.target.setRadius(10);<br />
},<br />
<br />
mouseout:e=>{<br />
if(e.target!==selectedLayer)<br />
geoLayer.resetStyle(e.target);<br />
},<br />
<br />
click:e=>{<br />
<br />
[groupEntwicklung,groupStaende].forEach(g=>{<br />
if(g.mainLayer) g.mainLayer.resetStyle();<br />
});<br />
<br />
selectedLayer=e.target;<br />
<br />
selectedLayer.setStyle({<br />
radius:12,<br />
fillColor:"#ffbe0b",<br />
weight:3,<br />
color:"#000"<br />
});<br />
<br />
if(selectedLayer.bringToFront)<br />
selectedLayer.bringToFront();<br />
<br />
L.DomEvent.stopPropagation(e);<br />
}<br />
<br />
});<br />
<br />
}<br />
<br />
}).addTo(group);<br />
<br />
group.mainLayer=geoLayer;<br />
<br />
});<br />
<br />
}<br />
<br />
loadGeoJSON('/alteskoeln/Gebietsentwicklung.geojson',groupEntwicklung,styleRed,'entwicklung');<br />
loadGeoJSON('/alteskoeln/Gebietsstaende.geojson',groupStaende,styleBlue,'staende');<br />
<br />
map.on('click',()=>{<br />
<br />
if(selectedLayer){<br />
<br />
if(groupEntwicklung.mainLayer) groupEntwicklung.mainLayer.resetStyle();<br />
if(groupStaende.mainLayer) groupStaende.mainLayer.resetStyle();<br />
<br />
selectedLayer=null;<br />
<br />
}<br />
<br />
});<br />
<br />
})();<br />
</script></div>
HorstR