Widget:LeafletWWW

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

   <style>

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

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

#map { width: 100%; height: 88vh; /* größere Karte */ border: 3px solid black; border-radius: 10px; }

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

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

#map-footer a { color: red; text-decoration: none; font-weight: bold; }

       .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; }
       .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; }
       .leaflet-bar button { cursor:pointer; font-weight:bold; }
       .layerbox b { display:block; margin-top:6px; }
       .search-input { width:100%; margin-bottom:6px; padding:4px; border:1px solid #ccc; border-radius:4px; }

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

.leaflet-control-geocoder { font-size: 12px; }

.leaflet-control-geocoder input { width: 140px; /* Breite kleiner */ height: 22px; /* Höhe kleiner */ font-size: 12px; padding: 2px 6px; }

.leaflet-control-geocoder-icon { width: 22px; height: 22px; }

#loader { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.7); z-index: 2000; display: flex; align-items: center; justify-content: center; }

.spinner { width: 50px; height: 50px; border: 6px solid #ccc; border-top: 6px solid #000; border-radius: 50%; animation: spin 1s linear infinite; }

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

</style> </head> <body>

Was War Wo

   // --- Karte ---

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

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

   // --- Farben für Nutzungen ---
   var nutzungColors = {

'Hof':'red', 'Mühle':'blue', 'Fabrik':'black', 'Gewerbe':'gray', 'Verwaltung':'orange', 'Bahn':'brown', 'Brücke':'navy', 'Flughafen':'green', 'Hafen':'blue', 'Abriss':'darkred', 'Versorgung':'gray', 'Tankstelle':'maroon', 'Brauerei':'yellow', 'Ziegelei':'red', 'Kloster':'orange', 'Kirche':'purple', 'Synagoge':'violet', 'Krankenhaus':'red', 'Friedhof':'green', 'Hochbunker':'black', 'Militär':'green', 'Äußerer Festungsring 1873-1914':'red', 'Stadtumwallung 1882-1891':'orange', 'Umwallung Deutz 1818-1840':'gray', 'Innerer Festungsring 1816-1873':'navy', 'Enceinte 1815-1829':'yellow', 'Bastionen 1632-1689':'gray', 'Umwallung Mülheim 1588-1614':'darkblue', 'Umwallung Worringen':'purple', 'Stadtmauer 1180-1259':'maroon', 'Stadterweiterung 1106-1141':'lightblue', 'Stadterweiterung 950':'cyan', 'Römische Befestigung':'blue', 'Wohnen':'brown', 'Schule':'red', 'Museum':'violet', 'Theater':'orange', 'Gastronomie':'purple', 'Hotel':'blue', 'Freizeit':'green'

};

   // --- WMS-Historische Karten ---
   var wmsDOP2010 = L.tileLayer.wms("https://www.wms.nrw.de/geobasis/wms_nw_hist_dop",{layers:"nw_hist_dop_2010",format:"image/png",transparent:true,opacity:0.6,attribution:"Orthophoto 2010"});
   var wmsDOP1998 = L.tileLayer.wms("https://www.wms.nrw.de/geobasis/wms_nw_hist_dop",{layers:"nw_hist_dop_1998",format:"image/png",transparent:true,opacity:0.6,attribution:"Orthophoto 1998"});
   var wmsDOP1987 = L.tileLayer.wms("https://www.wms.nrw.de/geobasis/wms_nw_hist_dop",{layers:"nw_hist_dop_1987",format:"image/png",transparent:true,opacity:0.6,attribution:"Orthophoto 1987"});
   var wmsDOP1981 = L.tileLayer.wms("https://www.wms.nrw.de/geobasis/wms_nw_hist_dop",{layers:"nw_hist_dop_1981",format:"image/png",transparent:true,opacity:0.6,attribution:"Orthophoto 1981"});
   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,attribution:"Orthophoto 1951"});

   var wmsMeyer = L.tileLayer("https://mapwarper.net/maps/tile/39790/{z}/{x}/{y}.png",{opacity:0.6, attribution:"Meyers Stadtplan 1900"});
   var wmsKataster1836 = L.tileLayer("https://mapwarper.net/maps/tile/99312/{z}/{x}/{y}.png",{opacity:0.6, attribution:"Kataster 1836"});
   var wmsKataster1836Kuhl = L.tileLayer("https://mapwarper.net/maps/tile/101214/{z}/{x}/{y}.png",{opacity:0.6, attribution:"Kataster 1836 (Kuhl)"});
   var wmsKataster1836HM = L.tileLayer('https://www.altes-koeln.de/tiles/Urriss_1836-7/{z}/{x}/{y}.png',{opacity:0.6, attribution:"Kataster 1836 Hellenkemper/Meynen"});
   var wmsVogtPicquet = L.tileLayer("https://mapwarper.net/maps/tile/39826/{z}/{x}/{y}.png",{opacity:0.6, attribution:"Vogt/Picquet 1815"});
   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,attribution:"Neuaufnahme 1891-1912"});
   var wmsUraufnahme = L.tileLayer.wms("https://www.wms.nrw.de/geobasis/wms_nw_uraufnahme",{layers:"nw_uraufnahme_rw",format:"image/png",transparent:true,opacity:0.6,attribution:"Uraufnahme 1836-1850"});
   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,attribution:"Tranchot 1801-1828"});
   var wmsStockdale = L.tileLayer("https://mapwarper.net/maps/tile/39780/{z}/{x}/{y}.png",{opacity:0.6, attribution:"Stockdale 1800"});
   var wmsReinhardt = L.tileLayer("https://mapwarper.net/maps/tile/41691/{z}/{x}/{y}.png",{opacity:0.6, attribution:"Reinhardt 1752"});
   var wmsMerian = L.tileLayer("https://mapwarper.net/maps/tile/39783/{z}/{x}/{y}.png",{opacity:0.6, attribution:"Merian 1641"});
   var wmsMercator = L.tileLayer("https://mapwarper.net/maps/tile/40952/{z}/{x}/{y}.png",{opacity:0.6, attribution:"Mercator 1571"});

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

   var highlightedLayers = [];

   // --- GeoJSON laden ---

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

// ✅ Loader ausblenden document.getElementById('loader').style.display = 'none'; });

   // --- Klick auf Polygon ---

map.on('click', function(e){ var clickedFeatures = [];

// alte Highlights zurücksetzen highlightedLayers.forEach(layer => geojsonLayer.resetStyle(layer)); highlightedLayers = [];

geojsonLayer.eachLayer(function(layer){ if(!map.hasLayer(layer)) return; // nur sichtbare Features

if(layer instanceof L.Polygon && pointInLayer(e.latlng, layer)){ clickedFeatures.push(layer.feature.properties); highlightedLayers.push(layer); layer.setStyle({fillColor:'yellow', color:"cyan", weight:4, fillOpacity:0.6}); } });

if(clickedFeatures.length > 0){ showPopup(clickedFeatures, e.latlng);

// --- nach 2 Sekunden alle Highlights zurücksetzen --- setTimeout(function(){ highlightedLayers.forEach(layer => geojsonLayer.resetStyle(layer)); highlightedLayers = []; }, 2000); // 2000ms = 2 Sekunden } });

   function showPopup(features, latlng){

var content = "

";

       if(features.length > 1){

content += "

"+features.length+" historische Orte hier

";

       }
       features.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(latlng)
           .setContent(content)
           .openOn(map);

       // Zoom auf alle ausgewählten Flächen
       var group = L.featureGroup(highlightedLayers);
       map.fitBounds(group.getBounds(), {padding:[40,40], maxZoom:17});
   }

   // --- Punkt-in-Polygon ---
   function pointInLayer(latlng, layer){
       var lat = latlng.lat, lng = latlng.lng;
       var polys = layer.getLatLngs();
       if(layer.feature.geometry.type==="MultiPolygon"){
           return polys.some(polyPart => insidePolygon([lat,lng], polyPart[0]));
       }
       return insidePolygon([lat,lng], polys[0]);
   }
   function insidePolygon(point, vs){
       var x=point[0], y=point[1], inside=false;
       for(var i=0,j=vs.length-1;i<vs.length;j=i++){
           var xi=vs[i].lat, yi=vs[i].lng;
           var xj=vs[j].lat, yj=vs[j].lng;
           var intersect = ((yi>y)!=(yj>y)) && (x < (xj-xi)*(y-yi)/(yj-yi)+xi);
           if(intersect) inside = !inside;
       }
       return inside;
   }

   // --- Layerbox & Suche ---

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

▶ Historische Karten

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

// --- dynamische Gruppen & Nutzungen --- var gruppenDiv = document.getElementById('gruppen'); var groups = {}; data.features.forEach(f => { if(!groups[f.properties.Gruppe]) groups[f.properties.Gruppe] = {}; if(!groups[f.properties.Gruppe][f.properties.Nutzung]) groups[f.properties.Gruppe][f.properties.Nutzung] = 0; groups[f.properties.Gruppe][f.properties.Nutzung]++; });

// --- Individuelle Reihenfolge der Gruppen --- var gruppenReihenfolge = [ "Verteidigen & Schützen", "Beten & Heilen", "Ackern & Mahlen", "Arbeiten & Transportieren", "Leben & Lernen" ];

var nutzungenReihenfolge = { "Verteidigen & Schützen": ["Militär","Hochbunker","Äußerer Festungsring 1873-1914","Stadtumwallung 1882-1891","Innerer Festungsring 1816-1873","Enceinte 1815-1829","Umwallung Deutz 1818-1840","Bastionen 1632-1689","Umwallung Mülheim 1588-1614","Umwallung Worringen","Stadtmauer 1180-1259","Stadterweiterung 1106-1141","Stadterweiterung 950","Römische Befestigung"], "Beten & Heilen": ["Kirche","Kloster","Synagoge","Krankenhaus","Friedhof"], "Ackern & Mahlen": ["Hof","Mühle"], "Arbeiten & Transportieren": ["Fabrik","Gewerbe", "Ziegelei","Brauerei","Verwaltung","Versorgung","Tankstelle","Bahn","Brücke","Flughafen","Hafen","Abriss"], "Leben & Lernen": ["Wohnen","Schule","Museum","Theater","Gastronomie","Hotel","Freizeit"] };

gruppenReihenfolge.forEach(g => { if(!groups[g]) return; // Gruppe existiert nicht im GeoJSON var gDiv = document.createElement('div');

gDiv.innerHTML = `

▶ ${g} <input type="checkbox" class="groupToggle" data-gruppe="${g}" checked>

`;

var inner = document.createElement('div'); inner.id = `g_${g}`; inner.style.marginLeft = "20px"; inner.style.display = "none";

// Nutzungen der Gruppe in individueller Reihenfolge var nutzungenArray = nutzungenReihenfolge[g] || Object.keys(groups[g]); nutzungenArray.forEach(n => { if(!groups[g][n]) return; // falls die Nutzung nicht existiert var color = nutzungColors[n] || "black"; inner.innerHTML += `<label style="color:black; display:flex; align-items:center; gap:4px;"> <input type="checkbox" class="layerNutzung" data-gruppe="${g}" data-nutzung="${n}" checked> ${n} (${groups[g][n]}) </label>
`; });

gDiv.appendChild(inner); gruppenDiv.appendChild(gDiv); });

// --- Restliche Event-Logik unverändert --- document.getElementById('layerToggle').addEventListener('click', function(){ var content = document.getElementById('layerContent'); content.style.display = (content.style.display === "none" || content.style.display === "") ? "block" : "none"; });

document.querySelectorAll('.groupArrow').forEach(arrow => { arrow.addEventListener('click', function() { var targetId = this.dataset.target; var el = document.getElementById(targetId); if (!el) return; var isHidden = (el.style.display === "none"); el.style.display = isHidden ? "block" : "none"; this.textContent = isHidden ? "▼" : "▶"; }); });

// --- Historische Karten Layer Toggle --- document.addEventListener('change', function(e){ var layerMap = { "layerDOP2010": wmsDOP2010, "layerDOP1998": wmsDOP1998, "layerDOP1987": wmsDOP1987, "layerDOP1981": wmsDOP1981, "layerDOP1951": wmsDOP1951, "layerMeyer": wmsMeyer, "layerKataster1836": wmsKataster1836, "layerKataster1836Kuhl": wmsKataster1836Kuhl, "layerKataster1836HM": wmsKataster1836HM, "layerVogtPicquet": wmsVogtPicquet, "layerStockdale": wmsStockdale, "layerReinhardt": wmsReinhardt, "layerMerian": wmsMerian, "layerMercator": wmsMercator, "layerNeuaufnahme": wmsNeuaufnahme, "layerUraufnahme": wmsUraufnahme, "layerTranchot": wmsTranchot }; if(layerMap[e.target.id]) toggleLayer(layerMap[e.target.id], e.target.checked); });

function toggleLayer(layer, visible){ if(visible) map.addLayer(layer); else map.removeLayer(layer); }

var opacitySlider = document.getElementById('opacitySlider'); var historicalLayers = [ wmsDOP2010, wmsDOP1998, wmsDOP1987, wmsDOP1981, wmsDOP1951, wmsMeyer, wmsKataster1836, wmsKataster1836Kuhl, wmsKataster1836HM, wmsVogtPicquet, wmsStockdale, wmsReinhardt, wmsMerian, wmsMercator, wmsNeuaufnahme, wmsUraufnahme, wmsTranchot ]; opacitySlider.addEventListener('input', function(){ var value = this.value / 100; historicalLayers.forEach(layer => { if(map.hasLayer(layer)) layer.setOpacity(value); else layer.options.opacity = value; }); }); }

// --- Toggle-Funktion mit Pfeil ▶ / ▼ --- function toggleGroup(id){ var el = document.getElementById(id); if(!el) return; var isHidden = (el.style.display==="none"); el.style.display = isHidden ? "block" : "none"; var bTag = el.previousElementSibling; if(bTag){ bTag.innerHTML = (isHidden ? "▼ " : "▶ ") + bTag.textContent.slice(2); } }

</script> </body> </html>

Altes Köln

Widget:LeafletWWW

☰ Layer