const aufgabe3 = async () => {
const years = [2015, 2016, 2017]
const loadData = async () => {
const loadSeries = async seriesCode => {
let maxNumberOfElements = (await axios.get("https://unstats.un.org/SDGAPI/v1/sdg/Series/Data", {
params: {seriesCode}
}
)).data.totalElements
let requests = []
for (let year of years) {
requests.push(axios.get("https://unstats.un.org/SDGAPI/v1/sdg/Series/Data", {
params: {
seriesCode: seriesCode,
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([
loadSeries("SH_H2O_SAFE"),
loadSeries("SH_SAN_SAFE")
])
return [].concat(...apiData)
}
const levels = [0, 50.0, 80.0, 85.0, 90.0, 95.0, 99.0, 99.9]
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').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
}))
const [geojsonData, apiData] = await Promise.all([
$.getJSON('europe.geo.json'),
loadData()
])
// Attach api data to geojson
for (let elem of apiData) {
const find = geojsonData.features.find(value => {
return value.properties.name_long.includes(elem.geoAreaName) || elem.geoAreaName.includes(value.properties.name_long)
})
if (find) find.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(
' '
+ 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 = {}, currSeries) => {
const localProps = props[currSeries]
info._div.innerHTML = localProps ? `