Altes Köln

Vorlage:Schulkarte: Unterschied zwischen den Versionen

Aus Altes Köln
Wechseln zu:Navigation, Suche
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 2: Zeile 2:


<script>
<script>
// Layer-Container
var layerGrund = L.markerClusterGroup();
var layerGym = L.markerClusterGroup();
var layerGes = L.markerClusterGroup();
var layerBeruf = L.markerClusterGroup();
var layerFoerder = L.markerClusterGroup();


// Karte
// === ICONSETS =======================================
 
var iconGrund = new L.Icon({
    iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
    iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34]
});
 
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);
var map = L.map('map').setView([50.94, 6.96], 11);


// OpenStreetMap layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     maxZoom: 18
     maxZoom: 18
}).addTo(map);
}).addTo(map);


// Marker-Daten werden via SMW ersetzt:
// === 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:
{{#ask:
  [[Kategorie:Schule]]
  [[Kategorie:Schule]]
Zeile 26: Zeile 85:
  |name=schoolData
  |name=schoolData
}}
}}
var bounds = [];
schoolData.forEach(function(school){
schoolData.forEach(function(school){
    if(!school.Koordinate) return;


     var coords = school.Koordinaten.split(',');
     var coords = extractCoords(school.Koordinaten);
     var marker = L.marker([parseFloat(coords[0]), parseFloat(coords[1])])
     if(!coords) return;
                  .bindPopup('<strong>' + school.link + '</strong><br>' + school.Schultyp);


    // choose icon
    var icon = iconGrund;
     switch(school.Schultyp){
     switch(school.Schultyp){
         case "Grundschule":
         case "Grundschule": icon = iconGrund; break;
            layerGrund.addLayer(marker);
         case "Gymnasium": icon = iconGym; break;
            break;
         case "Gesamtschule": icon = iconGes; break;
         case "Gymnasium":
         case "Berufskolleg": icon = iconBeruf; break;
            layerGym.addLayer(marker);
         case "Förderschule": icon = iconFoerder; break;
            break;
         case "Gesamtschule":
            layerGes.addLayer(marker);
            break;
         case "Berufskolleg":
            layerBeruf.addLayer(marker);
            break;
         case "Förderschule":
            layerFoerder.addLayer(marker);
            break;
        default:
            layerGrund.addLayer(marker);
     }
     }
    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);
});
});


// Layer hinzufügen
// Standard sichtbar:
layerGrund.addTo(map);
clusterGrund.addTo(map);
layerGym.addTo(map);
clusterGym.addTo(map);


// Layer Control
// Layer Control
var overlays = {
L.control.layers(null, {
     "Grundschulen": layerGrund,
     "Grundschulen": clusterGrund,
     "Gymnasien": layerGym,
     "Gymnasien": clusterGym,
     "Gesamtschulen": layerGes,
     "Gesamtschulen": clusterGes,
     "Berufskollegs": layerBeruf,
     "Berufskollegs": clusterBeruf,
     "Förderschulen": layerFoerder
     "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);
L.control.layers(null, overlays, {collapsed:false}).addTo(map);


</script>
</script>

Version vom 6. Dezember 2025, 16:58 Uhr

<script>

// === ICONSETS =======================================

var iconGrund = new L.Icon({ 

   iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
   iconSize: [25, 41], iconAnchor: [12, 41], popupAnchor: [1, -34]

});

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: '

' + cluster.getChildCount() + '

' 

           });
       }
   });

}

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:


var bounds = [];

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('' + school.link + '
' + 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 += "Schultypen
";
   div.innerHTML += "<img src='https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png' width='18'> Grundschule
";
   div.innerHTML += "<img src='https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png' width='18'> Gymnasium
";
   div.innerHTML += "<img src='https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-orange.png' width='18'> Gesamtschule
";
   div.innerHTML += "<img src='https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-violet.png' width='18'> Berufskolleg
";
   div.innerHTML += "<img src='https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-red.png' width='18'> Förderschule
";

   return div;

}; legend.addTo(map);

</script>

Abgerufen von „https://altes-koeln.de/index.php?title=Vorlage:Schulkarte&oldid=89501“
Cookies helfen uns bei der Bereitstellung von Altes Köln. Durch die Nutzung von Altes Köln erklärst du dich damit einverstanden, dass wir Cookies speichern.