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 OpenStreetMap 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(
' '
+ levels[i] + (levels[i + 1] ? '–' + levels[i + 1] : '+')
)
}
legend.innerHTML = labels.join('
')
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 ? `