geovisualisierung/projects/project-2/aufgabe3.js

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()