geovisualisierung/projects/project-2/aufgabe3.js

const aufgabe3 = async () => {

    const wantedYears = [2015, 2016, 2017]
    const wantedSeries = [
        {code: "SH_H2O_SAFE", displayName: "drinking water services"},
        {code: "SH_SAN_SAFE", displayName: "sanitation services"}
    ]
    const levels = [0, 50.0, 80.0, 85.0, 90.0, 95.0, 99.0, 99.9]

    const loadData = async () => {
        const loadSeries = async series => {
            let maxNumberOfElements = (await axios.get("https://unstats.un.org/SDGAPI/v1/sdg/Series/Data", {
                    params: {seriesCode: series.code}
                }
            )).data.totalElements

            let requests = wantedYears.map(year => {
                return axios.get("https://unstats.un.org/SDGAPI/v1/sdg/Series/Data", {
                    params: {
                        seriesCode: series.code,
                        pageSize: maxNumberOfElements,
                        timePeriod: year
                    }
                })
            })
            let dataArrays = (await Promise.all(requests)).map(arr => arr.data.data)
            const values = [].concat(...dataArrays)
            return values.filter(elem => elem.dimensions.Location === "ALLAREA")

        }
        const apiData = await Promise.all(wantedSeries.map(loadSeries))
        return [].concat(...apiData)

    }

    const getColor = percentage => {
        switch (true) {
            case percentage > levels[7]:
                return '#00FF00'
            case percentage > levels[6]:
                return '#33CC00'
            case percentage > levels[5]:
                return '#4DB300'
            case percentage > levels[4]:
                return '#808000'
            case percentage > levels[3]:
                return '#996600'
            case percentage > levels[2]:
                return '#B34D00'
            case percentage > levels[1]:
                return '#CC3300'
            case percentage > levels[0]:
                return '#FF0000'
        }
    }

    const map = L.map('suiMap', {zoomControl: false}).setView([53.0, 14.0], 4)
    L.control.zoom({position: 'bottomleft'}).addTo(map)
    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: 0,
        maxZoom: 18
    }))
    const [geojsonData, apiData] = await Promise.all([
        $.getJSON('europe.geo.json'),
        loadData()
    ])

    // Attach api data to geojson
    for (let elem of apiData) {
        const geoJsonFeature = geojsonData.features.find(value => {
            return value.properties.name_long.includes(elem.geoAreaName) || elem.geoAreaName.includes(value.properties.name_long)
        })
        if (geoJsonFeature) geoJsonFeature.properties[elem.series + "_" + elem.timePeriodStart] = 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] + 0.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({position: 'topleft'})

    info.onAdd = () => {
        info._div = L.DomUtil.create('div', 'info')
        info.update()
        return info._div
    }

    info.update = (props = {}, currSeries) => {
        const localProps = props[currSeries]
        info._div.innerHTML = localProps ? `<h5>${localProps.seriesDescription}</h5>` : ''
        if (localProps) {
            let formattedPercentage = new Intl.NumberFormat('de-DE').format(localProps.value)
            info._div.innerHTML += `<b>${props.formal_en}</b><br>${formattedPercentage} &percnt;`
        } else {
            info._div.innerHTML += 'Hover over a country'
        }
    }

    info.addTo(map)

    let layers = {}

    for (let currSeries of wantedSeries) {
        for (let currYear of wantedYears) {
            let fullSeriesName = `${currSeries.code}_${currYear}`

            let geoJsonLayer = L.geoJson(geojsonData, {
                style: feature => ({
                    stroke: true,
                    fill: true,
                    fillColor: getColor(feature.properties[fullSeriesName].value),
                    fillOpacity: 1,
                    dashArray: '3',
                    weight: 2,
                    color: 'black'
                }),
                filter: feature => {
                    return feature.properties.hasOwnProperty(fullSeriesName)
                },
                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(feature.properties, fullSeriesName)
                        },
                        mouseout: event => {
                            geoJsonLayer.resetStyle(event.target)
                            info.update()
                        },
                        click: event => map.fitBounds(event.target.getBounds())
                    })
                }
            })
            layers[`${currSeries.displayName} ${currYear}`] = geoJsonLayer
        }
    }

    map.addLayer(Object.values(layers)[0])

    L.control.layers(layers, null).addTo(map)
}

aufgabe3()