|
|
| (6 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) |
| Zeile 1: |
Zeile 1: |
| <div id="map" style="height: 600px;"></div>
| | { "name":"{{{Schule|}}}", "coords":"{{{Koordinaten|}}}" } |
| | |
| <script>
| |
| // Layer-Container
| |
| var layerGrund = L.markerClusterGroup();
| |
| var layerGym = L.markerClusterGroup();
| |
| var layerGes = L.markerClusterGroup();
| |
| var layerBeruf = L.markerClusterGroup();
| |
| var layerFoerder = L.markerClusterGroup();
| |
| | |
| // Karte
| |
| var map = L.map('map').setView([50.94, 6.96], 11);
| |
| | |
| // OpenStreetMap layer
| |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
| |
| maxZoom: 18
| |
| }).addTo(map);
| |
| | |
| // Marker-Daten werden via SMW ersetzt:
| |
| {{#ask: | |
| [[Kategorie:Schule]]
| |
| |?Koordinaten
| |
| |?Schultyp
| |
| |?Has page=link
| |
| |format=array
| |
| |name=schoolData
| |
| }} | |
| schoolData.forEach(function(school){
| |
| if(!school.Koordinate) 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;
| |
| default:
| |
| layerGrund.addLayer(marker);
| |
| }
| |
| }); | |
| | |
| // Layer hinzufügen
| |
| layerGrund.addTo(map);
| |
| layerGym.addTo(map);
| |
| | |
| // Layer Control
| |
| var overlays = {
| |
| "Grundschulen": layerGrund,
| |
| "Gymnasien": layerGym,
| |
| "Gesamtschulen": layerGes,
| |
| "Berufskollegs": layerBeruf,
| |
| "Förderschulen": layerFoerder
| |
| };
| |
| | |
| L.control.layers(null, overlays, {collapsed:false}).addTo(map);
| |
| | |
| </script>
| |
