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

Polish project 2 aufgabe 1

Browse Source
This commit is contained in:
Marcel Schwarz 2020-11-09 19:08:19 +01:00
parent 5ddad82db2
commit ca151488ac
1 changed files with 15 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -54,41 +54,41 @@
integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
<script> <script>
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
]
let geojson;
const getColor = population => { const getColor = population => {
switch (true) { switch (true) {
case population > 100_000_000: case population > levels[7]:
return {color: '#800026', name: '100 Mio'} return {color: '#800026', name: '100 Mio'}
case population > 80_000_000: case population > levels[6]:
return {color: '#BD0026', name: '80 Mio'} return {color: '#BD0026', name: '80 Mio'}
case population > 50_000_000: case population > levels[5]:
return {color: '#E31A1C', name: '50 Mio'} return {color: '#E31A1C', name: '50 Mio'}
case population > 30_000_000: case population > levels[4]:
return {color: '#FC4E2A', name: '30 Mio'} return {color: '#FC4E2A', name: '30 Mio'}
case population > 20_000_000: case population > levels[3]:
return {color: '#FD8D3C', name: '20 Mio'} return {color: '#FD8D3C', name: '20 Mio'}
case population > 10_000_000: case population > levels[2]:
return {color: '#FEB24C', name: '10 Mio'} return {color: '#FEB24C', name: '10 Mio'}
case population > 5_000_000: case population > levels[1]:
return {color: '#FED976', name: '5 Mio'} return {color: '#FED976', name: '5 Mio'}
case population > 1_000_000: case population > levels[0]:
return {color: '#ffdb83', name: '1 Mio'} return {color: '#ffdb83', name: '1 Mio'}
default: default:
return {color: '#ffdea1', name: ''} return {color: '#ffdea1', name: ''}
} }
} }
let map = L.map('map').setView([53.0, 14.0], 4)
let geojson;
// Add the legend to the map // Add the legend to the map
const legend = L.control({position: 'bottomright'}) const legend = L.control({position: 'bottomright'})
legend.onAdd = () => { legend.onAdd = () => {
const legend = L.DomUtil.create('div', 'info legend') const legend = L.DomUtil.create('div', 'info legend')
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
]
const labels = [] const labels = []
for (let i = 0; i < levels.length; i++) { for (let i = 0; i < levels.length; i++) {
@ -164,7 +164,6 @@
$.getJSON('europe.geo.json', data => { $.getJSON('europe.geo.json', data => {
geojson = L.geoJson(data, {style: getStyle, onEachFeature}).addTo(map) geojson = L.geoJson(data, {style: getStyle, onEachFeature}).addTo(map)
}) })
</script> </script>
</body> </body>
</html> </html>