Widget:LeafletWWW-HK
<!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>
Köln – Was War Wo - Historische Karten
<a href="https://hermsdoerfer.familyds.com/" target="_blank" style="text-decoration:none;font-size:15px;color:red;"> © Dietmar Hermsdörfer </a>
<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 = "
if(clickedFeatures.length > 1){
content += " }
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;font-size:1em;">➔ Mehr Infos</a>' : ;
""+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) .addTo(map); // durchstechend } });
// --- Layerbox (ausgeklappt) --- var layerBox=L.control({position:'topright'}); layerBox.onAdd=function(){ var div=L.DomUtil.create('div','layerbox'); div.innerHTML=`
☰
Historische Orte
<label><input type="checkbox" id="layerWWW" checked> Was War Wo</label>
Historische Karten
<label><input type="checkbox" id="layerDOP1951"> 1951 Orthophoto</label>
<label><input type="checkbox" id="layerNeuaufnahme"> ~1890 Neuaufnahme</label>
<label><input type="checkbox" id="layerTranchot"> 1801–1828 Tranchot</label>
<label><input type="checkbox" id="layerMercator"> 1751 Mercator</label>
Transparenz
<input type="range" id="opacitySlider" min="0" max="1" step="0.1" value="0.6">
`; 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=`
Was War Wo
Verteidigen & Schützen
Arbeiten & Transportieren
Beten & Heilen
Ackern & Mahlen
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>