https://www.altes-koeln.de/index.php?action=history&feed=atom&title=Widget%3ALeafletWWW-HK
Widget:LeafletWWW-HK - Versionsgeschichte
2026-05-13T12:36:11Z
Versionsgeschichte dieser Seite in Altes Köln
MediaWiki 1.43.6
https://www.altes-koeln.de/index.php?title=Widget:LeafletWWW-HK&diff=92636&oldid=prev
HorstR am 10. März 2026 um 15:40 Uhr
2026-03-10T15:40:43Z
<p></p>
<table style="background-color: #fff; color: #202122;" data-mw="interface">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="de">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Nächstältere Version</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Version vom 10. März 2026, 15:40 Uhr</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l130">Zeile 130:</td>
<td colspan="2" class="diff-lineno">Zeile 130:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> var geojsonLayer;</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> var geojsonLayer;</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> fetch('WWW.geojson')</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> fetch('<ins style="font-weight: bold; text-decoration: none;">/alteskoeln/</ins>WWW.geojson')</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> .then(r=>r.json())</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> .then(r=>r.json())</div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> .then(data=>{</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div> .then(data=>{</div></td></tr>
<!-- diff cache key alteskoeln:diff:1.41:old-92635:rev-92636:php=table -->
</table>
HorstR
https://www.altes-koeln.de/index.php?title=Widget:LeafletWWW-HK&diff=92635&oldid=prev
HorstR: Die Seite wurde neu angelegt: „ <!DOCTYPE html> <html> <head> <title>Köln - Was War Wo</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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/leafl…“
2026-03-10T15:37:49Z
<p>Die Seite wurde neu angelegt: „ <!DOCTYPE html> <html> <head> <title>Köln - Was War Wo</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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/leafl…“</p>
<p><b>Neue Seite</b></p><div><br />
<!DOCTYPE html><br />
<html><br />
<head><br />
<title>Köln - Was War Wo</title><br />
<br />
<meta charset="utf-8"/><br />
<meta name="viewport" content="width=device-width, initial-scale=1.0"><br />
<br />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/><br />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script><br />
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/><br />
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script><br />
<br />
<style><br />
<br />
body{<br />
padding:10px;<br />
font-family:sans-serif;<br />
}<br />
#map{<br />
width:100%;<br />
height:80vh;<br />
border:3px solid black;<br />
border-radius:10px;<br />
}<br />
.legend{<br />
display:none;<br />
line-height:18px;<br />
background:rgba(255,255,255,0.9);<br />
padding:10px;<br />
border-radius:6px;<br />
box-shadow:0 0 10px rgba(0,0,0,0.3);<br />
}<br />
.legend i{<br />
width:18px;<br />
height:18px;<br />
float:left;<br />
margin-right:8px;<br />
}<br />
.layerbox{<br />
background:rgba(255,255,255,0.9);<br />
padding:10px;<br />
border-radius:6px;<br />
box-shadow:0 0 10px rgba(0,0,0,0.3);<br />
font-size:14px;<br />
}<br />
.layerbox h4{<br />
margin:0;<br />
cursor:pointer;<br />
}<br />
.layercontent{<br />
display:block; /* ausgeklappt beim Start */<br />
margin-top:8px;<br />
}<br />
.leaflet-bar button{<br />
cursor:pointer;<br />
font-weight:bold;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<br />
<p style="text-align:center;font-weight:bold;font-size:20px;"><br />
Köln – Was War Wo - Historische Karten<br />
</p><br />
<br />
<div id="map"></div><br />
<br />
<div style="text-align:center;margin-top:10px;"><br />
<a href="https://hermsdoerfer.familyds.com/" target="_blank"<br />
style="text-decoration:none;font-size:15px;color:red;"><br />
<strong>© Dietmar Hermsdörfer</strong><br />
</a><br />
</div><br />
<br />
<script><br />
<br />
// --- Basiskarten ---<br />
var map = L.map('map').setView([50.95,6.95],12);<br />
<br />
var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png',{<br />
maxZoom:19,<br />
attribution:'© OpenStreetMap'<br />
}).addTo(map);<br />
<br />
var satellite = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',{<br />
attribution:'Tiles © Esri'<br />
});<br />
<br />
L.control.layers({"OpenStreetMap":osm,"Satellit":satellite}).addTo(map);<br />
<br />
// --- Geocoder links ---<br />
L.Control.geocoder({ position: 'topleft', placeholder: "Suche ..." }).addTo(map);<br />
<br />
// --- WMS-Layer ---<br />
var wmsDOP1951 = L.tileLayer.wms("https://www.wms.nrw.de/geobasis/wms_nw_hist_dop",{<br />
layers:"nw_hist_dop_1951",<br />
format:"image/png",<br />
transparent:true,<br />
opacity:0.6,<br />
attribution:"Orthophoto 1951"<br />
});<br />
<br />
var wmsNeuaufnahme = L.tileLayer.wms("https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme",{<br />
layers:"nw_neuaufnahme",<br />
format:"image/png",<br />
transparent:true,<br />
opacity:0.6,<br />
attribution:"Neuaufnahme © Geobasis NRW"<br />
});<br />
<br />
var wmsTranchot = L.tileLayer.wms("https://www.wms.nrw.de/geobasis/wms_nw_tranchot",{<br />
layers:"nw_tranchot",<br />
format:"image/png",<br />
transparent:true,<br />
opacity:0.6,<br />
attribution:"Tranchotkarte © Geobasis NRW"<br />
});<br />
<br />
var wmsMercator = L.tileLayer("https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png",{<br />
format:"image/png",<br />
transparent:true,<br />
opacity:0.6,<br />
attribution:"Mercatorplan"<br />
});<br />
<br />
// --- GeoJSON-Layer ---<br />
var geojsonLayer;<br />
<br />
fetch('WWW.geojson')<br />
.then(r=>r.json())<br />
.then(data=>{<br />
geojsonLayer=L.geoJSON(data,{<br />
style:function(feature){<br />
var colors={<br />
'Verteidigen & Schützen':'blue',<br />
'Arbeiten & Transportieren':'gray',<br />
'Beten & Heilen':'purple',<br />
'Ackern & Mahlen':'green',<br />
'Leben & Lernen':'orange'<br />
};<br />
return {<br />
color:colors[feature.properties.Gruppe]||"black",<br />
weight:2,<br />
fillOpacity:0.4<br />
};<br />
}<br />
}).addTo(map);<br />
});<br />
<br />
// --- Hilfsfunktionen für Identify ---<br />
function isPointInPolygon(latlng, layer){<br />
var coords = layer.getLatLngs();<br />
if(layer.feature.geometry.type==="MultiPolygon"){<br />
return coords.some(part=>isInside(latlng,part[0]));<br />
}<br />
return isInside(latlng,coords[0]);<br />
}<br />
<br />
function isInside(latlng, poly){<br />
var x=latlng.lat, y=latlng.lng, inside=false;<br />
for(var i=0,j=poly.length-1;i<poly.length;j=i++){<br />
var xi=poly[i].lat, yi=poly[i].lng;<br />
var xj=poly[j].lat, yj=poly[j].lng;<br />
var intersect = ((yi>y)!=(yj>y)) && (x < (xj-xi)*(y-yi)/(yj-yi)+xi);<br />
if(intersect) inside=!inside;<br />
}<br />
return inside;<br />
}<br />
<br />
// --- Durchstechendes Identify ---<br />
map.on('click', function(e){<br />
var clickedFeatures = [];<br />
geojsonLayer.eachLayer(function(layer){<br />
if(isPointInPolygon(e.latlng, layer)){<br />
clickedFeatures.push(layer.feature.properties);<br />
}<br />
});<br />
<br />
if(clickedFeatures.length > 0){<br />
var content = "<div style='max-height:50vh;overflow-y:auto;min-width:200px;'>";<br />
if(clickedFeatures.length > 1){<br />
content += "<div style='background:#eee;padding:8px;margin-bottom:12px;font-weight:bold;text-align:center;border-radius:6px;'>"<br />
+ clickedFeatures.length + " historische Orte hier</div>";<br />
}<br />
clickedFeatures.forEach(function(props){<br />
var name = props.Name || "Unbekannt";<br />
var nutzung = props.Nutzung || "-";<br />
var von = props.von || "?";<br />
var bis = props.bis || "?";<br />
var info = props.Info || "";<br />
var bild = props.Bild ? <br />
'<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>' : '';<br />
var link = props.Link ? <br />
'<br><a href="'+props.Link+'" target="_blank" style="color:blue;font-size:1em;">➔ Mehr Infos</a>' : '';<br />
content += "<div style='margin-bottom:18px;border-bottom:1px solid #ccc;padding-bottom:12px;'>"+<br />
"<b>"+name+"</b><br>"+<br />
"<small><i>"+nutzung+"</i></small><br>"+<br />
"<b>Zeit:</b> "+von+" bis "+bis+"<br>"+<br />
"<p style='font-size:1em;line-height:1.4;margin:8px 0;'>"+info+"</p>"+<br />
bild+link+<br />
"</div>";<br />
});<br />
content += "</div>";<br />
L.popup({<br />
maxWidth: window.innerWidth<600 ? 300 : 400,<br />
minWidth: window.innerWidth<600 ? 220 : 250,<br />
autoPanPadding:[20,20]<br />
})<br />
.setLatLng(e.latlng)<br />
.setContent(content)<br />
.addTo(map); // durchstechend<br />
}<br />
});<br />
<br />
// --- Layerbox (ausgeklappt) ---<br />
var layerBox=L.control({position:'topright'});<br />
layerBox.onAdd=function(){<br />
var div=L.DomUtil.create('div','layerbox');<br />
div.innerHTML=`<br />
<h4 id="layerToggle">☰</h4><br />
<div id="layerContent" class="layercontent" style="display:block;"><br />
<br />
<b>Historische Orte</b><br><br />
<label><input type="checkbox" id="layerWWW" checked> Was War Wo</label><br />
<br><br><br />
<br />
<b>Historische Karten</b><br><br />
<label><input type="checkbox" id="layerDOP1951"> 1951 Orthophoto</label><br><br />
<label><input type="checkbox" id="layerNeuaufnahme"> ~1890 Neuaufnahme</label><br><br />
<label><input type="checkbox" id="layerTranchot"> 1801–1828 Tranchot</label><br><br />
<label><input type="checkbox" id="layerMercator"> 1751 Mercator</label><br />
<br><br><br />
<br />
<b>Transparenz</b><br><br />
<input type="range" id="opacitySlider" min="0" max="1" step="0.1" value="0.6"><br />
<br />
</div><br />
`;<br />
L.DomEvent.disableClickPropagation(div);<br />
return div;<br />
};<br />
layerBox.addTo(map);<br />
<br />
// --- Layer-Schalten ---<br />
document.addEventListener("change",function(e){<br />
if(e.target.id==="layerWWW"){e.target.checked?map.addLayer(geojsonLayer):map.removeLayer(geojsonLayer);}<br />
if(e.target.id==="layerDOP1951"){e.target.checked?map.addLayer(wmsDOP1951):map.removeLayer(wmsDOP1951);}<br />
if(e.target.id==="layerNeuaufnahme"){e.target.checked?map.addLayer(wmsNeuaufnahme):map.removeLayer(wmsNeuaufnahme);}<br />
if(e.target.id==="layerTranchot"){e.target.checked?map.addLayer(wmsTranchot):map.removeLayer(wmsTranchot);}<br />
if(e.target.id==="layerMercator"){e.target.checked?map.addLayer(wmsMercator):map.removeLayer(wmsMercator);}<br />
});<br />
<br />
// --- Transparenzregler ---<br />
document.getElementById("opacitySlider").addEventListener("input",function(){<br />
var val=this.value;<br />
wmsDOP1951.setOpacity(val);<br />
wmsNeuaufnahme.setOpacity(val);<br />
wmsTranchot.setOpacity(val);<br />
wmsMercator.setOpacity(val);<br />
});<br />
<br />
// --- Layerbox einklappen ---<br />
document.getElementById("layerToggle").onclick=function(){<br />
var c=document.getElementById("layerContent");<br />
c.style.display=(c.style.display==="block")?"none":"block";<br />
};<br />
<br />
// --- Legende ---<br />
var legend=L.control({position:'bottomright'});<br />
legend.onAdd=function(){<br />
var div=L.DomUtil.create('div','legend');<br />
div.innerHTML=`<br />
<b>Was War Wo</b><br><br />
<i style="background:blue"></i> Verteidigen & Schützen<br><br />
<i style="background:gray"></i> Arbeiten & Transportieren<br><br />
<i style="background:purple"></i> Beten & Heilen<br><br />
<i style="background:green"></i> Ackern & Mahlen<br><br />
<i style="background:orange"></i> Leben & Lernen<br />
`;<br />
return div;<br />
};<br />
legend.addTo(map);<br />
<br />
// --- Legenden-Button im ☰-Design ---<br />
var legendButton = L.control({position:'bottomright'});<br />
legendButton.onAdd = function(){<br />
var btn = L.DomUtil.create('button','leaflet-bar');<br />
btn.innerHTML = '☰';<br />
btn.title = "Legende";<br />
btn.style.padding = '5px 10px';<br />
btn.style.fontWeight = 'bold';<br />
btn.style.cursor = 'pointer';<br />
btn.style.backgroundColor = 'white';<br />
btn.style.border = '2px solid rgba(0,0,0,0.2)';<br />
btn.style.borderRadius = '4px';<br />
btn.onclick = function(){<br />
var legendDiv = document.querySelector('.legend');<br />
legendDiv.style.display = (legendDiv.style.display==="none") ? "block" : "none";<br />
};<br />
return btn;<br />
};<br />
legendButton.addTo(map);<br />
<br />
</script><br />
<br />
</body><br />
</html></div>
HorstR