Widget:WWW-Siedlungen

Leaflet Karte – Köln Siedlungsentwicklung

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/> <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

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

<style>

1. map-siedlung{width:100%;height:80vh;border:3px solid black;border-radius:10px;}

.legend{line-height:20px;background:white;padding:10px;border-radius:6px;box-shadow:0 0 10px rgba(0,0,0,0.3);font-size:14px;} .legend i{width:18px;height:18px;float:left;margin-right:8px;}

.popup-card{width:270px;font-family:sans-serif;} .popup-img{width:100%;max-height:220px;object-fit:cover;border-radius:8px 8px 0 0;cursor:pointer;} .popup-body{padding:10px;} .popup-title{font-size:18px;font-weight:bold;margin-bottom:4px;} .popup-sub{font-style:italic;color:#666;margin-bottom:6px;} .popup-info{font-size:13px;line-height:1.4;margin-bottom:8px;} .popup-text{font-size:14px;line-height:1.4;} .popup-link{margin-top:8px;font-weight:bold;} </style>

Köln – Siedlungsentwicklung

<input type="range" id="yearSlider" min="800" max="2026" value="2026" step="1" style="width:80%;">

Jahr: 2026

<script>

(function(){

var map = L.map('map-siedlung').setView([50.95,6.95],12);

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

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

L.control.layers({"OpenStreetMap":osm,"Satellit":satellite}).addTo(map);

L.Control.geocoder({ position:'topleft', defaultMarkGeocode:true, placeholder:"Suche ..." }).addTo(map);

var intervals=[ {from:50,to:949,color:'#ffffcc'}, {from:950,to:1105,color:'#ffeda0'}, {from:1106,to:1179,color:'#fed976'}, {from:1180,to:1879,color:'#feb24c'}, {from:1880,to:1918,color:'#fd8d3c'}, {from:1919,to:1945,color:'#fc4e2a'}, {from:1946,to:1959,color:'#e31a1c'}, {from:1960,to:1979,color:'#bd0026'}, {from:1980,to:1999,color:'#800026'}, {from:2000,to:2026,color:'#4d0018'} ];

function getColor(jahr){ for(var i=0;i<intervals.length;i++){ if(jahr>=intervals[i].from && jahr<=intervals[i].to){ return intervals[i].color; } } return "#999"; }

var geojsonLayer=null;

fetch("/alteskoeln/Siedlung.geojson") .then(res=>res.json()) .then(data=>{

geojsonLayer=L.geoJSON(data,{

style:function(feature){

var jahr=feature.properties.Jahr;

if(!jahr || jahr===0){ return {opacity:0,fillOpacity:0,stroke:false}; }

return { color:"#555", weight:1, fillColor:getColor(jahr), fillOpacity:0.7 };

}

}).addTo(map);

});

var yearSlider=document.getElementById("yearSlider"); var yearLabel=document.getElementById("yearLabel");

yearSlider.addEventListener("input",function(){

var year=parseInt(this.value); yearLabel.innerText="Jahr: "+year;

geojsonLayer.eachLayer(function(layer){

var featureJahr=layer.feature.properties.Jahr;

if(featureJahr && featureJahr<=year){ layer.setStyle({fillOpacity:0.7,opacity:1,stroke:true}); }else{ layer.setStyle({fillOpacity:0,opacity:0,stroke:false}); }

});

});

var legend=L.control({position:"bottomright"});

legend.onAdd=function(map){

var div=L.DomUtil.create("div","legend");

div.innerHTML='Zeit (Jahr)
'+ intervals.map(i => ''+i.from+" – "+i.to+"
" ).join();

return div;

};

legend.addTo(map);

})(); </script>