Altes Köln

Widget:Leaflet: Unterschied zwischen den Versionen

Aus Altes Köln
Wechseln zu:Navigation, Suche
Keine Bearbeitungszusammenfassung
Markierung: Zurückgesetzt
Keine Bearbeitungszusammenfassung
Markierungen: Manuelle Zurücksetzung Zurückgesetzt
Zeile 1: Zeile 1:
<!-- Kartencontainer -->
<div id="mapid" style="width: 100%; height: 500px;"></div>
<div id="map" style="height: 600px; width: 100%;"></div>


<!-- Leaflet + MarkerCluster CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css"/>
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css"/>
<!-- Leaflet + MarkerCluster JS -->
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>


<script>
<script>
 
  var map = L.map('mapid').setView([50.94, 6.96], 12);
// Layer-Container
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
var layerGrund = L.markerClusterGroup();
     maxZoom: 19,
var layerGym = L.markerClusterGroup();
     attribution: '© OpenStreetMap contributors'
var layerGes = L.markerClusterGroup();
  }).addTo(map);
var layerBeruf = L.markerClusterGroup();
var layerFoerder = L.markerClusterGroup();
 
// Karte
var map = L.map('map').setView([50.94, 6.96], 11);
 
// OSM Layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     maxZoom: 18
}).addTo(map);
 
// SMW-Daten werden ersetzt:
{{#ask:
[[Kategorie:Schule]]
|?Koordinaten
|?Schultyp
|?Has page=link
|format=array
|name=schoolData
}}
 
// Marker erzeugen
schoolData.forEach(function(school){
    if(!school.Koordinaten) return;
 
    var coords = school.Koordinaten.split(',');
     var lat = parseFloat(coords[0]);
    var lon = parseFloat(coords[1]);
 
    var marker = L.marker([lat, lon])
                .bindPopup('<strong>' + school.link + '</strong><br>' + school.Schultyp);
 
    switch(school.Schultyp){
        case "Grundschule":
            layerGrund.addLayer(marker);
            break;
        case "Gymnasium":
            layerGym.addLayer(marker);
            break;
        case "Gesamtschule":
            layerGes.addLayer(marker);
            break;
        case "Berufskolleg":
            layerBeruf.addLayer(marker);
            break;
        case "Förderschule":
            layerFoerder.addLayer(marker);
            break;
        default:
            layerGrund.addLayer(marker);
    }
 
});
 
// Standard-Layer zur Karte hinzufügen
layerGrund.addTo(map);
layerGym.addTo(map);
 
// Layer-Kontrolle (Legende)
var overlays = {
    "Grundschulen": layerGrund,
    "Gymnasien": layerGym,
    "Gesamtschulen": layerGes,
    "Berufskollegs": layerBeruf,
    "Förderschulen": layerFoerder
};
 
L.control.layers(null, overlays, {collapsed:false}).addTo(map);
 
</script>
</script>

Version vom 6. Dezember 2025, 22:49 Uhr

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/> <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>

<script> 

 var map = L.map('mapid').setView([50.94, 6.96], 12);
 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   maxZoom: 19,
   attribution: '© OpenStreetMap contributors'
 }).addTo(map);

</script>

Abgerufen von „https://altes-koeln.de/index.php?title=Widget:Leaflet&oldid=89513“
Cookies helfen uns bei der Bereitstellung von Altes Köln. Durch die Nutzung von Altes Köln erklärst du dich damit einverstanden, dass wir Cookies speichern.