Update project 2 aufgabe 1 to show density instead of population

Add tile layer to map

projects/project-2/aufgabe1.js

@@ -1,31 +1,34 @@
 const aufgabe1 = () => {
     const map = L.map('map').setView([53.0, 14.0], 4)
-    const levels = [
+    map.addLayer(new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        1_000_000, 5_000_000, 10_000_000, 20_000_000,
+        attribution: 'Map data <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
-        30_000_000, 50_000_000, 80_000_000, 100_000_000
+        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 from = levels[i] + 1
-            let to = getColor(levels[i + 1] + 1).name
+            let to = levels[i + 1] + 1
-            labels.push('<i style="background:' + getColor(levels[i] + 1).color + '"></i> ' + from + (to ? '&ndash;' + to : '+'))
+            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)
+            let formattedDensity = new Intl.NumberFormat('de-DE').format(props.density)
-            info._div.innerHTML += `<b>${props.name}</b><br>${formattedPeople} people`
+            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)
     })
 }

projects/project-2/index.html

@@ -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>