diff --git a/projects/project-2/aufgabe1.js b/projects/project-2/aufgabe1.js index 39f0820..dd251aa 100644 --- a/projects/project-2/aufgabe1.js +++ b/projects/project-2/aufgabe1.js @@ -71,7 +71,7 @@ const aufgabe1 = () => { } } - info.addTo(map); + info.addTo(map) // Hover over feature const onEachFeature = (feature, layer) => { diff --git a/projects/project-2/aufgabe3.js b/projects/project-2/aufgabe3.js index 6975a72..897da88 100644 --- a/projects/project-2/aufgabe3.js +++ b/projects/project-2/aufgabe3.js @@ -1,60 +1,23 @@ 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 loadSeries = async (seriesCode, pageSize = 20) => { + const values = (await axios.get("https://unstats.un.org/SDGAPI/v1/sdg/Series/Data", { + params: { + seriesCode: seriesCode, + pageSize: pageSize + } + })).data // getting axios data object + return values.data // getting api data object (remove paging information) + .filter(elem => elem.timePeriodStart >= 2015 && elem.timePeriodStart <= 2017) + .filter(elem => elem.dimensions.Location === "ALLAREA") + } + 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 + return [...apiData[0], ...apiData[1]] } const levels = [0, 50, 80, 85, 90, 95, 99, 100] @@ -93,13 +56,12 @@ const aufgabe3 = async () => { loadData() ]) + // Attach api data to geojson 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) + return value.properties.name_long.includes(elem.geoAreaName) || elem.geoAreaName.includes(value.properties.name_long) }) - if (find) { - find.properties = {...find.properties, ...elem} - } + if (find) find.properties[elem.series + "_" + elem.timePeriodStart] = elem } // Add the legend to the map @@ -131,11 +93,12 @@ const aufgabe3 = async () => { return info._div } - info.update = (props, metaElem) => { - info._div.innerHTML = metaElem?.categoryName ? `

${metaElem.categoryName}

` : '

Please select something

' - if (props) { - let formattedPercentage = new Intl.NumberFormat('de-DE').format(props.series[metaElem.series][metaElem.year]) - info._div.innerHTML += `${props.name}
${formattedPercentage} %` + info.update = (props = {}, currSeries) => { + const localProps = props[currSeries] + info._div.innerHTML = localProps ? `
${localProps.seriesDescription}
` : '' + if (localProps) { + let formattedPercentage = new Intl.NumberFormat('de-DE').format(localProps.value) + info._div.innerHTML += `${props.formal_en}
${formattedPercentage} %` } else { info._div.innerHTML += 'Hover over a country' } @@ -144,28 +107,28 @@ const aufgabe3 = async () => { 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"} + let wantedSeries = [ + {name: "SH_H2O_SAFE_2015", displayName: "drinking water services 2015"}, + {name: "SH_H2O_SAFE_2016", displayName: "drinking water services 2016"}, + {name: "SH_H2O_SAFE_2017", displayName: "drinking water services 2017"}, + {name: "SH_SAN_SAFE_2015", displayName: "sanitation services 2015"}, + {name: "SH_SAN_SAFE_2016", displayName: "sanitation services 2016"}, + {name: "SH_SAN_SAFE_2017", displayName: "sanitation services 2017"}, ] - for (let layerMetaElem of layerMeta) { + for (let currSeries of wantedSeries) { let geoJsonLayer = L.geoJson(geojsonData, { style: feature => ({ stroke: true, fill: true, - fillColor: getColor(feature.properties.series[layerMetaElem.series][layerMetaElem.year]), + fillColor: getColor(feature.properties[currSeries.name].value), fillOpacity: 1, dashArray: '3', weight: 2, color: 'black' }), filter: feature => { - return feature.properties.hasOwnProperty("series") && feature.properties.series.hasOwnProperty(layerMetaElem.series) + return feature.properties.hasOwnProperty(currSeries.name) }, onEachFeature: (feature, layer) => { layer.on({ @@ -176,11 +139,8 @@ const aufgabe3 = async () => { dashArray: '', fillOpacity: 0.7 }) - - if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) { - event.target.bringToFront() - } - info.update(event.target.feature.properties, layerMetaElem) + if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) event.target.bringToFront() + info.update(feature.properties, currSeries.name) }, mouseout: event => { geoJsonLayer.resetStyle(event.target) @@ -190,7 +150,7 @@ const aufgabe3 = async () => { }) } }) - layers[layerMetaElem.series + " - " + layerMetaElem.year] = geoJsonLayer + layers[currSeries.displayName] = geoJsonLayer } L.control.layers(layers, null).addTo(map) diff --git a/projects/project-2/style.css b/projects/project-2/style.css index c84a123..b7df7a3 100644 --- a/projects/project-2/style.css +++ b/projects/project-2/style.css @@ -9,6 +9,7 @@ background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); border-radius: 5px; + max-width: 40vw; } .info h4 {