diff --git a/projects/project-2/aufgabe1.js b/projects/project-2/aufgabe1.js
new file mode 100644
index 0000000..679bdbe
--- /dev/null
+++ b/projects/project-2/aufgabe1.js
@@ -0,0 +1,113 @@
+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(' ' + from + (to ? '–' + to : '+'))
+ }
+
+ legend.innerHTML = labels.join('
')
+ 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 = 'European Population
'
+ if (props) {
+ let formattedPeople = new Intl.NumberFormat('de-DE').format(props.pop_est)
+ info._div.innerHTML += `${props.name}
${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()
diff --git a/projects/project-2/index.html b/projects/project-2/index.html
index 7b5388c..da814e7 100644
--- a/projects/project-2/index.html
+++ b/projects/project-2/index.html
@@ -3,167 +3,39 @@
Leaflet GeoJSON - Population Europe
-
-
+
+
+
+
-
+
+
+
+
Aufgabe 1
+
+
+
+
Aufgabe 2
+
+
+