Widget:LeafletWWW

<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/WasWarWo.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="

";

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 += ""+name+"
" +""+nutzung+"
" +"Zeit: "+von+" – "+bis+"
"

+"

"+info+"

---

";

});

content+="

";

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

L.DomEvent.disableClickPropagation(div); L.DomEvent.disableScrollPropagation(div);

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

`;

return div;

};

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

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>