Widget:LeafletWWW

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

Was War Wo

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

<style>

1. map{width:100%;height:88vh;border:3px solid black;border-radius:10px;}

.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; max-height:70vh; overflow-y:auto; }

.search-input{ width:100%; margin-bottom:6px; padding:4px; border:1px solid #ccc; border-radius:4px; }

1. map-frame{position:relative;}

1. 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); }

1. 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); }

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

</style>

<script>

document.addEventListener("DOMContentLoaded",function(){

var map=L.map('map',{ preferCanvas:true, tap:window.screen.width<600, zoomSnap:0.5, zoomDelta:0.5 }).setView([50.95,6.95],12);

var osm=L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png',{maxZoom:19, attribution:'© OpenStreetMap'}); var satellite=L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',{attribution:'Tiles © Esri'});

osm.addTo(map);

L.control.layers({ "Open Street Map":osm, "Satellit":satellite }).addTo(map);

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

var nutzungColors={ 'Hof':'red','Mühle':'blue','Fabrik':'black','Gewerbe':'gray','Verwaltung':'orange', 'Bahn':'brown','Brücke':'navy','Hafen':'blue','Flughafen':'green','Versorgung':'gray', 'Tankstelle':'maroon','Brauerei':'yellow','Ziegelei':'red','Kloster':'orange', 'Kirche':'purple','Synagoge':'violet','Krankenhaus':'red','Friedhof':'green', 'Hochbunker':'black','Militär':'green','Wohnen':'brown','Schule':'red','Freizeit':'green' };

var wmsDOP2010=L.tileLayer.wms("https://www.wms.nrw.de/geobasis/wms_nw_hist_dop",{layers:"nw_hist_dop_2010",format:"image/png",transparent:true,opacity:0.6}); var wmsDOP1998=L.tileLayer.wms("https://www.wms.nrw.de/geobasis/wms_nw_hist_dop",{layers:"nw_hist_dop_1998",format:"image/png",transparent:true,opacity:0.6}); var wmsDOP1987=L.tileLayer.wms("https://www.wms.nrw.de/geobasis/wms_nw_hist_dop",{layers:"nw_hist_dop_1987",format:"image/png",transparent:true,opacity:0.6}); var wmsDOP1981=L.tileLayer.wms("https://www.wms.nrw.de/geobasis/wms_nw_hist_dop",{layers:"nw_hist_dop_1981",format:"image/png",transparent:true,opacity:0.6}); 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 wmsMeyer=L.tileLayer("https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png",{opacity:0.6}); var wmsKataster1836=L.tileLayer("https://mapwarper.net/maps/tile/99312/{z}/{x}/{y}.png",{opacity:0.6}); var wmsKoeln1830=L.tileLayer("https://mapwarper.net/maps/tile/101214/{z}/{x}/{y}.png",{opacity:0.6}); var wmsVogtPicquet=L.tileLayer("https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png",{opacity:0.6}); var wmsStockdale=L.tileLayer("https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png",{opacity:0.6}); var wmsReinhardt=L.tileLayer("https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png",{opacity:0.6}); var wmsMerian=L.tileLayer("https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png",{opacity:0.6}); var wmsMercator=L.tileLayer("https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png",{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 wmsUraufnahme=L.tileLayer.wms("https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme",{layers:"nw_uraufnahme_rw",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 geojsonLayer=L.geoJSON(null,{ renderer:L.canvas(), style:function(feature){ return{color:nutzungColors[feature.properties.Nutzung]||"black",weight:2,fillOpacity:0.4}; } }).addTo(map);

var highlightedLayers=[];

fetch('/alteskoeln/WasWarWo.geojson') .then(res=>res.json()) .then(data=>{ geojsonLayer.addData(data); buildLayerbox(data); });

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

var clickedFeatures=[];

highlightedLayers.forEach(layer=>geojsonLayer.resetStyle(layer)); highlightedLayers=[];

geojsonLayer.eachLayer(function(layer){

if(!map.hasLayer(layer)) return;

if(layer instanceof L.Polygon && pointInLayer(e.latlng,layer)){

clickedFeatures.push(layer.feature.properties); highlightedLayers.push(layer);

layer.setStyle({color:'yellow',weight:4,fillOpacity:0.6});

}

});

if(clickedFeatures.length>0) showPopup(clickedFeatures,e.latlng);

});

function showPopup(features,latlng){

var content="

";

features.forEach(function(props){

content+="

"+

""+(props.Name||"Unbekannt")+"
"+ ""+(props.Nutzung||"-")+"
"+ "Zeit: "+(props.von||"?")+" - "+(props.bis||"?")+"
"+ (props.Info||"")+

"

";

});

content+="

";

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

}

function pointInLayer(latlng,layer){

var lat=latlng.lat,lng=latlng.lng;

var polys=layer.getLatLngs();

if(layer.feature.geometry.type==="MultiPolygon"){ return polys.some(polyPart=>insidePolygon([lat,lng],polyPart[0])); }

return insidePolygon([lat,lng],polys[0]);

}

function insidePolygon(point,vs){

var x=point[0],y=point[1],inside=false;

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

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

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

if(intersect) inside=!inside;

}

return inside;

}

function buildLayerbox(data){

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

div.innerHTML=`

Layer

<input type="text" id="searchName" placeholder="Suche nach Name ..." class="search-input"> Historische Orte

▶ Historische Karten

<label><input type="checkbox" id="layerDOP2010"> 2010</label>
<label><input type="checkbox" id="layerDOP1998"> 1998</label>
<label><input type="checkbox" id="layerDOP1987"> 1987</label>

Transparenz

<input type="range" id="opacitySlider" min="0" max="100" value="60" style="width:100%;">

`;

L.DomEvent.disableClickPropagation(div);

var layerBox=L.control({position:'topright'}); layerBox.onAdd=function(){return div}; layerBox.addTo(map);

}

window.toggleGroup=function(id){

var el=document.getElementById(id);

if(!el) return;

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

};

});

</script>