hft-informatik/geovisualisierung
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update project 2 aufgabe 1 to show density instead of population

Browse Source 
Add tile layer to map
This commit is contained in:
Marcel Schwarz 2020-11-12 16:43:52 +01:00
parent ec8f8b9504
commit 3f1476b609
2 changed files with 28 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
projects/project-2/aufgabe1.js
View File

@ -1,31 +1,34 @@
const aufgabe1 = () => {
const map = L.map('map').setView([53.0, 14.0], 4)
const levels = [
1_000_000, 5_000_000, 10_000_000, 20_000_000,
30_000_000, 50_000_000, 80_000_000, 100_000_000
]
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
}))
const levels = [0, 20, 50, 100, 200, 250, 300, 400]
let geojson;
const getColor = population => {
switch (true) {
case population > levels[7]:
return {color: '#800026', name: '100 Mio'}
return '#800026'
case population > levels[6]:
return {color: '#BD0026', name: '80 Mio'}
return '#BD0026'
case population > levels[5]:
return {color: '#E31A1C', name: '50 Mio'}
return '#E31A1C'
case population > levels[4]:
return {color: '#FC4E2A', name: '30 Mio'}
return '#FC4E2A'
case population > levels[3]:
return {color: '#FD8D3C', name: '20 Mio'}
return '#FD8D3C'
case population > levels[2]:
return {color: '#FEB24C', name: '10 Mio'}
return '#FEB24C'
case population > levels[1]:
return {color: '#FED976', name: '5 Mio'}
return '#FED976'
case population > levels[0]:
return {color: '#ffdb83', name: '1 Mio'}
return '#ffdb83'
default:
return {color: '#ffdea1', name: ''}
return '#ffdea1'
}
}
@ -37,9 +40,9 @@ const aufgabe1 = () => {
const labels = []
for (let i = 0; i < levels.length; i++) {
let from = getColor(levels[i] + 1).name
let to = getColor(levels[i + 1] + 1).name
labels.push('<i style="background:' + getColor(levels[i] + 1).color + '"></i> ' + from + (to ? '&ndash;' + to : '+'))
let from = levels[i] + 1
let to = levels[i + 1] + 1
labels.push('<i style="background:' + getColor(levels[i] + 1) + '"></i> ' + from + (to ? '&ndash;' + to : '+'))
}
legend.innerHTML = labels.join('<br>')
@ -58,10 +61,10 @@ const aufgabe1 = () => {
}
info.update = props => {
info._div.innerHTML = '<h4>European Population</h4>'
info._div.innerHTML = '<h4>European Population Density</h4>'
if (props) {
let formattedPeople = new Intl.NumberFormat('de-DE').format(props.pop_est)
info._div.innerHTML += `<b>${props.name}</b><br>${formattedPeople} people`
let formattedDensity = new Intl.NumberFormat('de-DE').format(props.density)
info._div.innerHTML += `<b>${props.name}</b><br>${formattedDensity} people/km<sup>2</sup>`
} else {
info._div.innerHTML += 'Hover over a country'
}
@ -97,7 +100,7 @@ const aufgabe1 = () => {
const getStyle = feature => ({
stroke: true,
fill: true,
fillColor: getColor(feature.properties.pop_est).color,
fillColor: getColor(feature.properties.density),
fillOpacity: 1,
dashArray: '3',
weight: 2,
@ -106,6 +109,10 @@ const aufgabe1 = () => {
// Load data in
$.getJSON('europe.geo.json', data => {
for (let [idx, country] of data.features.entries()) {
data.features[idx].properties.density = country.properties.pop_est / (turf.area(country) / 1_000_000)
}
geojson = L.geoJson(data, {style: getStyle, onEachFeature}).addTo(map)
})
}

1
projects/project-2/index.html
View File

@ -35,6 +35,7 @@
<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>
</body>