Widget:LeafletWasWarWo

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

<style>

1. map-frame-www{

border-radius:8px; }

1. map-www{

width:100%; height:80vh; border:3px solid black; border-radius:10px; }

.legend{ display:none; line-height:18px; color:#555; background:rgba(255,255,255,0.85); padding:10px; border-radius:5px; box-shadow:0 0 15px rgba(0,0,0,0.2); }

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

.leaflet-popup-close-button{ font-size:24px !important; padding:6px !important; }

.www-title{ text-align:center; font-weight:bold; font-size:20px; }

.www-footer{ text-align:center; margin-top:10px; }

</style>

Köln – Was War Wo

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

<script> (function(){

var map=L.map('map-www',{ preferCanvas:true, tap:window.screen.width<600 }).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({ "Open Street Map":osm, "Satellit":satellite }).addTo(map);

L.Control.geocoder({ position:'topleft', defaultMarkGeocode:true, placeholder:"Suche ..." }).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.whenReady(function(){

fetch('/images/WWW.geojson')

.then(response=>response.json())

.then(data=>{

var geojsonLayer=L.geoJSON(data,{

renderer:L.canvas(),

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

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.length+

" historische Orte hier

";

}

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;">➔ Mehr Infos</a>'

;

content+=

"

"+

""+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) .openOn(map);

}

});

});

});

var legend=L.control({position:'bottomright'});

legend.onAdd=function(){

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

var grades=[ {label:'Verteidigen & Schützen',color:'blue'}, {label:'Arbeiten & Transportieren',color:'gray'}, {label:'Beten & Heilen',color:'purple'}, {label:'Ackern & Mahlen',color:'green'}, {label:'Leben & Lernen',color:'orange'} ];

div.innerHTML+='Kategorien
';

for(var i=0;i<grades.length;i++){ div.innerHTML+=' '+grades[i].label+'
'; }

return div; };

legend.addTo(map);

var toggleButton=L.control({position:'bottomright'});

toggleButton.onAdd=function(){

var btn=L.DomUtil.create('button','leaflet-bar');

btn.innerHTML='Legende';

btn.style.padding='5px 10px'; btn.style.cursor='pointer'; btn.style.backgroundColor='white'; btn.style.fontWeight='bold'; btn.style.border='2px solid rgba(0,0,0,0.2)'; btn.style.borderRadius='4px';

btn.onclick=function(e){

L.DomEvent.stopPropagation(e);

var legendDiv=document.querySelector('.legend');

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

};

return btn;

};

toggleButton.addTo(map);

})(); </script>