Widget:KoelnWasWarWoPro: Unterschied zwischen den Versionen

← Zum vorherigen Versionsunterschied Zum nächsten Versionsunterschied →

Version vom 9. März 2026, 18:53 Uhr

Leaflet Karte – Köln Was War Wo

<style>

map-frame-www{

border-radius:8px; }

map-www{

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

.legend{ display:none; line-height:18px; color:#555; background:rgba(255,255,255,0.85); padding:10px; border-radius:5px; box-shadow:0 0 15px rgba(0,0,0,0.2); }

.legend i{ width:18px; height:18px; float:left; margin-right:8px; opacity:0.7; }

.leaflet-popup-close-button{ font-size:24px !important; padding:6px !important; }

.www-title{ text-align:center; font-weight:bold; font-size:20px; }

.www-footer{ text-align:center; margin-top:10px; }

</style>

Köln – Was War Wo

var map=L.map('map-www',{ preferCanvas:true, tap:window.screen.width<600 }).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({ "Open Street Map":osm, "Satellit":satellite }).addTo(map);

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

function isPointInPolygon(latlng,layer){

var coords=layer.getLatLngs();

if(layer.feature.geometry.type==="MultiPolygon"){ return coords.some(part=>isInside(latlng,part[0])); }

return isInside(latlng,coords[0]); }

function isInside(latlng,poly){

var x=latlng.lat; var y=latlng.lng; var inside=false;

for(var i=0,j=poly.length-1;i<poly.length;j=i++){

var xi=poly[i].lat; var yi=poly[i].lng; var xj=poly[j].lat; var yj=poly[j].lng;

var intersect=((yi>y)!=(yj>y)) && (x<(xj-xi)*(y-yi)/(yj-yi)+xi);

if(intersect) inside=!inside;

}

return inside; }

map.whenReady(function(){

fetch('/alteskoeln/WasWarWo.geojson')

.then(response=>response.json())

.then(data=>{

var geojsonLayer=L.geoJSON(data,{

renderer:L.canvas(),

style:function(feature){

var colors={ 'Verteidigen & Schützen':'blue', 'Arbeiten & Transportieren':'gray', 'Beten & Heilen':'purple', 'Ackern & Mahlen':'green', 'Leben & Lernen':'orange' };

return{ color:colors[feature.properties.Gruppe] || "black", weight:2, fillOpacity:0.4 };

}

}).addTo(map);

map.on('click',function(e){

var clickedFeatures=[];

geojsonLayer.eachLayer(function(layer){

if(isPointInPolygon(e.latlng,layer)){ clickedFeatures.push(layer.feature.properties); }

});

if(clickedFeatures.length>0){

var content="

";

if(clickedFeatures.length>1){

content+="

"+

clickedFeatures.length+

" historische Orte hier

";

}

clickedFeatures.forEach(function(props){

var name=props.Name || "Unbekannt"; var nutzung=props.Nutzung || "-"; var von=props.von || "?"; var bis=props.bis || "?"; var info=props.Info || "";

var bild=props.Bild ? '<a href="'+props.Bild+'" target="_blank"><img src="'+props.Bild+'" loading="lazy" style="width:100%;max-height:180px;object-fit:cover;border-radius:6px;margin-top:6px;"></a>'

;

var link=props.Link ? '
<a href="'+props.Link+'" target="_blank" style="color:blue;">➔ Mehr Infos</a>'

;

content+=

"

"+

""+name+"
"+ ""+nutzung+"
"+ "Zeit: "+von+" bis "+bis+"
"+

"

"+info+"

"+

bild+link+

"

";

});

content+="

";

L.popup({ maxWidth:window.innerWidth<600?300:400, minWidth:window.innerWidth<600?220:250, autoPanPadding:[20,20] }) .setLatLng(e.latlng) .setContent(content) .openOn(map);

}

});

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

legend.onAdd=function(){

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

var grades=[ {label:'Verteidigen & Schützen',color:'blue'}, {label:'Arbeiten & Transportieren',color:'gray'}, {label:'Beten & Heilen',color:'purple'}, {label:'Ackern & Mahlen',color:'green'}, {label:'Leben & Lernen',color:'orange'} ];

div.innerHTML+='Kategorien
';

for(var i=0;i<grades.length;i++){ div.innerHTML+=' '+grades[i].label+'
'; }

return div; };

legend.addTo(map);

var toggleButton=L.control({position:'bottomright'});

toggleButton.onAdd=function(){

var btn=L.DomUtil.create('button','leaflet-bar');

btn.innerHTML='Legende';

btn.style.padding='5px 10px'; btn.style.cursor='pointer'; btn.style.backgroundColor='white'; btn.style.fontWeight='bold'; btn.style.border='2px solid rgba(0,0,0,0.2)'; btn.style.borderRadius='4px';

btn.onclick=function(e){

L.DomEvent.stopPropagation(e);

var legendDiv=document.querySelector('.legend');

legendDiv.style.display= (legendDiv.style.display==="none") ? "block" : "none";

};

return btn;

};

toggleButton.addTo(map);

})(); </script>

@@ Zeile 1: / Zeile 1: @@
 <noinclude>
-Leaflet Karte – Köln Was War Wo (Pro Version)
+Leaflet Karte – Köln Was War Wo
 </noinclude>
@@ Zeile 11: / Zeile 11: @@
 <style>
-#map-www-pro{
+#map-frame-www{
+border-radius:8px;
+}
+#map-www{
 width:100%;
 height:80vh;
@@ Zeile 18: / Zeile 22: @@
 }
-.www-controls{
+.legend{
-margin-top:8px;
+display:none;
-padding:6px;
+line-height:18px;
-background:#f3f3f3;
+color:#555;
-border-radius:6px;
+background:rgba(255,255,255,0.85);
+padding:10px;
+border-radius:5px;
+box-shadow:0 0 15px rgba(0,0,0,0.2);
 }
-</style>
+.legend i{
+width:18px;
+height:18px;
+float:left;
+margin-right:8px;
+opacity:0.7;
+}
-<p style="text-align:center;font-weight:bold;font-size:20px;">
+.leaflet-popup-close-button{
-Köln – Was War Wo
+font-size:24px !important;
-</p>
+padding:6px !important;
+}
-<div id="map-www-pro"></div>
+.www-title{
+text-align:center;
+font-weight:bold;
+font-size:20px;
+}
-<div class="www-controls">
+.www-footer{
+text-align:center;
+margin-top:10px;
+}
-<b>Kategorien:</b><br>
+</style>
-<label><input type="checkbox" class="catFilter" value="verteidigen" checked> Verteidigen & Schützen</label><br>
+<p class="www-title">
-<label><input type="checkbox" class="catFilter" value="arbeiten" checked> Arbeiten & Transportieren</label><br>
+Köln – Was War Wo
-<label><input type="checkbox" class="catFilter" value="beten" checked> Beten & Heilen</label><br>
+</p>
-<label><input type="checkbox" class="catFilter" value="ackern" checked> Ackern & Mahlen</label><br>
-<label><input type="checkbox" class="catFilter" value="leben" checked> Leben & Lernen</label>
-<br><br>
-<b>Zeitraum:</b><br>
-<input type="range" id="yearSliderWWW" min="800" max="2000" value="2000" step="10" style="width:80%;">
-<span id="yearLabelWWW">bis 2000</span>
+<div id="map-frame-www">
+<div id="map-www"></div>
 </div>
-<div style="text-align:center;margin-top:10px;">
+<div class="www-footer">
 <a href="https://hermsdoerfer.familyds.com/" target="_blank"
 style="text-decoration:none;font-size:15px;color:red;">
@@ Zeile 62: / Zeile 76: @@
 (function(){
-var map=L.map('map-www-pro',{
+var map=L.map('map-www',{
-preferCanvas:true
+preferCanvas:true,
+tap:window.screen.width<600
 }).setView([50.95,6.95],12);
@@ Zeile 77: / Zeile 92: @@
 L.control.layers({
-"OpenStreetMap":osm,
+"Open Street Map":osm,
 "Satellit":satellite
 }).addTo(map);
@@ Zeile 83: / Zeile 98: @@
 L.Control.geocoder({
 position:'topleft',
+defaultMarkGeocode:true,
 placeholder:"Suche ..."
 }).addTo(map);
-var geojsonLayer;
+function isPointInPolygon(latlng,layer){
+var coords=layer.getLatLngs();
+if(layer.feature.geometry.type==="MultiPolygon"){
+return coords.some(part=>isInside(latlng,part[0]));
+}
+return isInside(latlng,coords[0]);
+}
+function isInside(latlng,poly){
+var x=latlng.lat;
+var y=latlng.lng;
+var inside=false;
-var colors={
+for(var i=0,j=poly.length-1;i<poly.length;j=i++){
-verteidigen:"blue",
-arbeiten:"gray",
-beten:"purple",
-ackern:"green",
-leben:"orange"
-};
-function normalizeGroup(g){
+var xi=poly[i].lat;
+var yi=poly[i].lng;
+var xj=poly[j].lat;
+var yj=poly[j].lng;
-g=(g || "").toLowerCase();
+var intersect=((yi>y)!=(yj>y)) &&
+(x<(xj-xi)*(y-yi)/(yj-yi)+xi);
-if(g.includes("verteid")) return "verteidigen";
+if(intersect) inside=!inside;
-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";
+}
+return inside;
 }
+map.whenReady(function(){
 fetch('/alteskoeln/WasWarWo.geojson')
-.then(res=>res.json())
+.then(response=>response.json())
 .then(data=>{
-geojsonLayer=L.geoJSON(data,{
+var geojsonLayer=L.geoJSON(data,{
 renderer:L.canvas(),
@@ Zeile 122: / Zeile 150: @@
 style:function(feature){
-var g=normalizeGroup(feature.properties.Gruppe);
+var colors={
+'Verteidigen & Schützen':'blue',
+'Arbeiten & Transportieren':'gray',
+'Beten & Heilen':'purple',
+'Ackern & Mahlen':'green',
+'Leben & Lernen':'orange'
+};
 return{
-color:colors[g] || "black",
+color:colors[feature.properties.Gruppe] || "black",
 weight:2,
 fillOpacity:0.4
 };
-},
+}
+}).addTo(map);
+map.on('click',function(e){
+var clickedFeatures=[];
+geojsonLayer.eachLayer(function(layer){
+if(isPointInPolygon(e.latlng,layer)){
+clickedFeatures.push(layer.feature.properties);
+}
-onEachFeature:function(feature,layer){
+});
-var props=feature.properties;
+if(clickedFeatures.length>0){
-var content=
+var content="<div style='max-height:50vh;overflow-y:auto;min-width:200px;'>";
-"<b>"+(props.Name||"Unbekannt")+"</b><br>"+
-"<i>"+(props.Nutzung||"-")+"</i><br>"+
-"<b>Zeit:</b> "+(props.von||"?")+" – "+(props.bis||"?")+"<br>"+
-"<p>"+(props.Info||"")+"</p>";
-if(props.Bild){
+if(clickedFeatures.length>1){
-content+='<img src="'+props.Bild+'" style="width:100%;max-height:180px;object-fit:cover;">';
+content+="<div style='background:#eee;padding:8px;margin-bottom:12px;font-weight:bold;text-align:center;border-radius:6px;'>"+
+clickedFeatures.length+
+" historische Orte hier</div>";
 }
-if(props.Link){
+clickedFeatures.forEach(function(props){
-content+='<br><a href="'+props.Link+'" target="_blank">➔ Mehr Infos</a>';
+var name=props.Name || "Unbekannt";
+var nutzung=props.Nutzung || "-";
+var von=props.von || "?";
+var bis=props.bis || "?";
+var info=props.Info || "";
-}
+var bild=props.Bild ?
+'<a href="'+props.Bild+'" target="_blank"><img src="'+props.Bild+'" loading="lazy" style="width:100%;max-height:180px;object-fit:cover;border-radius:6px;margin-top:6px;"></a>'
+:'';
+var link=props.Link ?
+'<br><a href="'+props.Link+'" target="_blank" style="color:blue;">➔ Mehr Infos</a>'
+:'';
+content+=
+"<div style='margin-bottom:18px;border-bottom:1px solid #ccc;padding-bottom:12px;'>"+
+"<b>"+name+"</b><br>"+
+"<small><i>"+nutzung+"</i></small><br>"+
+"<b>Zeit:</b> "+von+" bis "+bis+"<br>"+
+"<p style='font-size:1em;line-height:1.4;margin:8px 0;'>"+info+"</p>"+
+bild+link+
+"</div>";
-layer.bindPopup(content);
+});
-}
+content+="</div>";
-}).addTo(map);
+L.popup({
+maxWidth:window.innerWidth<600?300:400,
+minWidth:window.innerWidth<600?220:250,
+autoPanPadding:[20,20]
+})
+.setLatLng(e.latlng)
+.setContent(content)
+.openOn(map);
-updateFilters();
+}
 });
-function updateFilters(){
+});
-if(!geojsonLayer) return;
+});
-var year=parseInt(document.getElementById("yearSliderWWW").value);
+var legend=L.control({position:'bottomright'});
-var activeCats=[];
+legend.onAdd=function(){
-document.querySelectorAll(".catFilter:checked")
+var div=L.DomUtil.create('div','legend');
-.forEach(cb=>activeCats.push(cb.value));
-geojsonLayer.eachLayer(function(layer){
+var grades=[
+{label:'Verteidigen & Schützen',color:'blue'},
+{label:'Arbeiten & Transportieren',color:'gray'},
+{label:'Beten & Heilen',color:'purple'},
+{label:'Ackern & Mahlen',color:'green'},
+{label:'Leben & Lernen',color:'orange'}
+];
-var p=layer.feature.properties;
+div.innerHTML+='<b>Kategorien</b><br>';
-var g=normalizeGroup(p.Gruppe);
+for(var i=0;i<grades.length;i++){
+div.innerHTML+='<i style="background:'+grades[i].color+'"></i> '+grades[i].label+'<br>';
+}
-var von=parseInt(p.von)||0;
+return div;
-var bis=parseInt(p.bis)||9999;
+};
-var visible=
+legend.addTo(map);
-activeCats.includes(g) &&
-von<=year;
-if(visible){
+var toggleButton=L.control({position:'bottomright'});
-layer.setStyle({opacity:1,fillOpacity:0.4});
+toggleButton.onAdd=function(){
-layer.addTo(map);
-}else{
+var btn=L.DomUtil.create('button','leaflet-bar');
-layer.setStyle({opacity:0,fillOpacity:0});
+btn.innerHTML='Legende';
-}
+btn.style.padding='5px 10px';
+btn.style.cursor='pointer';
+btn.style.backgroundColor='white';
+btn.style.fontWeight='bold';
+btn.style.border='2px solid rgba(0,0,0,0.2)';
+btn.style.borderRadius='4px';
-});
+btn.onclick=function(e){
-}
+L.DomEvent.stopPropagation(e);
-document.querySelectorAll(".catFilter")
+var legendDiv=document.querySelector('.legend');
-.forEach(cb=>cb.addEventListener("change",updateFilters));
-var slider=document.getElementById("yearSliderWWW");
+legendDiv.style.display=
+(legendDiv.style.display==="none") ?
+"block" : "none";
-slider.addEventListener("input",function(){
+};
-document.getElementById("yearLabelWWW").innerText="bis "+this.value;
+return btn;
-updateFilters();
+};
-});
+toggleButton.addTo(map);
 })();
 </script>

Altes Köln

Widget:KoelnWasWarWoPro: Unterschied zwischen den Versionen

Version vom 9. März 2026, 18:53 Uhr