2026-03-18T10:56:37Z

HorstR:

<!DOCTYPE html>
<html>
<head>
<title>Siedlungsentwicklung</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/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>

<style>

body { padding:10px; font-family:sans-serif; }

#map-frame { border-radius:8px; position: relative;}
#map {
width: 100%;
height: 88vh; /* größere Karte */
border: 3px solid black;
border-radius: 10px;
}

#map-title {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
background: rgba(255,255,255,0.85);
padding: 6px 14px;
font-weight: bold;
font-size: 18px;
border-radius: 6px;
box-shadow: 0 0 6px rgba(0,0,0,0.3);
}

#map-footer {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 1000;
background: rgba(255,255,255,0.85);
padding: 4px 10px;
border-radius: 6px;
font-size: 13px;
box-shadow: 0 0 6px rgba(0,0,0,0.3);
}

#map-footer a {
color: red;
text-decoration: none;
font-weight: bold;
}

/* Slider über der Karte, mittig unten */
.leaflet-control-time {
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
background: rgba(255,255,255,0.95);
padding: 10px 20px;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,0.35);
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}

#yearSlider { width: 300px; }
#yearLabel { font-weight:bold; min-width:45px; text-align:center; }

.time-axis { width: 100%; display: flex; justify-content: space-between; font-size: 12px; margin-top: 4px; }

.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;}
.legend-header{
cursor:pointer;
font-weight:bold;
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:1px solid #ccc;
margin-bottom:5px;
padding-bottom:3px;
}

.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;}
.leaflet-popup-content-wrapper{border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,0.35);}
</style>
</head>

<body>

<div id="map-frame">

<div id="map-title">Siedlungsentwicklung</div>

<div id="map"></div>

<div id="map-footer">
<a href="https://hermsdoerfer.familyds.com/" target="_blank">
© Dietmar Hermsdörfer
</a>
</div>

</div>

<script>
var map = L.map('map').setView([50.95,6.95],12);

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";
}

// --- Kartenlayer ---
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 highlightedLayer=null;
var popupFeatures=[];
var popupIndex=0;
var geojsonLayer=null;

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, yi=poly[i].lng, xj=poly[j].lat, yj=poly[j].lng;
var intersect=((yi>y)!=(yj>y)) && (x<(xj-xi)*(y-yi)/(yj-yi)+xi);
if(intersect) inside=!inside;
}
return inside;
}

function showPopup(index,latlng){
popupIndex=index;
var props=popupFeatures[index];
var name=props.Name||"Unbekannt";
var nutzung=props.Nutzung||"-";
var jahr=props.Jahr||"?";
var gebiet=props.Gebiet||"-";
var zeitraum=props.Zeitraum||"-";
var info=props.Info||"";
var bild=props.Bild?'<img class="popup-img" src="'+props.Bild+'" onclick="window.open(\''+props.Bild+'\')">':'';
var link=props.Link?'<div class="popup-link"><a href="'+props.Link+'" target="_blank">➔ Mehr Infos</a></div>':'';
var nav="";
if(popupFeatures.length>1){
nav='<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;">'+
'<button onclick="changeFeature(-1)">◀</button>'+
'<span style="font-size:12px;">'+(index+1)+' / '+popupFeatures.length+'</span>'+
'<button onclick="changeFeature(1)">▶</button>'+
'</div>';
}
var content='<div class="popup-card">'+bild+
'<div class="popup-body">'+nav+
'<div class="popup-title">'+name+'</div>'+
'<div class="popup-sub">'+nutzung+'</div>'+
'<div class="popup-info"><b>Jahr:</b> '+jahr+'<br><b>Gebiet:</b> '+gebiet+'<br><b>Zeitraum:</b> '+zeitraum+'</div>'+
'<div class="popup-text">'+info+'</div>'+link+'</div></div>';
L.popup({maxWidth:300}).setLatLng(latlng).setContent(content).openOn(map);
}

function changeFeature(step){
popupIndex+=step;
if(popupIndex<0) popupIndex=popupFeatures.length-1;
if(popupIndex>=popupFeatures.length) popupIndex=0;
showPopup(popupIndex,map.getCenter());
}

// --- GeoJSON laden ---
fetch("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, interactive:false};
return {color:"#555", weight:1, fillColor:getColor(jahr), fillOpacity:0.7};
},
onEachFeature:function(feature,layer){
layer.on({
mouseover:function(e){
var l=e.target;
var currentYear=parseInt(document.getElementById("yearSlider").value);
if(l!==highlightedLayer && (feature.properties.Jahr||0)<=currentYear){
l.setStyle({weight:3,color:"#000",fillOpacity:0.9});
}
},
mouseout:function(e){
var l=e.target;
var currentYear=parseInt(document.getElementById("yearSlider").value);
if(l!==highlightedLayer){
if((feature.properties.Jahr||0)>currentYear){
l.setStyle({fillOpacity:0,opacity:0});
}else{
geojsonLayer.resetStyle(l);
}
}
},
click:function(e){
var l=e.target;
var currentYear=parseInt(document.getElementById("yearSlider").value);
if((feature.properties.Jahr||0)<=currentYear){
if(highlightedLayer) geojsonLayer.resetStyle(highlightedLayer);
highlightedLayer=l;

// --- Highlight setzen ---
l.setStyle({weight:4, color:"cyan", fillOpacity:1, fillColor: "yellow" });

// --- Zoom auf angeklicktes Polygon ---
map.flyToBounds(l.getBounds(), {padding:[40,40], maxZoom:16, duration:0.8});

popupFeatures=[feature.properties];
showPopup(0,e.latlng);
}
}
});
}
}).addTo(map);
});

// --- Timeslider ---
var sliderControl = L.DomUtil.create('div','leaflet-control-time');
sliderControl.innerHTML = '<input type="range" id="yearSlider" min="50" max="2026" value="2026" step="1">'+
'<span id="yearLabel">2026</span>'+
'<div class="time-axis">'+
intervals.map(i=>'<span>'+i.from+'</span>').join('')+
'</div>';
L.DomEvent.disableClickPropagation(sliderControl);
document.getElementById('map').appendChild(sliderControl);

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

yearSlider.addEventListener("input", function(){
var year = parseInt(this.value);
yearLabel.innerText = year;

// Array für alle sichtbaren Layer dieses Jahres
var visibleLayers = [];

geojsonLayer.eachLayer(function(layer){
var featureJahr = layer.feature.properties.Jahr;
if(featureJahr && featureJahr > 0){
if(featureJahr <= year){
layer.setStyle({fillOpacity:0.7, opacity:1, stroke:true});
visibleLayers.push(layer);
} else {
layer.setStyle({fillOpacity:0, opacity:0, stroke:false});
}
} else {
layer.setStyle({fillOpacity:0, opacity:0, stroke:false});
}
});

// Zoom auf alle sichtbaren Layer
if(visibleLayers.length > 0){
var group = L.featureGroup(visibleLayers);
map.fitBounds(group.getBounds(), {padding:[40,40]});
}
});

// --- Legende ---
var legend=L.control({position:"bottomright"});
legend.onAdd=function(map){
var div=L.DomUtil.create("div","legend");
div.innerHTML=
'<div class="legend-header" id="legend-header">'+
'<span>Zeit (Jahr)</span>'+
'<span id="legend-toggle-icon">−</span>'+
'</div>'+
'<div id="legend-body" style="display:block;margin-top:8px;">'+
intervals.map(i=>'<i style="background:'+i.color+';"></i>'+i.from+' – '+i.to+'<br>').join('')+
'</div>';
L.DomEvent.disableClickPropagation(div);
L.DomEvent.on(div.querySelector('#legend-header'),'click',function(){
var body=document.getElementById("legend-body");
var icon=document.getElementById("legend-toggle-icon");
if(body.style.display==="none"){body.style.display="block"; icon.innerHTML="−";}
else{body.style.display="none"; icon.innerHTML="+";}
});
return div;
};
legend.addTo(map);

</script>
</body>
</html>

Widget:WWW-Siedlungen

2026-03-18T10:54:24Z

HorstR: Der Seiteninhalt wurde durch einen anderen Text ersetzt: „widget:WWW-Siedlungen“

widget:WWW-Siedlungen

Köln - Siedlungsentwicklung

2026-03-18T10:53:06Z

HorstR:

2026-03-14T20:20:58Z

HorstR:

Widget:LeafletWWW

2026-03-14T17:59:40Z

HorstR:

2026-03-14T13:57:37Z

HorstR:

2026-03-10T15:42:41Z

HorstR:

WasWarWo

2026-03-10T15:41:07Z

HorstR:

Widget:LeafletWWW-HK

2026-03-10T15:40:43Z

HorstR:

<!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/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>

<style>

body{
padding:10px;
font-family:sans-serif;
}
#map{
width:100%;
height:80vh;
border:3px solid black;
border-radius:10px;
}
.legend{
display:none;
line-height:18px;
background:rgba(255,255,255,0.9);
padding:10px;
border-radius:6px;
box-shadow:0 0 10px rgba(0,0,0,0.3);
}
.legend i{
width:18px;
height:18px;
float:left;
margin-right:8px;
}
.layerbox{
background:rgba(255,255,255,0.9);
padding:10px;
border-radius:6px;
box-shadow:0 0 10px rgba(0,0,0,0.3);
font-size:14px;
}
.layerbox h4{
margin:0;
cursor:pointer;
}
.layercontent{
display:block; /* ausgeklappt beim Start */
margin-top:8px;
}
.leaflet-bar button{
cursor:pointer;
font-weight:bold;
}

</style>
</head>
<body>

<p style="text-align:center;font-weight:bold;font-size:20px;">
Köln – Was War Wo - Historische Karten
</p>

<div id="map"></div>

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

<script>

// --- Basiskarten ---
var map = L.map('map').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);

// --- Geocoder links ---
L.Control.geocoder({ position: 'topleft', placeholder: "Suche ..." }).addTo(map);

// --- WMS-Layer ---
var wmsDOP1951 = L.tileLayer.wms("https://www.wms.nrw.de/geobasis/wms_nw_hist_dop",{
layers:"nw_hist_dop_1951",
format:"image/png",
transparent:true,
opacity:0.6,
attribution:"Orthophoto 1951"
});

var wmsNeuaufnahme = L.tileLayer.wms("https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme",{
layers:"nw_neuaufnahme",
format:"image/png",
transparent:true,
opacity:0.6,
attribution:"Neuaufnahme © Geobasis NRW"
});

var wmsTranchot = L.tileLayer.wms("https://www.wms.nrw.de/geobasis/wms_nw_tranchot",{
layers:"nw_tranchot",
format:"image/png",
transparent:true,
opacity:0.6,
attribution:"Tranchotkarte © Geobasis NRW"
});

var wmsMercator = L.tileLayer("https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png",{
format:"image/png",
transparent:true,
opacity:0.6,
attribution:"Mercatorplan"
});

// --- GeoJSON-Layer ---
var geojsonLayer;

fetch('/alteskoeln/WWW.geojson')
.then(r=>r.json())
.then(data=>{
geojsonLayer=L.geoJSON(data,{
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);
});

// --- Hilfsfunktionen für Identify ---
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, y=latlng.lng, inside=false;
for(var i=0,j=poly.length-1;i<poly.length;j=i++){
var xi=poly[i].lat, yi=poly[i].lng;
var xj=poly[j].lat, yj=poly[j].lng;
var intersect = ((yi>y)!=(yj>y)) && (x < (xj-xi)*(y-yi)/(yj-yi)+xi);
if(intersect) inside=!inside;
}
return inside;
}

// --- Durchstechendes Identify ---
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 = "<div style='max-height:50vh;overflow-y:auto;min-width:200px;'>";
if(clickedFeatures.length > 1){
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>";
}
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 ?
'<br><a href="'+props.Link+'" target="_blank" style="color:blue;font-size:1em;">➔ 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>";
});
content += "</div>";
L.popup({
maxWidth: window.innerWidth<600 ? 300 : 400,
minWidth: window.innerWidth<600 ? 220 : 250,
autoPanPadding:[20,20]
})
.setLatLng(e.latlng)
.setContent(content)
.addTo(map); // durchstechend
}
});

// --- Layerbox (ausgeklappt) ---
var layerBox=L.control({position:'topright'});
layerBox.onAdd=function(){
var div=L.DomUtil.create('div','layerbox');
div.innerHTML=`
<h4 id="layerToggle">☰</h4>
<div id="layerContent" class="layercontent" style="display:block;">

<b>Historische Orte</b><br>
<label><input type="checkbox" id="layerWWW" checked> Was War Wo</label>
<br><br>

<b>Historische Karten</b><br>
<label><input type="checkbox" id="layerDOP1951"> 1951 Orthophoto</label><br>
<label><input type="checkbox" id="layerNeuaufnahme"> ~1890 Neuaufnahme</label><br>
<label><input type="checkbox" id="layerTranchot"> 1801–1828 Tranchot</label><br>
<label><input type="checkbox" id="layerMercator"> 1751 Mercator</label>
<br><br>

<b>Transparenz</b><br>
<input type="range" id="opacitySlider" min="0" max="1" step="0.1" value="0.6">

</div>
`;
L.DomEvent.disableClickPropagation(div);
return div;
};
layerBox.addTo(map);

// --- Layer-Schalten ---
document.addEventListener("change",function(e){
if(e.target.id==="layerWWW"){e.target.checked?map.addLayer(geojsonLayer):map.removeLayer(geojsonLayer);}
if(e.target.id==="layerDOP1951"){e.target.checked?map.addLayer(wmsDOP1951):map.removeLayer(wmsDOP1951);}
if(e.target.id==="layerNeuaufnahme"){e.target.checked?map.addLayer(wmsNeuaufnahme):map.removeLayer(wmsNeuaufnahme);}
if(e.target.id==="layerTranchot"){e.target.checked?map.addLayer(wmsTranchot):map.removeLayer(wmsTranchot);}
if(e.target.id==="layerMercator"){e.target.checked?map.addLayer(wmsMercator):map.removeLayer(wmsMercator);}
});

// --- Transparenzregler ---
document.getElementById("opacitySlider").addEventListener("input",function(){
var val=this.value;
wmsDOP1951.setOpacity(val);
wmsNeuaufnahme.setOpacity(val);
wmsTranchot.setOpacity(val);
wmsMercator.setOpacity(val);
});

// --- Layerbox einklappen ---
document.getElementById("layerToggle").onclick=function(){
var c=document.getElementById("layerContent");
c.style.display=(c.style.display==="block")?"none":"block";
};

// --- Legende ---
var legend=L.control({position:'bottomright'});
legend.onAdd=function(){
var div=L.DomUtil.create('div','legend');
div.innerHTML=`
<b>Was War Wo</b><br>
<i style="background:blue"></i> Verteidigen & Schützen<br>
<i style="background:gray"></i> Arbeiten & Transportieren<br>
<i style="background:purple"></i> Beten & Heilen<br>
<i style="background:green"></i> Ackern & Mahlen<br>
<i style="background:orange"></i> Leben & Lernen
`;
return div;
};
legend.addTo(map);

// --- Legenden-Button im ☰-Design ---
var legendButton = L.control({position:'bottomright'});
legendButton.onAdd = function(){
var btn = L.DomUtil.create('button','leaflet-bar');
btn.innerHTML = '☰';
btn.title = "Legende";
btn.style.padding = '5px 10px';
btn.style.fontWeight = 'bold';
btn.style.cursor = 'pointer';
btn.style.backgroundColor = 'white';
btn.style.border = '2px solid rgba(0,0,0,0.2)';
btn.style.borderRadius = '4px';
btn.onclick = function(){
var legendDiv = document.querySelector('.legend');
legendDiv.style.display = (legendDiv.style.display==="none") ? "block" : "none";
};
return btn;
};
legendButton.addTo(map);

</script>

</body>
</html>

Widget:LeafletWWW-HK

2026-03-10T15:37:49Z

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…“

<!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/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>

<style>

body{
padding:10px;
font-family:sans-serif;
}
#map{
width:100%;
height:80vh;
border:3px solid black;
border-radius:10px;
}
.legend{
display:none;
line-height:18px;
background:rgba(255,255,255,0.9);
padding:10px;
border-radius:6px;
box-shadow:0 0 10px rgba(0,0,0,0.3);
}
.legend i{
width:18px;
height:18px;
float:left;
margin-right:8px;
}
.layerbox{
background:rgba(255,255,255,0.9);
padding:10px;
border-radius:6px;
box-shadow:0 0 10px rgba(0,0,0,0.3);
font-size:14px;
}
.layerbox h4{
margin:0;
cursor:pointer;
}
.layercontent{
display:block; /* ausgeklappt beim Start */
margin-top:8px;
}
.leaflet-bar button{
cursor:pointer;
font-weight:bold;
}

</style>
</head>
<body>

<p style="text-align:center;font-weight:bold;font-size:20px;">
Köln – Was War Wo - Historische Karten
</p>

<div id="map"></div>

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

<script>

// --- Basiskarten ---
var map = L.map('map').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);

// --- Geocoder links ---
L.Control.geocoder({ position: 'topleft', placeholder: "Suche ..." }).addTo(map);

// --- WMS-Layer ---
var wmsDOP1951 = L.tileLayer.wms("https://www.wms.nrw.de/geobasis/wms_nw_hist_dop",{
layers:"nw_hist_dop_1951",
format:"image/png",
transparent:true,
opacity:0.6,
attribution:"Orthophoto 1951"
});

var wmsNeuaufnahme = L.tileLayer.wms("https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme",{
layers:"nw_neuaufnahme",
format:"image/png",
transparent:true,
opacity:0.6,
attribution:"Neuaufnahme © Geobasis NRW"
});

var wmsTranchot = L.tileLayer.wms("https://www.wms.nrw.de/geobasis/wms_nw_tranchot",{
layers:"nw_tranchot",
format:"image/png",
transparent:true,
opacity:0.6,
attribution:"Tranchotkarte © Geobasis NRW"
});

var wmsMercator = L.tileLayer("https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png",{
format:"image/png",
transparent:true,
opacity:0.6,
attribution:"Mercatorplan"
});

// --- GeoJSON-Layer ---
var geojsonLayer;

fetch('WWW.geojson')
.then(r=>r.json())
.then(data=>{
geojsonLayer=L.geoJSON(data,{
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);
});

// --- Hilfsfunktionen für Identify ---
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, y=latlng.lng, inside=false;
for(var i=0,j=poly.length-1;i<poly.length;j=i++){
var xi=poly[i].lat, yi=poly[i].lng;
var xj=poly[j].lat, yj=poly[j].lng;
var intersect = ((yi>y)!=(yj>y)) && (x < (xj-xi)*(y-yi)/(yj-yi)+xi);
if(intersect) inside=!inside;
}
return inside;
}

// --- Durchstechendes Identify ---
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 = "<div style='max-height:50vh;overflow-y:auto;min-width:200px;'>";
if(clickedFeatures.length > 1){
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>";
}
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 ?
'<br><a href="'+props.Link+'" target="_blank" style="color:blue;font-size:1em;">➔ 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>";
});
content += "</div>";
L.popup({
maxWidth: window.innerWidth<600 ? 300 : 400,
minWidth: window.innerWidth<600 ? 220 : 250,
autoPanPadding:[20,20]
})
.setLatLng(e.latlng)
.setContent(content)
.addTo(map); // durchstechend
}
});

// --- Layerbox (ausgeklappt) ---
var layerBox=L.control({position:'topright'});
layerBox.onAdd=function(){
var div=L.DomUtil.create('div','layerbox');
div.innerHTML=`
<h4 id="layerToggle">☰</h4>
<div id="layerContent" class="layercontent" style="display:block;">

<b>Historische Orte</b><br>
<label><input type="checkbox" id="layerWWW" checked> Was War Wo</label>
<br><br>

<b>Historische Karten</b><br>
<label><input type="checkbox" id="layerDOP1951"> 1951 Orthophoto</label><br>
<label><input type="checkbox" id="layerNeuaufnahme"> ~1890 Neuaufnahme</label><br>
<label><input type="checkbox" id="layerTranchot"> 1801–1828 Tranchot</label><br>
<label><input type="checkbox" id="layerMercator"> 1751 Mercator</label>
<br><br>

<b>Transparenz</b><br>
<input type="range" id="opacitySlider" min="0" max="1" step="0.1" value="0.6">

</div>
`;
L.DomEvent.disableClickPropagation(div);
return div;
};
layerBox.addTo(map);

// --- Layer-Schalten ---
document.addEventListener("change",function(e){
if(e.target.id==="layerWWW"){e.target.checked?map.addLayer(geojsonLayer):map.removeLayer(geojsonLayer);}
if(e.target.id==="layerDOP1951"){e.target.checked?map.addLayer(wmsDOP1951):map.removeLayer(wmsDOP1951);}
if(e.target.id==="layerNeuaufnahme"){e.target.checked?map.addLayer(wmsNeuaufnahme):map.removeLayer(wmsNeuaufnahme);}
if(e.target.id==="layerTranchot"){e.target.checked?map.addLayer(wmsTranchot):map.removeLayer(wmsTranchot);}
if(e.target.id==="layerMercator"){e.target.checked?map.addLayer(wmsMercator):map.removeLayer(wmsMercator);}
});

// --- Transparenzregler ---
document.getElementById("opacitySlider").addEventListener("input",function(){
var val=this.value;
wmsDOP1951.setOpacity(val);
wmsNeuaufnahme.setOpacity(val);
wmsTranchot.setOpacity(val);
wmsMercator.setOpacity(val);
});

// --- Layerbox einklappen ---
document.getElementById("layerToggle").onclick=function(){
var c=document.getElementById("layerContent");
c.style.display=(c.style.display==="block")?"none":"block";
};

// --- Legende ---
var legend=L.control({position:'bottomright'});
legend.onAdd=function(){
var div=L.DomUtil.create('div','legend');
div.innerHTML=`
<b>Was War Wo</b><br>
<i style="background:blue"></i> Verteidigen & Schützen<br>
<i style="background:gray"></i> Arbeiten & Transportieren<br>
<i style="background:purple"></i> Beten & Heilen<br>
<i style="background:green"></i> Ackern & Mahlen<br>
<i style="background:orange"></i> Leben & Lernen
`;
return div;
};
legend.addTo(map);

// --- Legenden-Button im ☰-Design ---
var legendButton = L.control({position:'bottomright'});
legendButton.onAdd = function(){
var btn = L.DomUtil.create('button','leaflet-bar');
btn.innerHTML = '☰';
btn.title = "Legende";
btn.style.padding = '5px 10px';
btn.style.fontWeight = 'bold';
btn.style.cursor = 'pointer';
btn.style.backgroundColor = 'white';
btn.style.border = '2px solid rgba(0,0,0,0.2)';
btn.style.borderRadius = '4px';
btn.onclick = function(){
var legendDiv = document.querySelector('.legend');
legendDiv.style.display = (legendDiv.style.display==="none") ? "block" : "none";
};
return btn;
};
legendButton.addTo(map);

</script>

</body>
</html>

WasWarWo

2026-03-10T15:26:49Z

HorstR:

Widget:LeafletWWW

2026-03-10T15:25:37Z

HorstR: Die Seite wurde neu angelegt: „<div id="map" style="width:100%;height:80vh;border:3px solid black;border-radius:10px;"></div> <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> .legen…“

<div id="map" style="width:100%;height:80vh;border:3px solid black;border-radius:10px;"></div>

<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>

.legend{
display:none;
line-height:18px;
background:rgba(255,255,255,0.9);
padding:10px;
border-radius:6px;
box-shadow:0 0 10px rgba(0,0,0,0.3);
}

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

.layerbox{
background:rgba(255,255,255,0.9);
padding:10px;
border-radius:6px;
box-shadow:0 0 10px rgba(0,0,0,0.3);
font-size:14px;
}

.layerbox h4{
margin:0;
cursor:pointer;
}

.layercontent{
display:block;
margin-top:8px;
}

</style>

<script>

setTimeout(function(){

var map = L.map('map').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 wmsDOP1951 = L.tileLayer.wms(
"https://www.wms.nrw.de/geobasis/wms_nw_hist_dop",
{
layers:"nw_hist_dop_1951",
format:"image/png",
transparent:true,
opacity:0.6
});

var wmsNeuaufnahme = L.tileLayer.wms(
"https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme",
{
layers:"nw_neuaufnahme",
format:"image/png",
transparent:true,
opacity:0.6
});

var wmsTranchot = L.tileLayer.wms(
"https://www.wms.nrw.de/geobasis/wms_nw_tranchot",
{
layers:"nw_tranchot",
format:"image/png",
transparent:true,
opacity:0.6
});

var wmsMercator = L.tileLayer(
"https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png",
{
opacity:0.6
});

var geojsonLayer;

fetch("/alteskoeln/WWW.geojson")
.then(r=>r.json())
.then(data=>{

geojsonLayer=L.geoJSON(data,{

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);

});

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.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="<div style='max-height:50vh;overflow-y:auto;min-width:200px;'>";

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 || "";

content += "<b>"+name+"</b><br>"
+"<i>"+nutzung+"</i><br>"
+"Zeit: "+von+" – "+bis+"<br>"
+"<p>"+info+"</p><hr>";

});

content+="</div>";

L.popup({maxWidth:350})
.setLatLng(e.latlng)
.setContent(content)
.openOn(map);

}

});

var layerBox=L.control({position:'topright'});

layerBox.onAdd=function(){

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

div.innerHTML=`

<h4 id="layerToggle">☰</h4>

<div id="layerContent" class="layercontent">

<b>Historische Orte</b><br>
<label><input type="checkbox" id="layerWWW" checked> Was War Wo</label>

<br><br>

<b>Historische Karten</b><br>

<label><input type="checkbox" id="layerDOP1951"> 1951 Orthophoto</label><br>
<label><input type="checkbox" id="layerNeuaufnahme"> ~1890 Neuaufnahme</label><br>
<label><input type="checkbox" id="layerTranchot"> 1801–1828 Tranchot</label><br>
<label><input type="checkbox" id="layerMercator"> 1751 Mercator</label>

<br><br>

<b>Transparenz</b><br>

<input type="range" id="opacitySlider"
min="0" max="1" step="0.1" value="0.6">

</div>
`;

return div;

};

layerBox.addTo(map);

document.addEventListener("change",function(e){

if(e.target.id==="layerWWW"){
e.target.checked?map.addLayer(geojsonLayer):map.removeLayer(geojsonLayer);
}

if(e.target.id==="layerDOP1951"){
e.target.checked?map.addLayer(wmsDOP1951):map.removeLayer(wmsDOP1951);
}

if(e.target.id==="layerNeuaufnahme"){
e.target.checked?map.addLayer(wmsNeuaufnahme):map.removeLayer(wmsNeuaufnahme);
}

if(e.target.id==="layerTranchot"){
e.target.checked?map.addLayer(wmsTranchot):map.removeLayer(wmsTranchot);
}

if(e.target.id==="layerMercator"){
e.target.checked?map.addLayer(wmsMercator):map.removeLayer(wmsMercator);
}

});

document.getElementById("opacitySlider").addEventListener("input",function(){

var val=this.value;

wmsDOP1951.setOpacity(val);
wmsNeuaufnahme.setOpacity(val);
wmsTranchot.setOpacity(val);
wmsMercator.setOpacity(val);

});

},500);

</script>