Altes Köln

Widget:KoelnWasWarWoPro: Unterschied zwischen den Versionen

Aus Altes Köln
Wechseln zu:Navigation, Suche
← Zum vorherigen Versionsunterschied
VisuellWikitext
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
 
(Eine dazwischenliegende Version desselben Benutzers wird nicht angezeigt)
Zeile 3: Zeile 3:
</noinclude>
</noinclude>


<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<html>
<link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css"/>
<head>
<title>Köln - Was War Wo</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>


<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
<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>


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


#map-frame-www{
#map-frame{
border-radius:8px;
border-radius:8px;
}
}


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


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


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


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


.www-title{
</style>
text-align:center;
</head>
font-weight:bold;
font-size:20px;
}


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


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


<p class="www-title">
<div id="map-frame">
Köln – Was War Wo
<div id="map"></div>
</p>
</div>


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


<div class="www-footer">
<script>
<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>
var map=L.map('map',{
(function(){
preferCanvas:true,
tap:window.screen.width<600
}).setView([50.95,6.95],12);


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


var osm=L.tileLayer(
var osm=L.tileLayer(
'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
'https://tile.openstreetmap.org/{z}/{x}/{y}.png',{
{maxZoom:19,attribution:'© OpenStreetMap'}
maxZoom:19,
).addTo(map);
attribution:'© OpenStreetMap'
});


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


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


L.Control.geocoder({
var baseMaps={
position:'topleft',
"Open Street Map":osm,
defaultMarkGeocode:true,
"Satellit":satellite
placeholder:"Suche ..."
};
}).addTo(map);


function isPointInPolygon(latlng,layer){
L.control.layers(baseMaps).addTo(map);


var coords=layer.getLatLngs();
// --- Geocoder ---
L.Control.geocoder({position:'topleft',defaultMarkGeocode:true,placeholder:"Suche ..."}).addTo(map);


if(layer.feature.geometry.type==="MultiPolygon"){
function isPointInPolygon(latlng,layer){
return coords.some(part=>isInside(latlng,part[0]));
}


return isInside(latlng,coords[0]);
var coords=layer.getLatLngs();
}


function isInside(latlng,poly){
if(layer.feature.geometry.type==="MultiPolygon"){
return coords.some(part=>isInside(latlng,part[0]));
}


var x=latlng.lat;
return isInside(latlng,coords[0]);
var y=latlng.lng;
}
var inside=false;


for(var i=0,j=poly.length-1;i<poly.length;j=i++){
function isInside(latlng,poly){


var xi=poly[i].lat;
var x=latlng.lat;
var yi=poly[i].lng;
var y=latlng.lng;
var xj=poly[j].lat;
var yj=poly[j].lng;


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


if(intersect) inside=!inside;
for(var i=0,j=poly.length-1;i<poly.length;j=i++){


}
var xi=poly[i].lat;
var yi=poly[i].lng;


return inside;
var xj=poly[j].lat;
}
var yj=poly[j].lng;


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


fetch('/alteskoeln/WasWarWo.geojson')
if(intersect) inside=!inside;


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


.then(data=>{
return inside;
}


var geojsonLayer=L.geoJSON(data,{


renderer:L.canvas(),


style:function(feature){
map.whenReady(function(){


var colors={
fetch('/alteskoeln/WasWarWo.geojson')
'Verteidigen & Schützen':'blue',
'Arbeiten & Transportieren':'gray',
'Beten & Heilen':'purple',
'Ackern & Mahlen':'green',
'Leben & Lernen':'orange'
};


return{
.then(response=>{
color:colors[feature.properties.Gruppe] || "black",
if(!response.ok){
weight:2,
throw new Error("GeoJSON konnte nicht geladen werden");
fillOpacity:0.4
}
};
return response.json();
})


}
.then(data=>{


}).addTo(map);
setTimeout(function(){


map.on('click',function(e){
var geojsonLayer=L.geoJSON(data,{


var clickedFeatures=[];
renderer:L.canvas(),


geojsonLayer.eachLayer(function(layer){
style:function(feature){


if(isPointInPolygon(e.latlng,layer)){
var colors={
clickedFeatures.push(layer.feature.properties);
'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
};


if(clickedFeatures.length>0){
}


var content="<div style='max-height:50vh;overflow-y:auto;min-width:200px;'>";
}).addTo(map);


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


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


clickedFeatures.forEach(function(props){
var clickedFeatures=[];


var name=props.Name || "Unbekannt";
geojsonLayer.eachLayer(function(layer){
var nutzung=props.Nutzung || "-";
var von=props.von || "?";
var bis=props.bis || "?";
var info=props.Info || "";


var bild=props.Bild ?
if(isPointInPolygon(e.latlng,layer)){
'<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>'
clickedFeatures.push(layer.feature.properties);
:'';
}


var link=props.Link ?
});
'<br><a href="'+props.Link+'" target="_blank" style="color:blue;">➔ Mehr Infos</a>'
:'';


content+=
if(clickedFeatures.length>0){
"<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>";


});
var content="<div style='max-height:50vh;overflow-y:auto;min-width:200px;'>";


content+="</div>";
if(clickedFeatures.length>1){


L.popup({
content+="<div style='background:#eee;padding:8px;margin-bottom:12px;font-weight:bold;text-align:center;border-radius:6px;'>"
maxWidth:window.innerWidth<600?300:400,
+clickedFeatures.length+
minWidth:window.innerWidth<600?220:250,
" historische Orte hier</div>";
autoPanPadding:[20,20]
})
.setLatLng(e.latlng)
.setContent(content)
.openOn(map);


}
}


});
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 legend=L.control({position:'bottomright'});
var link=props.Link ?
'<br><a href="'+props.Link+'" target="_blank" style="color:blue;font-size:1em;">➔ Mehr Infos</a>'
:'';


legend.onAdd=function(){
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>";


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


var grades=[
content+="</div>";
{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+='<b>Kategorien</b><br>';
L.popup({


for(var i=0;i<grades.length;i++){
maxWidth:window.innerWidth<600?300:400,
div.innerHTML+='<i style="background:'+grades[i].color+'"></i> '+grades[i].label+'<br>';
minWidth:window.innerWidth<600?220:250,
}
autoPanPadding:[20,20]


return div;
})
};
.setLatLng(e.latlng)
.setContent(content)
.openOn(map);


legend.addTo(map);
}


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


toggleButton.onAdd=function(){
},50);


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


btn.innerHTML='Legende';
.catch(error=>{
console.error("GeoJSON Fehler:",error);
});


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');
var legend=L.control({position:'bottomright'});


legendDiv.style.display=
legend.onAdd=function(){
(legendDiv.style.display==="none") ?
"block" : "none";


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


return btn;
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+='<b>Kategorien</b><br>';


toggleButton.addTo(map);
for(var i=0;i<grades.length;i++){


})();
div.innerHTML+='<i style="background:'+grades[i].color+'"></i> '+grades[i].label+'<br>';
</script>
 
}
 
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>
 
</body>
</html>

Aktuelle Version vom 9. März 2026, 21:30 Uhr

Leaflet Karte – Köln Was War Wo


<html> <head> <title>Köln - Was War Wo</title> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

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

#map{ 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; }

</style> </head>

<body>

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>

var map=L.map('map',{ 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' });

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

osm.addTo(map);

var baseMaps={ "Open Street Map":osm, "Satellit":satellite };

L.control.layers(baseMaps).addTo(map);

// --- Geocoder --- 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('/alteskoeln/WasWarWo.geojson')

.then(response=>{ if(!response.ok){ throw new Error("GeoJSON konnte nicht geladen werden"); } return response.json(); })

.then(data=>{

setTimeout(function(){

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;font-size:1em;">➔ 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);

}

});

},50);

})

.catch(error=>{ console.error("GeoJSON Fehler:",error); });

});


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>

</body> </html>

Abgerufen von „https://www.altes-koeln.de/index.php?title=Widget:KoelnWasWarWoPro&oldid=92632“