|
|
| Zeile 1: |
Zeile 1: |
| <div id="map" style="height: 600px;"></div> | | <includeonly> |
| | | {{#widget:Leaflet |
| <script>
| | | id=schulekarte |
| | | | width=800px |
| // === ICONSETS =======================================
| | | height=500px |
| | | | lat=50.9375 |
| var iconGrund = new L.Icon({
| | | lon=6.9603 |
| iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
| | | zoom=12 |
| iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34]
| | | markers= |
| });
| | L.marker([50.94, 6.96]).bindPopup("Schule A").addTo(map); |
| | | L.marker([50.93, 6.97]).bindPopup("Schule B").addTo(map); |
| var iconGym = new L.Icon({
| |
| iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png',
| |
| iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34]
| |
| });
| |
| | |
| var iconGes = new L.Icon({
| |
| iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-orange.png',
| |
| iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34]
| |
| });
| |
| | |
| var iconBeruf = new L.Icon({
| |
| iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-violet.png',
| |
| iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34]
| |
| });
| |
| | |
| var iconFoerder = new L.Icon({
| |
| iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png',
| |
| iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34]
| |
| });
| |
| | |
| // === CLUSTER COLORS =================================
| |
| | |
| function clusterColor(color){
| |
| return new L.MarkerClusterGroup({
| |
| iconCreateFunction: function(cluster) {
| |
| return new L.DivIcon({
| |
| html: '<div style="background:'+color+';color:white;border-radius:20px;padding:5px 10px;">' +
| |
| cluster.getChildCount() + '</div>'
| |
| });
| |
| }
| |
| });
| |
| }
| |
| | |
| var clusterGrund = clusterColor('#32CD32');
| |
| var clusterGym = clusterColor('#1E90FF');
| |
| var clusterGes = clusterColor('#FF8C00');
| |
| var clusterBeruf = clusterColor('#9400D3');
| |
| var clusterFoerder = clusterColor('#DC143C');
| |
| | |
| // === MAP ============================================
| |
| | |
| var map = L.map('map').setView([50.94, 6.96], 11);
| |
| | |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
| |
| maxZoom: 18
| |
| }).addTo(map);
| |
| | |
| // === SMW COORD PARSER ===============================
| |
| | |
| function extractCoords(coordValue) {
| |
| if (!coordValue) return null; | |
| | |
| if (typeof coordValue === "string") {
| |
| let parts = coordValue.split(',');
| |
| if (parts.length === 2) {
| |
| return [parseFloat(parts[0]), parseFloat(parts[1])];
| |
| }
| |
| }
| |
| if (typeof coordValue === "object" && coordValue.lat && coordValue.lon) {
| |
| return [parseFloat(coordValue.lat), parseFloat(coordValue.lon)];
| |
| }
| |
| return null;
| |
| }
| |
| | |
| // === Marker Import via SMW ==========================
| |
| | |
| // Wird durch SMW ersetzt:
| |
| {{#ask:
| |
| [[Kategorie:Schule]]
| |
| |?Koordinaten
| |
| |?Schultyp
| |
| |?Has page=link
| |
| |format=array
| |
| |name=schoolData
| |
| }} | | }} |
| | | </includeonly> |
| var bounds = [];
| | <noinclude>Zeigt eine Schulkarte mit Leaflet an.</noinclude> |
| | |
| schoolData.forEach(function(school){
| |
| | |
| var coords = extractCoords(school.Koordinaten);
| |
| if(!coords) return;
| |
| | |
| // choose icon
| |
| var icon = iconGrund;
| |
| switch(school.Schultyp){
| |
| case "Grundschule": icon = iconGrund; break;
| |
| case "Gymnasium": icon = iconGym; break;
| |
| case "Gesamtschule": icon = iconGes; break;
| |
| case "Berufskolleg": icon = iconBeruf; break;
| |
| case "Förderschule": icon = iconFoerder; break;
| |
| }
| |
| | |
| var marker = L.marker(coords, {icon: icon})
| |
| .bindPopup('<strong>' + school.link + '</strong><br>' + school.Schultyp);
| |
| | |
| switch(school.Schultyp){
| |
| case "Grundschule": clusterGrund.addLayer(marker); break;
| |
| case "Gymnasium": clusterGym.addLayer(marker); break;
| |
| case "Gesamtschule": clusterGes.addLayer(marker); break;
| |
| case "Berufskolleg": clusterBeruf.addLayer(marker); break;
| |
| case "Förderschule": clusterFoerder.addLayer(marker); break;
| |
| default: clusterGrund.addLayer(marker);
| |
| }
| |
| | |
| bounds.push(coords);
| |
| });
| |
| | |
| // Standard sichtbar:
| |
| clusterGrund.addTo(map);
| |
| clusterGym.addTo(map);
| |
| | |
| // Layer Control
| |
| L.control.layers(null, {
| |
| "Grundschulen": clusterGrund,
| |
| "Gymnasien": clusterGym,
| |
| "Gesamtschulen": clusterGes,
| |
| "Berufskollegs": clusterBeruf,
| |
| "Förderschulen": clusterFoerder
| |
| }, {collapsed:false}).addTo(map);
| |
| | |
| // === AUTO FIT =======================================
| |
| if(bounds.length > 0){
| |
| map.fitBounds(bounds);
| |
| }
| |
| | |
| // === LEGENDE ========================================
| |
| | |
| var legend = L.control({ position: 'bottomright' });
| |
| | |
| legend.onAdd = function () {
| |
| var div = L.DomUtil.create('div', 'info legend');
| |
| div.style.background = 'white';
| |
| div.style.padding = '10px';
| |
| div.style.borderRadius = '6px';
| |
| div.style.boxShadow = '0 0 6px rgba(0,0,0,0.3)';
| |
| div.style.fontSize = "13px";
| |
| | |
| div.innerHTML += "<b>Schultypen</b><br>";
| |
| div.innerHTML += "<img src='https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png' width='18'> Grundschule<br>";
| |
| div.innerHTML += "<img src='https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png' width='18'> Gymnasium<br>";
| |
| div.innerHTML += "<img src='https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-orange.png' width='18'> Gesamtschule<br>";
| |
| div.innerHTML += "<img src='https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-violet.png' width='18'> Berufskolleg<br>";
| |
| div.innerHTML += "<img src='https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png' width='18'> Förderschule<br>";
| |
| | |
| return div;
| |
| };
| |
| legend.addTo(map);
| |
| | |
| </script> | |
Zeigt eine Schulkarte mit Leaflet an.
