Altes Köln

Schulkarte-Test: Unterschied zwischen den Versionen

Aus Altes Köln
Wechseln zu:Navigation, Suche
VisuellWikitext
Die Seite wurde neu angelegt: „= Schulkarte Test = <!-- JSON-Daten für Leaflet --> <script id="smw-data" type="application/json"> [ {{#ask: Kategorie:Schule |?Schule |?Schultyp |?Position |format=list |template=SchulJSON |sep=, |headers=hide |link=none |plain=yes }} ] </script> <!-- Leaflet-Karte --> <div id="map" style="width:100%; height:600px;"></div> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/> <script src="https://unpkg.com/lea…“
 
 
(43 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
= Schulkarte Test =
== Test mit Vorlage und generischem Widget - verschiedene Markerfarben ==
<!--Mit benutzerspefizifischen data-* Attributen (gemäß HTML 5) werden die Daten vorbereitet.
  Solche Attribute gelten nur innerhalb des vorgegebenen HTML-Elements (hier div "smwmap)
  Auf die Attribute kann anschließend das aufgerufene Widget:LeafletSMWMap zugreifen, weil es die div-id kennt.
  Die Parameter wie data-query, data-iconmap etc. sind einfache Strings,
  die später vom Widget verarbeitet werden.
-->
<div id="smwmap" <!-- Name des div-Objektes, wird von #widget:LeafletSMWMap so erwartet.-->
    data-query=  <!-- Query-String nach SMW-Synthax, in "" eingeschlossen -->
        "
        [[Kategorie:Schule]]
        [[Position::+]]
        |?Position
        |?Schultyp
        |limit=5000
        "
    data-position="Position"
    data-type="Schultyp" <!-- Auswahl des Datentyps für die Unterscheidung der Marker -->
    data-iconmap= <!-- Mapping der Markertypen. Bilddateien für Marker müssen im Namensraum Datei: vorliegen-->
        "
        Gymnasium=MarkerRot.png;
        Volksschule=MarkerBlau.png
        "
    data-defaulticon="MarkerGreen.png" <!-- Default Marker für nicht zugeordnete Objekte -->


<!-- JSON-Daten für Leaflet -->
    style="width:100%; height:500px;"> <!--Größe und Stil des anzuzeigenden div-Elements-->
<script id="smw-data" type="application/json">
</div> <!--Ende des div smwmap-->
[
 
{{#widget:LeafletSMWMap}} <!--Aufruf des Widgets mit den oben definierten data-* Attributen-->
 
== 1. Versuch (nur eine Markerfarbe)==
{{#ask:
{{#ask:
  [[Kategorie:Schule]]
  [[Kategorie:Schule]]
Zeile 9: Zeile 35:
  |?Schultyp
  |?Schultyp
  |?Position
  |?Position
  |format=list
  |format=map
  |template=SchulJSON
  |template=SchulJSON
  |sep=,
  |sep=,
Zeile 15: Zeile 41:
  |link=none
  |link=none
  |plain=yes
  |plain=yes
|icon=File:MarkerRot.png
}}
}}
]
</script>


<!-- Leaflet-Karte -->
== noch eine Karte (nur eine Markerfarbe)==
<div id="map" style="width:100%; height:600px;"></div>
{{#ask:
 
[[Kategorie:Schule]]
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css"/>
|?Schule
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js"></script>
|?Schultyp
<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
  |?Position
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css"/>
|format=map
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.Default.css"/>
|service=leaflet
 
|icon=File:MarkerBlau.png
<script>
}}
(function(){
    var raw = document.getElementById('smw-data').textContent.trim();
    if (!raw) { console.error('Keine Daten gefunden'); return; }
 
    var schoolData;
    try {
        schoolData = JSON.parse(raw);
    } catch(e) {
        console.error('JSON Parse Fehler:', e);
        return;
    }
 
    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 = {
        "Gymnasium": L.markerClusterGroup(),
        "Volksschule": L.markerClusterGroup(),
        "Förderschule": L.markerClusterGroup(),
        "Gesamtschule": L.markerClusterGroup()
    };
 
    var icons = {
        "Gymnasium": "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-blue.png",
        "Volksschule": "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-green.png",
        "Förderschule": "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png",
        "Gesamtschule": "https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-orange.png"
    };
 
    var bounds = [];
 
    schoolData.forEach(function(s){
        if (!s.coords) return;
        var parts = s.coords.split(',');
        if (parts.length !== 2) return;
        var lat = parseFloat(parts[0]), lon = parseFloat(parts[1]);
        if (isNaN(lat) || isNaN(lon)) return;
 
        var iconUrl = icons[s.type] || icons["Gymnasium"];
        var markerIcon = new L.Icon({
            iconUrl: iconUrl,
            shadowUrl: 'https://unpkg.com/leaflet@1.9.3/dist/images/marker-shadow.png',
            iconSize: [25,41],
            iconAnchor: [12,41],
            popupAnchor: [1,-34],
            shadowSize: [41,41]
        });
 
        var marker = L.marker([lat, lon], {icon: markerIcon})
            .bindPopup('<strong>' + s.name + '</strong><br>' + s.type);
 
        var layer = clusters[s.type] || clusters["Gymnasium"];
        layer.addLayer(marker);
 
        bounds.push([lat, lon]);
    });
 
    for (var key in clusters) {
        clusters[key].addTo(map);
    }
 
    L.control.layers(null, {
        "Gymnasien": clusters["Gymnasium"],
        "Volksschulen": clusters["Volksschule"],
        "Förderschulen": clusters["Förderschule"],
        "Gesamtschulen": clusters["Gesamtschule"]
    }, {collapsed:false}).addTo(map);
 
    if (bounds.length) map.fitBounds(bounds);


})();
== Test mit Leaflet (mit spezifischem Widget nur für Schulkarte) - verschiedene Markerfarben ==
</script>
{{#widget:SchulkarteLeaflet}}

Aktuelle Version vom 20. Dezember 2025, 12:35 Uhr

Test mit Vorlage und generischem Widget - verschiedene Markerfarben

1. Versuch (nur eine Markerfarbe)

Die Karte wird geladen …

noch eine Karte (nur eine Markerfarbe)

Die Karte wird geladen …

Test mit Leaflet (mit spezifischem Widget nur für Schulkarte) - verschiedene Markerfarben

Abgerufen von „https://www.altes-koeln.de/index.php?title=Schulkarte-Test&oldid=90233“