diff --git a/projects/project-2/aufgabe1.js b/projects/project-2/aufgabe1.js index 679bdbe..a5fd4e6 100644 --- a/projects/project-2/aufgabe1.js +++ b/projects/project-2/aufgabe1.js @@ -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 OpenStreetMap 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(' ' + from + (to ? '–' + to : '+')) + let from = levels[i] + 1 + let to = levels[i + 1] + 1 + labels.push(' ' + from + (to ? '–' + to : '+')) } legend.innerHTML = labels.join('
') @@ -58,10 +61,10 @@ const aufgabe1 = () => { } info.update = props => { - info._div.innerHTML = '

European Population

' + info._div.innerHTML = '

European Population Density

' if (props) { - let formattedPeople = new Intl.NumberFormat('de-DE').format(props.pop_est) - info._div.innerHTML += `${props.name}
${formattedPeople} people` + let formattedDensity = new Intl.NumberFormat('de-DE').format(props.density) + info._div.innerHTML += `${props.name}
${formattedDensity} people/km2` } 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) }) } diff --git a/projects/project-2/index.html b/projects/project-2/index.html index da814e7..5d46810 100644 --- a/projects/project-2/index.html +++ b/projects/project-2/index.html @@ -35,6 +35,7 @@ +