Widget:KoelnWasWarWoPro

Karte – Köln Was War Wo

<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-www-pro{

width:100%; height:80vh; border:3px solid black; border-radius:10px; }

.www-controls{ margin-top:8px; padding:6px; background:#f3f3f3; border-radius:6px; }

</style>

Köln – Was War Wo

Kategorien:

<label><input type="checkbox" class="catFilter" value="verteidigen" checked> Verteidigen & Schützen</label>
<label><input type="checkbox" class="catFilter" value="arbeiten" checked> Arbeiten & Transportieren</label>
<label><input type="checkbox" class="catFilter" value="beten" checked> Beten & Heilen</label>
<label><input type="checkbox" class="catFilter" value="ackern" checked> Ackern & Mahlen</label>
<label><input type="checkbox" class="catFilter" value="leben" checked> Leben & Lernen</label>

Zeitraum:

<input type="range" id="yearSliderWWW" min="800" max="2000" value="2000" step="10" style="width:80%;"> bis 2000

<a href="https://hermsdoerfer.familyds.com/" target="_blank" style="text-decoration:none;font-size:15px;color:red;"> © Dietmar Hermsdörfer </a>

<script> (function(){

var map=L.map('map-www-pro',{ preferCanvas:true }).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', placeholder:"Suche ..." }).addTo(map);

var geojsonLayer;

var colors={ verteidigen:"blue", arbeiten:"gray", beten:"purple", ackern:"green", leben:"orange" };

function normalizeGroup(g){

g=(g || "").toLowerCase();

if(g.includes("verteid")) return "verteidigen"; if(g.includes("arbeit")) return "arbeiten"; if(g.includes("beten")) return "beten"; if(g.includes("acker")) return "ackern"; if(g.includes("leben")) return "leben";

return "other";

}

fetch('/alteskoeln/WWW.geojson')

.then(res=>res.json())

.then(data=>{

geojsonLayer=L.geoJSON(data,{

renderer:L.canvas(),

style:function(feature){

var g=normalizeGroup(feature.properties.Gruppe);

return{ color:colors[g] || "black", weight:2, fillOpacity:0.4 };

},

onEachFeature:function(feature,layer){

var props=feature.properties;

var content= ""+(props.Name||"Unbekannt")+"
"+ ""+(props.Nutzung||"-")+"
"+ "Zeit: "+(props.von||"?")+" – "+(props.bis||"?")+"
"+

"

"+(props.Info||"")+"

";

if(props.Bild){

content+='<img src="'+props.Bild+'" style="width:100%;max-height:180px;object-fit:cover;">';

}

if(props.Link){

content+='
<a href="'+props.Link+'" target="_blank">➔ Mehr Infos</a>';

}

layer.bindPopup(content);

}

}).addTo(map);

updateFilters();

});

function updateFilters(){

if(!geojsonLayer) return;

var year=parseInt(document.getElementById("yearSliderWWW").value);

var activeCats=[];

document.querySelectorAll(".catFilter:checked") .forEach(cb=>activeCats.push(cb.value));

geojsonLayer.eachLayer(function(layer){

var p=layer.feature.properties;

var g=normalizeGroup(p.Gruppe);

var von=parseInt(p.von)||0; var bis=parseInt(p.bis)||9999;

var visible= activeCats.includes(g) && von<=year;

if(visible){

layer.setStyle({opacity:1,fillOpacity:0.4}); layer.addTo(map);

}else{

layer.setStyle({opacity:0,fillOpacity:0});

}

});

}

document.querySelectorAll(".catFilter") .forEach(cb=>cb.addEventListener("change",updateFilters));

var slider=document.getElementById("yearSliderWWW");

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

document.getElementById("yearLabelWWW").innerText="bis "+this.value;

updateFilters();

});

})(); </script>