Altes Köln

Widget:Leaflet: Unterschied zwischen den Versionen

Aus Altes Köln
Wechseln zu:Navigation, Suche
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 1: Zeile 1:
<div id="map" style="width: 100%; height: 600px;"></div>
<div id="map" style="width:100%; height:600px;"></div>


<!-- SMW Datenabfrage -->
<!-- SMW-Daten als JSON array -->
<script id="smw-data" type="application/json">
<script id="smw-data" type="application/json">
[
[
Zeile 12: Zeile 12:
  |template=SchulJSON
  |template=SchulJSON
  |sep=,
  |sep=,
|plain=yes
  |headers=hide
  |headers=hide
  |link=none
  |link=none
|plain=yes
}}
}}
]
]
</script>
</script>


<!-- Leaflet Ressourcen -->
<!-- Leaflet & Cluster Libs -->
<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"/>
<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>
Zeile 28: Zeile 28:


<script>
<script>
(function() {
(function(){
     // Daten aus SMW holen
 
     // JSON aus Scriptblock holen
     var raw = document.getElementById('smw-data').textContent.trim();
     var raw = document.getElementById('smw-data').textContent.trim();
    if (!raw) return;
    var json = JSON.parse(raw);
    var data = [];
    // JSON in vernünftige Objekte überführen
    if (json.results) {
        for (var key in json.results) {
            if (!json.results.hasOwnProperty(key)) continue;
            var rec = json.results[key];
            var po  = rec.printouts || {};
            var coords = po.coords && po.coords[0] ? po.coords[0] : null;
            var typ    = po.type && po.type[0] ? po.type[0] : 'Unbekannt';
            var name  = po.name && po.name[0] ? po.name[0] : rec.fulltext;


            data.push({
    // JSON sicher parsen
                name: name,
    var schoolData = [];
                type: typ,
    try {
                coords: coords
        schoolData = JSON.parse(raw);
            });
    } catch(e) {
         }
        console.error("Fehler beim Parsen der SMW Daten:", e, raw);
         return;
     }
     }


     // Leaflet Karte erzeugen
     // Karte erstellen
     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,
         attribution: '© OpenStreetMap contributors'
         attribution:'© OpenStreetMap contributors'
     }).addTo(map);
     }).addTo(map);


     // Cluster nach Schultyp
     // Cluster Gruppen
     var clusters = {
     var clusters = {
         Grundschule: L.markerClusterGroup(),
         Grundschule:   L.markerClusterGroup(),
         Gymnasium: L.markerClusterGroup(),
         Gymnasium:     L.markerClusterGroup(),
         Gesamtschule: L.markerClusterGroup(),
         Gesamtschule: L.markerClusterGroup(),
         Berufskolleg: L.markerClusterGroup(),
         Berufskolleg: L.markerClusterGroup(),
         Förderschule: L.markerClusterGroup(),
         Förderschule: L.markerClusterGroup(),
         Unbekannt: L.markerClusterGroup()
         Unbekannt:     L.markerClusterGroup()
     };
     };


Zeile 76: Zeile 63:


     // Marker erzeugen
     // Marker erzeugen
     data.forEach(function(s) {
     schoolData.forEach(function(s){
         if (!s.coords) return;
         if (!s.coords) return;
         var parts = s.coords.split(',');
         var parts = s.coords.split(',');
         if (parts.length !== 2) return;
         if (parts.length !== 2) return;
Zeile 83: Zeile 71:
         var lat = parseFloat(parts[0]);
         var lat = parseFloat(parts[0]);
         var lon = parseFloat(parts[1]);
         var lon = parseFloat(parts[1]);
         if (isNaN(lat) || isNaN(lon)) return;
         if (isNaN(lat) || isNaN(lon)) return;
        var type = s.type || "Unbekannt";


         var marker = L.marker([lat, lon])
         var marker = L.marker([lat, lon])
             .bindPopup('<strong>' + s.name + '</strong><br>' + s.type);
             .bindPopup('<strong>' + s.name + '</strong><br>' + type);


         var layer = clusters[s.type] || clusters.Unbekannt;
         var group = clusters[type] || clusters.Unbekannt;
         layer.addLayer(marker);
         group.addLayer(marker);


         bounds.push([lat, lon]);
         bounds.push([lat, lon]);
     });
     });


     // Markergruppen aktivieren
     // Alle Cluster zur Karte hinzufügen
     Object.values(clusters).forEach(function(group) {
     Object.values(clusters).forEach(function(g){
         map.addLayer(group);
         map.addLayer(g);
     });
     });


     // Layersteuerung
     // Layer-Steuerung
     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,
         "Sonstige":       clusters.Unbekannt
         "Sonstige":     clusters.Unbekannt
     }, {collapsed:false}).addTo(map);
     }, {collapsed:false}).addTo(map);


     // Karte auf Marker zoomen
     // Kartenausschnitt automatisch anpassen
     if (bounds.length) {
     if (bounds.length) {
         map.fitBounds(bounds);
         map.fitBounds(bounds);
     }
     }
})();
})();
</script>
</script>

Version vom 7. Dezember 2025, 17:38 Uhr

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

{ 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}

, { 

 "name": "",
 "type": "Unbekannt",
 "coords": ""

}


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

<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 src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>

<script> (function(){ 

   // JSON aus Scriptblock holen
   var raw = document.getElementById('smw-data').textContent.trim();

   // JSON sicher parsen
   var schoolData = [];
   try {
       schoolData = JSON.parse(raw);
   } catch(e) {
       console.error("Fehler beim Parsen der SMW Daten:", e, raw);
       return;
   }

   // Karte erstellen
   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);

   // Cluster Gruppen
   var clusters = {
       Grundschule:   L.markerClusterGroup(),
       Gymnasium:     L.markerClusterGroup(),
       Gesamtschule:  L.markerClusterGroup(),
       Berufskolleg:  L.markerClusterGroup(),
       Förderschule:  L.markerClusterGroup(),
       Unbekannt:     L.markerClusterGroup()
   };

   var bounds = [];

   // Marker erzeugen
   schoolData.forEach(function(s){
       if (!s.coords) return;

       var parts = s.coords.split(',');
       if (parts.length !== 2) return;

       var lat = parseFloat(parts[0]);
       var lon = parseFloat(parts[1]);

       if (isNaN(lat) || isNaN(lon)) return;

       var type = s.type || "Unbekannt";

       var marker = L.marker([lat, lon])
           .bindPopup('' + s.name + '
' + type);

       var group = clusters[type] || clusters.Unbekannt;
       group.addLayer(marker);

       bounds.push([lat, lon]);
   });

   // Alle Cluster zur Karte hinzufügen
   Object.values(clusters).forEach(function(g){
       map.addLayer(g);
   });

   // Layer-Steuerung
   L.control.layers(null, {
       "Grundschulen":  clusters.Grundschule,
       "Gymnasien":     clusters.Gymnasium,
       "Gesamtschulen": clusters.Gesamtschule,
       "Berufskollegs": clusters.Berufskolleg,
       "Förderschulen": clusters.Förderschule,
       "Sonstige":      clusters.Unbekannt
   }, {collapsed:false}).addTo(map);

   // Kartenausschnitt automatisch anpassen
   if (bounds.length) {
       map.fitBounds(bounds);
   }

})(); </script>

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