Altes Köln

Widget:Leaflet: Unterschied zwischen den Versionen

Aus Altes Köln
Wechseln zu:Navigation, Suche
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 5: Zeile 5:
  [[Kategorie:Schule]]
  [[Kategorie:Schule]]
  |?Name=name
  |?Name=name
|?Schultyp=typ
  |?Koordinaten.Latitude=lat
  |?Koordinaten.Latitude=lat
  |?Koordinaten.Longitude=lon
  |?Koordinaten.Longitude=lon
Zeile 19: Zeile 20:


<script>
<script>
//<nowiki>
(function(){
(function(){
   var raw = document.getElementById('smw-data').textContent.trim();
   var raw = document.getElementById('smw-data').textContent.trim();
Zeile 41: Zeile 43:


   var map = L.map('map').setView([50.94, 6.96], 11);
   var map = L.map('map').setView([50.94, 6.96], 11);
   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     maxZoom: 18,
     maxZoom: 18,
Zeile 72: Zeile 75:
   });
   });


   // add default layers
   // Layer-Control anzeigen
  clusters.Grundschule.addTo(map);
  clusters.Gymnasium.addTo(map);
 
  // layer control
   L.control.layers(null, {
   L.control.layers(null, {
     "Grundschulen": clusters.Grundschule,
     "Grundschulen": clusters.Grundschule,
     "Gymnasien":   clusters.Gymnasium,
     "Gymnasien": clusters.Gymnasium,
     "Gesamtschulen": clusters.Gesamtschule,
     "Gesamtschulen": clusters.Gesamtschule,
     "Berufskollegs": clusters.Berufskolleg,
     "Berufskollegs": clusters.Berufskolleg,
     "Förderschulen": clusters.Förderschule
     "Förderschulen": clusters.Förderschule
   }, {collapsed:false}).addTo(map);
   }, {collapsed:false}).addTo(map);
  // Standard-Layer aktiv setzen
  clusters.Grundschule.addTo(map);
  clusters.Gymnasium.addTo(map);


   if (bounds.length) {
   if (bounds.length) {
Zeile 90: Zeile 93:


})();
})();
 
//</nowiki>
// SMW Marker Loader
// fehlerhaft var schoolData = {{{schoolData|[]}}};
var schoolData = JSON.parse(`{{{schoolData|[]}}}`);
 
// Marker-Layer
var layerGrund = L.markerClusterGroup();
var layerGym = L.markerClusterGroup();
var layerGes = L.markerClusterGroup();
var layerBeruf = L.markerClusterGroup();
var layerFoerder = L.markerClusterGroup();
 
schoolData.forEach(function(school){
    if(!school.Koordinaten) return;
 
    var coords = school.Koordinaten.split(',');
    var marker = L.marker([parseFloat(coords[0]), parseFloat(coords[1])])
        .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;
    }
 
 
// Layer hinzufügen
layerGrund.addTo(map);
layerGym.addTo(map);
layerGes.addTo(map);
layerBeruf.addTo(map);
layerFoerder.addTo(map);
 
// Layer Control
L.control.layers(null, {
    "Grundschulen": layerGrund,
    "Gymnasien": layerGym,
    "Gesamtschulen": layerGes,
    "Berufskollegs": layerBeruf,
    "Förderschulen": layerFoerder
}, {collapsed:false}).addTo(map);
 
});
</script>
</script>

Version vom 7. Dezember 2025, 17:06 Uhr

<script id="smw-data" type="application/json"> JSON </script>

<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 src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script> <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css"/> <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css"/>

<script> // (function(){ var raw = document.getElementById('smw-data').textContent.trim(); if (!raw) return; var data = JSON.parse(raw); var schoolData = []; if (data.results) { for (var key in data.results) { if (!data.results.hasOwnProperty(key)) continue; var rec = data.results[key]; var po = rec.printouts || {}; var coords = (po.Koordinaten && po.Koordinaten[0]) ? po.Koordinaten[0] : null; var typ = (po.Schultyp && po.Schultyp[0]) ? po.Schultyp[0] : ''; schoolData.push({ link: rec.fulltext || key, Schultyp: typ, Koordinaten: coords }); } } var map = L.map('map').setView([50.94, 6.96], 11); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '© OpenStreetMap contributors' }).addTo(map); var clusters = { Grundschule: L.markerClusterGroup(), Gymnasium: L.markerClusterGroup(), Gesamtschule: L.markerClusterGroup(), Berufskolleg: L.markerClusterGroup(), Förderschule: L.markerClusterGroup() }; var bounds = []; schoolData.forEach(function(s){ if (!s.Koordinaten) return; var parts = s.Koordinaten.split(','); if (parts.length !== 2) return; var lat = parseFloat(parts[0]), lon = parseFloat(parts[1]); if (isNaN(lat) || isNaN(lon)) return; var marker = L.marker([lat, lon]) .bindPopup('<strong>' + s.link + '</strong><br>' + s.Schultyp); var layer = clusters[s.Schultyp] || clusters.Grundschule; layer.addLayer(marker); bounds.push([lat, lon]); }); // Layer-Control anzeigen L.control.layers(null, { "Grundschulen": clusters.Grundschule, "Gymnasien": clusters.Gymnasium, "Gesamtschulen": clusters.Gesamtschule, "Berufskollegs": clusters.Berufskolleg, "Förderschulen": clusters.Förderschule }, {collapsed:false}).addTo(map); // Standard-Layer aktiv setzen clusters.Grundschule.addTo(map); clusters.Gymnasium.addTo(map); if (bounds.length) { map.fitBounds(bounds); } })(); // </script>

Abgerufen von „https://altes-koeln.de/index.php?title=Widget:Leaflet&oldid=89537“
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.