|
|
| Zeile 1: |
Zeile 1: |
| <!-- Kartencontainer -->
| | <div id="mapid" style="width: 100%; height: 500px;"></div> |
| <div id="map" style="height: 600px; width: 100%;"></div> | |
|
| |
|
| <!-- Leaflet + MarkerCluster 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"/> |
| <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css"/>
| |
| <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/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@1.9.3/dist/leaflet.js"></script> |
| <script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
| |
|
| |
|
| <script> | | <script> |
| | | var map = L.map('mapid').setView([50.94, 6.96], 12); |
| // Layer-Container
| | L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
| var layerGrund = L.markerClusterGroup();
| | maxZoom: 19, |
| var layerGym = L.markerClusterGroup();
| | attribution: '© OpenStreetMap contributors' |
| var layerGes = L.markerClusterGroup();
| | }).addTo(map); |
| var layerBeruf = L.markerClusterGroup();
| |
| var layerFoerder = L.markerClusterGroup();
| |
| | |
| // Karte
| |
| var map = L.map('map').setView([50.94, 6.96], 11); | |
| | |
| // OSM Layer
| |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| maxZoom: 18 | |
| }).addTo(map);
| |
| | |
| // SMW-Daten werden ersetzt:
| |
| {{#ask:
| |
| [[Kategorie:Schule]]
| |
| |?Koordinaten
| |
| |?Schultyp
| |
| |?Has page=link
| |
| |format=array
| |
| |name=schoolData
| |
| }}
| |
| | |
| // Marker erzeugen
| |
| schoolData.forEach(function(school){
| |
| if(!school.Koordinaten) return;
| |
| | |
| var coords = school.Koordinaten.split(',');
| |
| var lat = parseFloat(coords[0]); | |
| var lon = parseFloat(coords[1]);
| |
| | |
| var marker = L.marker([lat, lon])
| |
| .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);
| |
| }
| |
| | |
| });
| |
| | |
| // Standard-Layer zur Karte hinzufügen
| |
| layerGrund.addTo(map);
| |
| layerGym.addTo(map);
| |
| | |
| // Layer-Kontrolle (Legende)
| |
| var overlays = {
| |
| "Grundschulen": layerGrund,
| |
| "Gymnasien": layerGym,
| |
| "Gesamtschulen": layerGes,
| |
| "Berufskollegs": layerBeruf,
| |
| "Förderschulen": layerFoerder
| |
| };
| |
| | |
| L.control.layers(null, overlays, {collapsed:false}).addTo(map);
| |
| | |
| </script> | | </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>
var map = L.map('mapid').setView([50.94, 6.96], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap contributors'
}).addTo(map);
</script>
