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 für die Karte -->
<div id="map" style="width:100%; height:600px;"></div>
<div id="map" style="width:100%; height:600px;"></div>


<!-- SMW-Ausgabe (als JSON, unsichtbar) -->
<script id="smw-data" type="application/json">
<script id="smw-data" type="application/json">
{{#ask:
{{#ask:
Zeile 8: Zeile 6:
  |?Koordinaten
  |?Koordinaten
  |?Schultyp
  |?Schultyp
|?Has page=link
  |format=json
  |format=json
}}
}}
</script>
</script>


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


<script>
<script>
(function(){
(function(){
   // Prüfen, ob Map-DIV vorhanden
   var raw = document.getElementById('smw-data').textContent.trim();
   if (!document.getElementById('map')) return;
   if (!raw) return;
  var data = JSON.parse(raw);
  var schoolData = [];


   // SMW-JSON einlesen und parsen
   if (data.results) {
  var smwRaw = document.getElementById('smw-data').textContent.trim();
     for (var key in data.results) {
  var schoolData = [];
      if (!data.results.hasOwnProperty(key)) continue;
  try {
      var rec = data.results[key];
    // SMW gibt ein JSON-Objekt mit "results" — wir wandeln in ein Array um
      var po = rec.printouts || {};
    var smw = JSON.parse(smwRaw || '{}');
      var coords = (po.Koordinaten && po.Koordinaten[0]) ? po.Koordinaten[0] : null;
     // depending on SMW version, 'results' may hold items as properties
      var typ = (po.Schultyp && po.Schultyp[0]) ? po.Schultyp[0] : '';
    if (smw.results) {
       schoolData.push({
      for (var k in smw.results) {
        link: rec.fulltext || key,
        if (!smw.results.hasOwnProperty(k)) continue;
        Schultyp: typ,
        var item = smw.results[k];
        Koordinaten: coords
        // Extrahiere gewünschte Felder (falls MediaWiki/SMW unterschiedliche Struktur hat, anpassen)
       });
        schoolData.push({
          link: item.fulltext || item.name || k,
          Schultyp: (item.printouts && item.printouts.Schultyp) ? item.printouts.Schultyp[0] : (item.Schultyp || ''),
          Koordinaten: (item.printouts && item.printouts.Koordinaten) ? item.printouts.Koordinaten[0] : (item.Koordinaten || '')
        });
       }
    } else if (Array.isArray(smw)) {
      // Falls SMW direkt ein Array liefert
       schoolData = smw;
     }
     }
  } catch (e) {
    console.error('SMW JSON parse error', e);
   }
   }


  // Leaflet map
   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', {
Zeile 62: Zeile 44:
   }).addTo(map);
   }).addTo(map);


  // Cluster-Gruppen
   var clusters = {
   var layerGrund  = L.markerClusterGroup();
    Grundschule: L.markerClusterGroup(),
  var layerGym     = L.markerClusterGroup();
     Gymnasium: L.markerClusterGroup(),
  var layerGes     = L.markerClusterGroup();
     Gesamtschule: L.markerClusterGroup(),
  var layerBeruf  = L.markerClusterGroup();
    Berufskolleg: L.markerClusterGroup(),
  var layerFoerder = L.markerClusterGroup();
    Förderschule: L.markerClusterGroup()
  };


   var bounds = [];
   var bounds = [];


   // Helfer: Koordinaten extrahieren (String "lat,lon" oder Objekt)
   schoolData.forEach(function(s){
  function extractCoords(coordValue){
     if (!s.Koordinaten) return;
     if (!coordValue) return null;
     var parts = s.Koordinaten.split(',');
     if (typeof coordValue === 'string' && coordValue.indexOf(',') !== -1){
    if (parts.length !== 2) return;
      var p = coordValue.split(',');
    var lat = parseFloat(parts[0]), lon = parseFloat(parts[1]);
      var lat = parseFloat(p[0]), lon = parseFloat(p[1]);
    if (isNaN(lat) || isNaN(lon)) return;
      if (!isNaN(lat) && !isNaN(lon)) return [lat, lon];
    }
    if (typeof coordValue === 'object' && coordValue.lat && coordValue.lon){
      var la = parseFloat(coordValue.lat), lo = parseFloat(coordValue.lon);
      if (!isNaN(la) && !isNaN(lo)) return [la, lo];
    }
    return null;
  }


  // Marker erzeugen
     var marker = L.marker([lat, lon])
  schoolData.forEach(function(school){
      .bindPopup('<strong>' + s.link + '</strong><br>' + s.Schultyp);
    if (!school) return;
     var coords = extractCoords(school.Koordinaten);
    if (!coords) return;


     var marker = L.marker(coords)
     var layer = clusters[s.Schultyp] || clusters.Grundschule;
      .bindPopup('<strong>' + (school.link || '—') + '</strong><br>' + (school.Schultyp || ''));
    layer.addLayer(marker);


    switch ((school.Schultyp || '').toString()){
     bounds.push([lat, lon]);
      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);
    }
     bounds.push(coords);
   });
   });


   // Default-Layer anzeigen
   // add default layers
   layerGrund.addTo(map);
   clusters.Grundschule.addTo(map);
   layerGym.addTo(map);
   clusters.Gymnasium.addTo(map);


   // Layer-Control (Legende)
   // layer control
   var overlays = {
   L.control.layers(null, {
     "Grundschulen": layerGrund,
     "Grundschulen": clusters.Grundschule,
     "Gymnasien": layerGym,
     "Gymnasien":   clusters.Gymnasium,
     "Gesamtschulen": layerGes,
     "Gesamtschulen": clusters.Gesamtschule,
     "Berufskollegs": layerBeruf,
     "Berufskollegs": clusters.Berufskolleg,
     "Förderschulen": layerFoerder
     "Förderschulen": clusters.Förderschule
   };
   }, {collapsed:false}).addTo(map);
  L.control.layers(null, overlays, {collapsed:false}).addTo(map);


  // Auto-fit bounds
   if (bounds.length) {
   if (bounds.length) map.fitBounds(bounds);
    map.fitBounds(bounds);
  }


})();
})();
</script>
</script>

Version vom 6. Dezember 2025, 23:23 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('' + s.link + '
' + s.Schultyp);
   var layer = clusters[s.Schultyp] || clusters.Grundschule;
   layer.addLayer(marker);
   bounds.push([lat, lon]);
 });
 // add default layers
 clusters.Grundschule.addTo(map);
 clusters.Gymnasium.addTo(map);
 // layer control
 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);
 if (bounds.length) {
   map.fitBounds(bounds);
 }

})(); </script>

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.