114 lines
3.5 KiB
JavaScript
114 lines
3.5 KiB
JavaScript
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
|
|
]
|
|
let geojson;
|
|
|
|
const getColor = population => {
|
|
switch (true) {
|
|
case population > levels[7]:
|
|
return {color: '#800026', name: '100 Mio'}
|
|
case population > levels[6]:
|
|
return {color: '#BD0026', name: '80 Mio'}
|
|
case population > levels[5]:
|
|
return {color: '#E31A1C', name: '50 Mio'}
|
|
case population > levels[4]:
|
|
return {color: '#FC4E2A', name: '30 Mio'}
|
|
case population > levels[3]:
|
|
return {color: '#FD8D3C', name: '20 Mio'}
|
|
case population > levels[2]:
|
|
return {color: '#FEB24C', name: '10 Mio'}
|
|
case population > levels[1]:
|
|
return {color: '#FED976', name: '5 Mio'}
|
|
case population > levels[0]:
|
|
return {color: '#ffdb83', name: '1 Mio'}
|
|
default:
|
|
return {color: '#ffdea1', name: ''}
|
|
}
|
|
}
|
|
|
|
// 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++) {
|
|
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 ? '–' + to : '+'))
|
|
}
|
|
|
|
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 => {
|
|
info._div.innerHTML = '<h4>European Population</h4>'
|
|
if (props) {
|
|
let formattedPeople = new Intl.NumberFormat('de-DE').format(props.pop_est)
|
|
info._div.innerHTML += `<b>${props.name}</b><br>${formattedPeople} people`
|
|
} else {
|
|
info._div.innerHTML += 'Hover over a country'
|
|
}
|
|
}
|
|
|
|
info.addTo(map);
|
|
|
|
// Hover over feature
|
|
const 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)
|
|
},
|
|
mouseout: event => {
|
|
geojson.resetStyle(event.target)
|
|
info.update()
|
|
},
|
|
click: event => map.fitBounds(event.target.getBounds())
|
|
})
|
|
}
|
|
|
|
// Default style for each feature
|
|
const getStyle = feature => ({
|
|
stroke: true,
|
|
fill: true,
|
|
fillColor: getColor(feature.properties.pop_est).color,
|
|
fillOpacity: 1,
|
|
dashArray: '3',
|
|
weight: 2,
|
|
color: 'black'
|
|
})
|
|
|
|
// Load data in
|
|
$.getJSON('europe.geo.json', data => {
|
|
geojson = L.geoJson(data, {style: getStyle, onEachFeature}).addTo(map)
|
|
})
|
|
}
|
|
|
|
aufgabe1()
|