|
|
| Zeile 1: |
Zeile 1: |
| <noinclude>
| | widget:WWW-Siedlungen |
| Karte – Köln Siedlungsentwicklung
| |
| </noinclude>
| |
| | |
| <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>
| |
| #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>
| |
| | |
| <p style="text-align:center;font-weight:bold;font-size:20px;">
| |
| Köln – Siedlungsentwicklung
| |
| </p>
| |
| | |
| <div id="map-siedlung"></div>
| |
| | |
| <div style="text-align:center; margin-top:8px;">
| |
| <input type="range" id="yearSlider" min="800" max="2026" value="2026" step="1" style="width:80%;">
| |
| <div id="yearLabel" style="margin-top:4px; font-weight:bold;">Jahr: 2026</div>
| |
| </div>
| |
| | |
| <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='<b>Zeit (Jahr)</b><br>'+
| |
| intervals.map(i =>
| |
| '<i style="background:'+i.color+'"></i>'+i.from+" – "+i.to+"<br>"
| |
| ).join('');
| |
| | |
| return div;
| |
| | |
| };
| |
| | |
| legend.addTo(map);
| |
| | |
| })();
| |
| </script>
| |
