Add first working prototype of project 2 aufgabe 3

projects/project-2/aufgabe3.js

@@ -0,0 +1,200 @@
+const aufgabe3 = async () => {
+    const loadSeries = async (seriesCode, pageSize = 20) => {
+        const europeanCountryCodes = [
+            8, 20, 40, 56, 70, 100, 112, 191, 203, 208,
+            233, 234, 246, 248, 250, 276, 292, 300, 336,
+            348, 352, 372, 380, 428, 438, 440, 442, 470,
+            492, 498, 499, 528, 578, 616, 620, 642, 643,
+            674, 688, 703, 705, 724, 744, 752, 756, 804,
+            807, 826, 833
+        ]
+        const values = (await axios.get("https://unstats.un.org/SDGAPI/v1/sdg/Series/Data", {
+            params: {
+                seriesCode: seriesCode,
+                pageSize: pageSize
+            }
+        })).data // getting axios data object
+        const filteredApiResponse = values.data // getting api data object (remove paging information)
+            .filter(elem => elem.timePeriodStart >= 2015 && elem.timePeriodStart <= 2017)
+            .filter(elem => europeanCountryCodes.includes(parseInt(elem.geoAreaCode)))
+            .filter(elem => elem.dimensions.Location === "ALLAREA")
+
+        const data = []
+
+        for (let elem of filteredApiResponse) {
+            const dataElem = data.find(value => value.name === elem.geoAreaName)
+            if (dataElem) {
+                dataElem.series[elem.series][elem.timePeriodStart] = elem.value
+            } else {
+                data.push({
+                    name: elem.geoAreaName,
+                    geoAreaCode: elem.geoAreaCode,
+                    series: {
+                        [elem.series]: {
+                            [elem.timePeriodStart]: elem.value
+                        }
+                    }
+                })
+            }
+        }
+        return data
+    }
+
+    const loadData = async () => {
+        const apiData = await Promise.all([
+            loadSeries("SH_H2O_SAFE", 5000),
+            loadSeries("SH_SAN_SAFE", 5000)
+        ])
+        const finalDataset = apiData[0]
+        for (let elem of apiData[1]) {
+            let findOtherPart = finalDataset.find(value => value.name === elem.name)
+            if (findOtherPart) {
+                findOtherPart.series = {...findOtherPart.series, ...elem.series}
+            } else {
+                finalDataset.push(elem)
+            }
+        }
+        return finalDataset
+    }
+
+    const levels = [0, 50, 80, 85, 90, 95, 99, 100]
+
+    const getColor = percentage => {
+        switch (true) {
+            case percentage > levels[7]:
+                return '#800026'
+            case percentage > levels[6]:
+                return '#BD0026'
+            case percentage > levels[5]:
+                return '#E31A1C'
+            case percentage > levels[4]:
+                return '#FC4E2A'
+            case percentage > levels[3]:
+                return '#FD8D3C'
+            case percentage > levels[2]:
+                return '#FEB24C'
+            case percentage > levels[1]:
+                return '#FED976'
+            case percentage > levels[0]:
+                return '#FFEDA0'
+            default:
+                return '#ffdea1'
+        }
+    }
+
+    const map = L.map('suiMap').setView([53.0, 14.0], 4)
+    map.addLayer(new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: 'Map data <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
+        minZoom: 1,
+        maxZoom: 18
+    }))
+    let [geojsonData, apiData] = await Promise.all([
+        $.getJSON('europe.geo.json'),
+        loadData()
+    ])
+
+    for (let elem of apiData) {
+        const find = geojsonData.features.find(value => {
+            return value.properties.name_long.includes(elem.name) || elem.name.includes(value.properties.name_long)
+        })
+        if (find) {
+            find.properties = {...find.properties, ...elem}
+        }
+    }
+
+    // Add the legend to the map
+    const legend = L.control({position: 'bottomright'})
+
+    legend.onAdd = () => {
+        const legend = L.DomUtil.create('div', 'info legend')
+        const labels = []
+
+        for (let i = 0; i < levels.length; i++) {
+            labels.push(
+                '<i style="background:' + getColor(levels[i] + 1) + '"></i> '
+                + levels[i] + (levels[i + 1] ? '&ndash;' + levels[i + 1] : '+')
+            )
+        }
+
+        legend.innerHTML = labels.join('<br>')
+        return legend
+    }
+
+    legend.addTo(map)
+
+    // Control that shows state info on hover
+    const info = L.control()
+
+    info.onAdd = () => {
+        info._div = L.DomUtil.create('div', 'info')
+        info.update()
+        return info._div
+    }
+
+    info.update = (props, metaElem) => {
+        info._div.innerHTML = metaElem?.categoryName ? `<h4>${metaElem.categoryName}</h4>` : '<h4>Please select something</h4>'
+        if (props) {
+            let formattedPercentage = new Intl.NumberFormat('de-DE').format(props.series[metaElem.series][metaElem.year])
+            info._div.innerHTML += `<b>${props.name}</b><br>${formattedPercentage} &percnt;`
+        } else {
+            info._div.innerHTML += 'Hover over a country'
+        }
+    }
+
+    info.addTo(map)
+
+    let layers = {}
+    let layerMeta = [
+        {series: "SH_H2O_SAFE", year: 2015, categoryName: "Wasser"},
+        {series: "SH_H2O_SAFE", year: 2016, categoryName: "Wasser"},
+        {series: "SH_H2O_SAFE", year: 2017, categoryName: "Wasser"},
+        {series: "SH_SAN_SAFE", year: 2015, categoryName: "Scheiße"},
+        {series: "SH_SAN_SAFE", year: 2016, categoryName: "Scheiße"},
+        {series: "SH_SAN_SAFE", year: 2017, categoryName: "Scheiße"}
+    ]
+
+    for (let layerMetaElem of layerMeta) {
+        let geoJsonLayer = L.geoJson(geojsonData, {
+            style: feature => ({
+                stroke: true,
+                fill: true,
+                fillColor: getColor(feature.properties.series[layerMetaElem.series][layerMetaElem.year]),
+                fillOpacity: 1,
+                dashArray: '3',
+                weight: 2,
+                color: 'black'
+            }),
+            filter: feature => {
+              return feature.properties.hasOwnProperty("series") && feature.properties.series.hasOwnProperty(layerMetaElem.series)
+            },
+            onEachFeature: (feature, layer) => {
+                layer.on({
+                    mouseover: event => {
+                        event.target.setStyle({
+                            weight: 5,
+                            color: '#666',
+                            dashArray: '',
+                            fillOpacity: 0.7
+                        })
+
+                        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
+                            event.target.bringToFront()
+                        }
+                        info.update(event.target.feature.properties, layerMetaElem)
+                    },
+                    mouseout: event => {
+                        geoJsonLayer.resetStyle(event.target)
+                        info.update()
+                    },
+                    click: event => map.fitBounds(event.target.getBounds())
+                })
+            }
+        })
+        layers[layerMetaElem.series + " - " + layerMetaElem.year] = geoJsonLayer
+    }
+
+    L.control.layers(layers, null).addTo(map)
+
+}
+
+aufgabe3()

projects/project-2/index.html

@@ -24,19 +24,29 @@
     <div class="row">
         <h1 class="col text-center">Aufgabe 2</h1>
     </div>
-    <div class="row">
+    <div class="row mb-5">
         <div class="col">
             <div id="poiMap" style="height: 50rem" class="w-auto"></div>
         </div>
     </div>
+    <div class="row">
+        <h1 class="col text-center">Aufgabe 3</h1>
+    </div>
+    <div class="row">
+        <div class="col">
+            <div id="suiMap" style="height: 50rem" class="w-auto"></div>
+        </div>
+    </div>
 </div>
 
 
-<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
+<script defer src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
-<script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
+<script defer src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
-<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
+<script defer src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
-<script src='https://unpkg.com/@turf/turf/turf.min.js'></script>
+<script defer src='https://unpkg.com/@turf/turf/turf.min.js'></script>
-<script src="aufgabe1.js"></script>
+<script defer src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.js"></script>
-<script src="aufgabe2.js"></script>
+<script defer src="aufgabe1.js"></script>
+<script defer src="aufgabe2.js"></script>
+<script defer src="aufgabe3.js"></script>
 </body>
 </html>