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 18: Zeile 18:
<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>
<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>
<div id="map-frame">
<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>


<style>
<style>
Zeile 28: Zeile 42:
}
}


.layerbox {
.layerbox{
background:rgba(255,255,255,0.9);
background:rgba(255,255,255,0.9);
padding:10px;
padding:10px;
Zeile 38: Zeile 52:
}
}


.search-input {
.search-input{
width:100%;
width:100%;
margin-bottom:6px;
margin-bottom:6px;
Zeile 46: Zeile 60:
}
}


#map-frame {
#map-frame{
position:relative;
position:relative;
}
}


#map-title {
#map-title{
position:absolute;
position:absolute;
top:10px;
top:10px;
Zeile 64: Zeile 78:
}
}


#map-footer {
#map-footer{
position:absolute;
position:absolute;
bottom:10px;
bottom:10px;
Zeile 76: Zeile 90:
}
}


#map-footer a {
#map-footer a{
color:red;
color:red;
text-decoration:none;
text-decoration:none;
Zeile 85: Zeile 99:


<script>
<script>
document.addEventListener("DOMContentLoaded", function(){


var map = L.map('map',{
var map = L.map('map',{
preferCanvas:true,
preferCanvas:true,
tap: window.screen.width < 600,
zoomSnap:0.5,
zoomSnap:0.5,
zoomDelta:0.5
zoomDelta:0.5
Zeile 108: Zeile 123:
L.control.layers(
L.control.layers(
{
{
"Open Street Map":osm,
"OpenStreetMap":osm,
"Satellit":satellite
"Satellit":satellite
}
}
Zeile 116: Zeile 131:
L.Control.geocoder({
L.Control.geocoder({
position:'topleft',
position:'topleft',
defaultMarkGeocode:true,
placeholder:"Suche ..."
placeholder:"Suche ..."
}).addTo(map);
}).addTo(map);




var nutzungColors = {
var nutzungColors={
'Hof':'red',
'Hof':'red',
'Mühle':'blue',
'Mühle':'blue',
Zeile 149: Zeile 163:


var geojsonLayer = L.geoJSON(null,{
var geojsonLayer = L.geoJSON(null,{
renderer: L.canvas(),
renderer:L.canvas(),
style:function(feature){
style:function(feature){
return{
return{
Zeile 160: Zeile 174:




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


function buildLayerbox(data){
var div = L.DomUtil.create('div','layerbox');
div.innerHTML=`
<h4>Layer</h4>
<input type="text" id="searchName" placeholder="Suche nach Name ..." class="search-input">
<div id="gruppen"></div>
`;
L.DomEvent.disableClickPropagation(div);
var layerBox = L.control({position:'topright'});
layerBox.onAdd=function(){return div;};
layerBox.addTo(map);
var gruppenDiv=document.getElementById('gruppen');
var groups={};
data.features.forEach(f=>{
var g=f.properties.Gruppe || "Sonstiges";
var n=f.properties.Nutzung || "Unbekannt";
if(!groups[g]) groups[g]={};
if(!groups[g][n]) groups[g][n]=0;
groups[g][n]++;
});
for(var g in groups){
var gDiv=document.createElement('div');
gDiv.innerHTML=`<b>${g}</b><br>`;
for(var n in groups[g]){
var color=nutzungColors[n] || "black";
gDiv.innerHTML+=`
<label style="display:flex;align-items:center;gap:4px;">
<span style="width:14px;height:14px;background:${color};display:inline-block;border:1px solid #000;"></span>
<input type="checkbox" class="layerNutzung" data-gruppe="${g}" data-nutzung="${n}" checked>
${n} (${groups[g][n]})
</label><br>
`;
}
gruppenDiv.appendChild(gDiv);
}
document.querySelectorAll('.layerNutzung').forEach(cb=>{
cb.addEventListener('change',function(){
var gruppe=this.dataset.gruppe;
var nutzung=this.dataset.nutzung;
geojsonLayer.eachLayer(layer=>{
if(layer.feature.properties.Gruppe===gruppe &&
layer.feature.properties.Nutzung===nutzung){
if(cb.checked) map.addLayer(layer);
else map.removeLayer(layer);
}
});
});
});
document.getElementById('searchName').addEventListener('input',function(){
var val=this.value.toLowerCase();
geojsonLayer.eachLayer(layer=>{
if(!layer.feature.properties.Name) return;
if(layer.feature.properties.Name.toLowerCase().includes(val)){
layer.setStyle({
color:'yellow',
weight:4,
fillOpacity:0.6
});
}else{
geojsonLayer.resetStyle(layer);
}
});
});
}
});


</script>
</script>

Version vom 14. März 2026, 14:10 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>

Was War Wo

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

document.addEventListener("DOMContentLoaded", function(){

var map = L.map('map',{ preferCanvas:true, 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( { "OpenStreetMap":osm, "Satellit":satellite } ).addTo(map);


L.Control.geocoder({ position:'topleft', 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('/images/WWW.geojson') .then(res=>res.json()) .then(data=>{ geojsonLayer.addData(data); buildLayerbox(data); });


function buildLayerbox(data){

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

div.innerHTML=`

Layer

<input type="text" id="searchName" placeholder="Suche nach Name ..." class="search-input">

`;

L.DomEvent.disableClickPropagation(div);

var layerBox = L.control({position:'topright'}); layerBox.onAdd=function(){return div;}; layerBox.addTo(map);


var gruppenDiv=document.getElementById('gruppen');

var groups={};

data.features.forEach(f=>{ var g=f.properties.Gruppe || "Sonstiges"; var n=f.properties.Nutzung || "Unbekannt";

if(!groups[g]) groups[g]={}; if(!groups[g][n]) groups[g][n]=0;

groups[g][n]++; });


for(var g in groups){

var gDiv=document.createElement('div');

gDiv.innerHTML=`${g}
`;

for(var n in groups[g]){

var color=nutzungColors[n] || "black";

gDiv.innerHTML+=` <label style="display:flex;align-items:center;gap:4px;"> <input type="checkbox" class="layerNutzung" data-gruppe="${g}" data-nutzung="${n}" checked> ${n} (${groups[g][n]}) </label>
`;

}

gruppenDiv.appendChild(gDiv);

}


document.querySelectorAll('.layerNutzung').forEach(cb=>{

cb.addEventListener('change',function(){

var gruppe=this.dataset.gruppe; var nutzung=this.dataset.nutzung;

geojsonLayer.eachLayer(layer=>{

if(layer.feature.properties.Gruppe===gruppe && layer.feature.properties.Nutzung===nutzung){

if(cb.checked) map.addLayer(layer); else map.removeLayer(layer);

}

});

});

});


document.getElementById('searchName').addEventListener('input',function(){

var val=this.value.toLowerCase();

geojsonLayer.eachLayer(layer=>{

if(!layer.feature.properties.Name) return;

if(layer.feature.properties.Name.toLowerCase().includes(val)){

layer.setStyle({ color:'yellow', weight:4, fillOpacity:0.6 });

}else{

geojsonLayer.resetStyle(layer);

}

});

});

}

});

</script>

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