Altes Köln

Widget:KoelnGebietsentwicklung: Unterschied zwischen den Versionen

Aus Altes Köln
Wechseln zu:Navigation, Suche
VisuellWikitext
Die Seite wurde neu angelegt: „<noinclude> Karte – Köln Gebietsentwicklung </noinclude> <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> #map-frame-gebiet { margin:10px; border-ra…“
 
Keine Bearbeitungszusammenfassung
 
Zeile 1: Zeile 1:
<noinclude>
<!DOCTYPE html>
Karte – Köln Gebietsentwicklung
<html>
</noinclude>
<head>
<title>Gebietsentwicklung</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>


<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"/>
<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>
<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>
#map-frame-gebiet {
margin:10px;
border-radius:12px;
overflow:hidden;
box-shadow:0 5px 15px rgba(0,0,0,0.25);
}


#map-gebiet {
        body { padding:10px; font-family:sans-serif; }
height:80vh;
width:100%;
        #map-frame { border-radius:8px; position: relative;}
}
#map {
width: 100%;
height: 88vh;    /* größere Karte */
border: 3px solid black;
border-radius: 10px;
}


.gebiet-header {
#map-title {
text-align:center;
position: absolute;
padding:14px;
top: 10px;
font-size:22px;
left: 50%;
font-weight:600;
transform: translateX(-50%);
color:#2c3e50;
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);
}


.gebiet-footer {
#map-footer {
text-align:center;
position: absolute;
margin-top:8px;
bottom: 10px;
font-size:14px;
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);
}


.gebiet-footer a{
#map-footer a {
color:#d62828;
color: red;
text-decoration:none;
text-decoration: none;
}
font-weight: bold;
}
</style>
</head>
<body>


.leaflet-popup-content{
<div id="map-frame">
font-size:14px;
}
</style>


<div class="gebiet-header">
<div id="map-title">Gebietsentwicklung</div>
Köln – Gebietsentwicklung
</div>


<div id="map-frame-gebiet">
<div id="map"></div>
<div id="map-gebiet"></div>
</div>


<div class="gebiet-footer">
<div id="map-footer">
<a href="https://hermsdoerfer.familyds.com/" target="_blank">
<a href="https://hermsdoerfer.familyds.com/" target="_blank">
© Dietmar Hermsdörfer
© Dietmar Hermsdörfer
</a>
</a>
</div>
</div>


<script>
</div>
(function(){


const map = L.map('map-gebiet',{
<script>
tap: window.screen.width < 600
// Karte erzeugen
}).setView([50.95,6.95],11);
const map = L.map('map', {
tap: window.screen.width < 600
}).setView([50.95, 6.95], 11);


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


const satellit = L.tileLayer(
const satellit = 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}',
maxZoom: 18, attribution: 'Tiles © Esri'
{maxZoom:18, attribution:'Tiles © Esri'}
});
);


const groupEntwicklung = L.layerGroup().addTo(map);
// Layer-Gruppen für die Auswahl-Buttons
const groupStaende = L.layerGroup();
const groupEntwicklung = L.layerGroup().addTo(map); // Bleibt sichtbar
const groupStaende = L.layerGroup();               // NICHT direkt zur Karte hinzufügen


const baseMaps = {
// Layer Auswahl Menü (hier wird gesteuert, was angehakt ist)
"OpenStreetMap":osm,
const baseMaps = { "OpenStreetMap": osm, "Satellit": satellit };
"Satellit":satellit
const overlayMaps = {
};
"Gebietsentwicklung": groupEntwicklung,
"Gebietsstände": groupStaende
};
L.control.layers(baseMaps, overlayMaps, { collapsed: false }).addTo(map);


const overlayMaps = {
// Geocoder
"Gebietsentwicklung":groupEntwicklung,
L.Control.geocoder({ position: 'topleft', placeholder: 'Ort suchen...' }).addTo(map);
"Gebietsstände":groupStaende
};


L.control.layers(baseMaps,overlayMaps,{collapsed:false}).addTo(map);
// Stile
const styleRed = { radius: 7, fillColor: "#e63946", color: "#fff", weight: 1, fillOpacity: 0.9 };
const styleBlue = { radius: 7, fillColor: "#0077b6", color: "#fff", weight: 1, fillOpacity: 0.9 };
let selectedLayer = null;


L.Control.geocoder({
// Popup Logik
position:'topleft',
function createPopup(props, type) {
placeholder:'Ort suchen...'
// Holt den Namen egal ob er 'NAME' oder 'Name' geschrieben wird
}).addTo(map);
const name = props.NAME || props.Name || "Unbekannt";
let content = `<div style="line-height:1.6;"><b style="font-size:16px;">${name}</b><hr style="margin:5px 0; border:0; border-top:1px solid #eee;">`;
if (type === 'entwicklung') {
content += `<b>Wann</b> ${props.DATUM || "-"}<br><b>Info:</b> ${props.ERWEITERUNG || "-"}<br><b>Fläche:</b> ${props.FLAECHE || "-"} km²`;
} else {
// Gebietsstände: Name ist bereits oben, hier nur noch die restlichen Infos
content += `<b>Fläche:</b> ${props.Flaeche || props.FLAECHE || "-"} km²`;
}
content += `</div>`;
return content;
}


const styleRed={
// Lade-Funktion
radius:7,
function loadGeoJSON(url, group, style, type) {
fillColor:"#e63946",
fetch(url)
color:"#fff",
.then(res => res.json())
weight:1,
.then(data => {
fillOpacity:0.9
const geoLayer = L.geoJSON(data, {
};
pointToLayer: (feature, latlng) => L.circleMarker(latlng, style),
onEachFeature: (feature, layer) => {
layer.bindPopup(createPopup(feature.properties, type), { maxWidth: 250 });
layer.on({
mouseover: e => {
if (e.target !== selectedLayer) e.target.setRadius(10);
},
mouseout: e => {
if (e.target !== selectedLayer) geoLayer.resetStyle(e.target);
},
click: e => {
// Alle Layer zurücksetzen
[groupEntwicklung, groupStaende].forEach(group => {
if (group.mainLayer) group.mainLayer.resetStyle();
});


const styleBlue={
selectedLayer = e.target;
radius:7,
selectedLayer.setStyle({  
fillColor:"#0077b6",
radius: 12,  
color:"#fff",
fillColor: "yellow",  
weight:1,
weight: 3,
fillOpacity:0.9
color: "cyan"  
};
});
if (selectedLayer.bringToFront) selectedLayer.bringToFront();
L.DomEvent.stopPropagation(e);
}
});
}
}).addTo(group);
// Wichtig: Referenz für Reset speichern
group.mainLayer = geoLayer;
})
.catch(error => console.error("Fehler bei " + url, error));
}


let selectedLayer=null;


function createPopup(props,type){
// Daten laden (Dateien müssen im selben Ordner wie das HTML liegen)
loadGeoJSON('/alteskoeln/Gebietsentwicklung.geojson', groupEntwicklung, styleRed, 'entwicklung');
loadGeoJSON('/alteskoeln/Gebietsstaende.geojson', groupStaende, styleBlue, 'staende');


const name=props.NAME || props.Name || "Unbekannt";
// Reset Klick
map.on('click', () => {
if (selectedLayer) {
if(groupEntwicklung.mainLayer) groupEntwicklung.mainLayer.resetStyle();
if(groupStaende.mainLayer) groupStaende.mainLayer.resetStyle();
selectedLayer = null;
}
});


let content='<div style="line-height:1.6;"><b style="font-size:16px;">'+name+'</b><hr>';
const resetControl = L.control({ position: 'topleft' });


if(type==="entwicklung"){
</script>
content+='<b>Datum:</b> '+(props.DATUM||"-")+
</body>
'<br><b>Erweiterung:</b> '+(props.ERWEITERUNG||"-")+
</html>
'<br><b>Fläche:</b> '+(props.FLAECHE||"-")+' km²';
}else{
content+='<b>Fläche:</b> '+(props.Flaeche||props.FLAECHE||"-")+' km²';
}
 
content+='</div>';
 
return content;
}
 
function loadGeoJSON(url,group,style,type){
 
fetch(url)
.then(res=>res.json())
.then(data=>{
 
const geoLayer=L.geoJSON(data,{
 
pointToLayer:(feature,latlng)=>L.circleMarker(latlng,style),
 
onEachFeature:(feature,layer)=>{
 
layer.bindPopup(createPopup(feature.properties,type),{maxWidth:250});
 
layer.on({
 
mouseover:e=>{
if(e.target!==selectedLayer)
e.target.setRadius(10);
},
 
mouseout:e=>{
if(e.target!==selectedLayer)
geoLayer.resetStyle(e.target);
},
 
click:e=>{
 
[groupEntwicklung,groupStaende].forEach(g=>{
if(g.mainLayer) g.mainLayer.resetStyle();
});
 
selectedLayer=e.target;
 
selectedLayer.setStyle({
radius:12,
fillColor:"#ffbe0b",
weight:3,
color:"#000"
});
 
if(selectedLayer.bringToFront)
selectedLayer.bringToFront();
 
L.DomEvent.stopPropagation(e);
}
 
});
 
}
 
}).addTo(group);
 
group.mainLayer=geoLayer;
 
});
 
}
 
loadGeoJSON('/alteskoeln/Gebietsentwicklung.geojson',groupEntwicklung,styleRed,'entwicklung');
loadGeoJSON('/alteskoeln/Gebietsstaende.geojson',groupStaende,styleBlue,'staende');
 
map.on('click',()=>{
 
if(selectedLayer){
 
if(groupEntwicklung.mainLayer) groupEntwicklung.mainLayer.resetStyle();
if(groupStaende.mainLayer) groupStaende.mainLayer.resetStyle();
 
selectedLayer=null;
 
}
 
});
 
})();
</script>

Aktuelle Version vom 18. März 2026, 10:48 Uhr

<!DOCTYPE html> <html> <head> <title>Gebietsentwicklung</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

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

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

</style> </head> <body>

Gebietsentwicklung

<script> // Karte erzeugen const map = L.map('map', { tap: window.screen.width < 600 }).setView([50.95, 6.95], 11);

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

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

// Layer-Gruppen für die Auswahl-Buttons const groupEntwicklung = L.layerGroup().addTo(map); // Bleibt sichtbar const groupStaende = L.layerGroup(); // NICHT direkt zur Karte hinzufügen

// Layer Auswahl Menü (hier wird gesteuert, was angehakt ist) const baseMaps = { "OpenStreetMap": osm, "Satellit": satellit }; const overlayMaps = { "Gebietsentwicklung": groupEntwicklung, "Gebietsstände": groupStaende }; L.control.layers(baseMaps, overlayMaps, { collapsed: false }).addTo(map);

// Geocoder L.Control.geocoder({ position: 'topleft', placeholder: 'Ort suchen...' }).addTo(map);

// Stile const styleRed = { radius: 7, fillColor: "#e63946", color: "#fff", weight: 1, fillOpacity: 0.9 }; const styleBlue = { radius: 7, fillColor: "#0077b6", color: "#fff", weight: 1, fillOpacity: 0.9 };

let selectedLayer = null;

// Popup Logik function createPopup(props, type) { // Holt den Namen egal ob er 'NAME' oder 'Name' geschrieben wird const name = props.NAME || props.Name || "Unbekannt";

let content = `

${name}
`;

if (type === 'entwicklung') { content += `Wann ${props.DATUM || "-"}
Info: ${props.ERWEITERUNG || "-"}
Fläche: ${props.FLAECHE || "-"} km²`; } else { // Gebietsstände: Name ist bereits oben, hier nur noch die restlichen Infos content += `Fläche: ${props.Flaeche || props.FLAECHE || "-"} km²`; }

content += `

`;

return content; }

// Lade-Funktion function loadGeoJSON(url, group, style, type) { fetch(url) .then(res => res.json()) .then(data => { const geoLayer = L.geoJSON(data, { pointToLayer: (feature, latlng) => L.circleMarker(latlng, style), onEachFeature: (feature, layer) => { layer.bindPopup(createPopup(feature.properties, type), { maxWidth: 250 });

layer.on({ mouseover: e => { if (e.target !== selectedLayer) e.target.setRadius(10); }, mouseout: e => { if (e.target !== selectedLayer) geoLayer.resetStyle(e.target); }, click: e => { // Alle Layer zurücksetzen [groupEntwicklung, groupStaende].forEach(group => { if (group.mainLayer) group.mainLayer.resetStyle(); });

selectedLayer = e.target; selectedLayer.setStyle({ radius: 12, fillColor: "yellow", weight: 3, color: "cyan" });

if (selectedLayer.bringToFront) selectedLayer.bringToFront(); L.DomEvent.stopPropagation(e); } }); } }).addTo(group);

// Wichtig: Referenz für Reset speichern group.mainLayer = geoLayer; }) .catch(error => console.error("Fehler bei " + url, error)); }


// Daten laden (Dateien müssen im selben Ordner wie das HTML liegen) loadGeoJSON('/alteskoeln/Gebietsentwicklung.geojson', groupEntwicklung, styleRed, 'entwicklung'); loadGeoJSON('/alteskoeln/Gebietsstaende.geojson', groupStaende, styleBlue, 'staende');

// Reset Klick map.on('click', () => { if (selectedLayer) { if(groupEntwicklung.mainLayer) groupEntwicklung.mainLayer.resetStyle(); if(groupStaende.mainLayer) groupStaende.mainLayer.resetStyle(); selectedLayer = null; } });

const resetControl = L.control({ position: 'topleft' });

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

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