|
|
| (9 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) |
| Zeile 1: |
Zeile 1: |
| = Schulkarte Test =
| |
|
| |
| <!-- JSON-Daten für Leaflet -->
| |
| <script id="smw-data" type="application/json">
| |
| [
| |
| {{#ask: | | {{#ask: |
| [[Kategorie:Schule]] | | [[Kategorie:Schule]] |
| Zeile 9: |
Zeile 4: |
| |?Schultyp | | |?Schultyp |
| |?Position | | |?Position |
| |format=list | | |format=map |
| |template=SchulJSON | | |template=SchulJSON |
| |sep=, | | |sep=, |
| Zeile 16: |
Zeile 11: |
| |plain=yes | | |plain=yes |
| }} | | }} |
| ]
| |
| </script>
| |
|
| |
|
| <!-- Leaflet-Karte -->
| | noch eine Karte: |
| <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 |
| | | }} |
| <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);
| |
| | |
| })();
| |
| </script>
| |
