Add first working prototype of project 2 aufgabe 3
This commit is contained in:
parent
34969a900f
commit
333a8d00cc
200
projects/project-2/aufgabe3.js
Normal file
200
projects/project-2/aufgabe3.js
Normal file
@ -0,0 +1,200 @@
|
||||
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] ? '–' + 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} %`
|
||||
} 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()
|
||||
File diff suppressed because one or more lines are too long
@ -24,19 +24,29 @@
|
||||
<div class="row">
|
||||
<h1 class="col text-center">Aufgabe 2</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row mb-5">
|
||||
<div class="col">
|
||||
<div id="poiMap" style="height: 50rem" class="w-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<h1 class="col text-center">Aufgabe 3</h1>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div id="suiMap" style="height: 50rem" class="w-auto"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
|
||||
<script src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
|
||||
<script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
|
||||
<script src='https://unpkg.com/@turf/turf/turf.min.js'></script>
|
||||
<script src="aufgabe1.js"></script>
|
||||
<script src="aufgabe2.js"></script>
|
||||
<script defer src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
|
||||
<script defer src="https://unpkg.com/leaflet@latest/dist/leaflet.js"></script>
|
||||
<script defer src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
|
||||
<script defer src='https://unpkg.com/@turf/turf/turf.min.js'></script>
|
||||
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.21.0/axios.js"></script>
|
||||
<script defer src="aufgabe1.js"></script>
|
||||
<script defer src="aufgabe2.js"></script>
|
||||
<script defer src="aufgabe3.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user