Altes Köln

Widget:LeafletWWW: Unterschied zwischen den Versionen

Aus Altes Köln
Wechseln zu:Navigation, Suche
← Zum vorherigen VersionsunterschiedZum nächsten Versionsunterschied →
VisuellWikitext
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
<div id="map" class="fullwidth"
<div id="map-frame">
style="height:80vh;border:3px solid black;border-radius:10px;"></div>
 
<div id="map-title">Was War Wo</div>
 
<div id="map"></div>
 
<div id="map-footer">
<a href="https://hermsdoerfer.familyds.com/" target="_blank">
© Dietmar Hermsdörfer
</a>
</div>
 
</div>


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


<style>
<style>


.legend{
#map {
display:none;
width:100%;
line-height:18px;
height:88vh;
border:3px solid black;
border-radius:10px;
}
 
.layerbox {
background:rgba(255,255,255,0.9);
background:rgba(255,255,255,0.9);
padding:10px;
padding:10px;
border-radius:6px;
border-radius:6px;
box-shadow:0 0 10px rgba(0,0,0,0.3);
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;
}
}


.legend i{
#map-frame {
width:18px;
position:relative;
height:18px;
float:left;
margin-right:8px;
}
}


.layerbox{
#map-title {
background:rgba(255,255,255,0.9);
position:absolute;
padding:10px;
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;
border-radius:6px;
box-shadow:0 0 10px rgba(0,0,0,0.3);
box-shadow:0 0 6px rgba(0,0,0,0.3);
font-size:14px;
}
}


.layerbox h4{
#map-footer {
margin:0;
position:absolute;
cursor:pointer;
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);
}
}


.layercontent{
#map-footer a {
display:block;
color:red;
margin-top:8px;
text-decoration:none;
font-weight:bold;
}
}


Zeile 48: Zeile 86:
<script>
<script>


setTimeout(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 map = L.map('map').setView([50.95,6.95],12);


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


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);
"OpenStreetMap":osm,
 
L.control.layers(
{
"Open Street Map":osm,
"Satellit":satellite
"Satellit":satellite
}).addTo(map);
}
).addTo(map);
 


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




var wmsDOP1951 = L.tileLayer.wms(
var nutzungColors = {
"https://www.wms.nrw.de/geobasis/wms_nw_hist_dop",
'Hof':'red',
{
'Mühle':'blue',
layers:"nw_hist_dop_1951",
'Fabrik':'black',
format:"image/png",
'Gewerbe':'gray',
transparent:true,
'Verwaltung':'orange',
opacity:0.6
'Bahn':'brown',
});
'Brücke':'navy',
 
'Hafen':'blue',
var wmsNeuaufnahme = L.tileLayer.wms(
'Flughafen':'green',
"https://www.wms.nrw.de/geobasis/wms_nw_neuaufnahme",
'Versorgung':'gray',
{
'Tankstelle':'maroon',
layers:"nw_neuaufnahme",
'Brauerei':'yellow',
format:"image/png",
'Ziegelei':'red',
transparent:true,
'Kloster':'orange',
opacity:0.6
'Kirche':'purple',
});
'Synagoge':'violet',
 
'Krankenhaus':'red',
var wmsTranchot = L.tileLayer.wms(
'Friedhof':'green',
"https://www.wms.nrw.de/geobasis/wms_nw_tranchot",
'Hochbunker':'black',
{
'Militär':'green',
layers:"nw_tranchot",
'Wohnen':'brown',
format:"image/png",
'Schule':'red',
transparent:true,
'Freizeit':'green'
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,{


var geojsonLayer = L.geoJSON(null,{
renderer: L.canvas(),
style:function(feature){
style:function(feature){
var colors={
'Verteidigen & Schützen':'blue',
'Arbeiten & Transportieren':'gray',
'Beten & Heilen':'purple',
'Ackern & Mahlen':'green',
'Leben & Lernen':'orange'
};
return{
return{
color:colors[feature.properties.Gruppe]||"black",
color:nutzungColors[feature.properties.Nutzung] || "black",
weight:2,
weight:2,
fillOpacity:0.4
fillOpacity:0.4
};
};
}
}
}).addTo(map);
}).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);
}


fetch('/alteskoeln/WWW.geojson')
.then(res=>res.json())
.then(data=>{
geojsonLayer.addData(data);
});
});
if(clickedFeatures.length>0){
var content="<div style='max-height:50vh;overflow-y:auto;min-width:200px;'>";
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 += "<b>"+name+"</b><br>"
+"<i>"+nutzung+"</i><br>"
+"Zeit: "+von+" – "+bis+"<br>"
+"<p>"+info+"</p><hr>";
});
content+="</div>";
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=`
<h4 id="layerToggle">☰</h4>
<div id="layerContent" class="layercontent">
<b>Historische Orte</b><br>
<label><input type="checkbox" id="layerWWW" checked> Was War Wo</label>
<br><br>
<b>Historische Karten</b><br>
<label><input type="checkbox" id="layerDOP1951"> 1951 Orthophoto</label><br>
<label><input type="checkbox" id="layerNeuaufnahme"> ~1890 Neuaufnahme</label><br>
<label><input type="checkbox" id="layerTranchot"> 1801–1828 Tranchot</label><br>
<label><input type="checkbox" id="layerMercator"> 1751 Mercator</label>
<br><br>
<b>Transparenz</b><br>
<input type="range" id="opacitySlider"
min="0" max="1" step="0.1" value="0.6">
</div>
`;
return div;
};
// --- Legende ---
var legend=L.control({position:'bottomright'});
legend.onAdd=function(){
var div=L.DomUtil.create('div','legend');
div.innerHTML=`
<b>Was War Wo</b><br>
<i style="background:blue"></i> Verteidigen & Schützen<br>
<i style="background:gray"></i> Arbeiten & Transportieren<br>
<i style="background:purple"></i> Beten & Heilen<br>
<i style="background:green"></i> Ackern & Mahlen<br>
<i style="background:orange"></i> 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>
</script>

Version vom 14. März 2026, 13:55 Uhr

Was War Wo

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

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>

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 geojsonLayer = L.geoJSON(null,{ renderer: L.canvas(), style:function(feature){ return{ color:nutzungColors[feature.properties.Nutzung] || "black", weight:2, fillOpacity:0.4 }; } }).addTo(map);


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


</script>

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