From d3c873235870b2e5801a97df9dd58f1cba658c2e Mon Sep 17 00:00:00 2001
From: Tim Herbst <herbst.tim@icloud.com>
Date: Tue, 19 Jan 2021 16:37:52 +0000
Subject: [PATCH] Update Umsetzung

---
 Projektarbeit-3/Umsetzung.md | 40 ++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/Projektarbeit-3/Umsetzung.md b/Projektarbeit-3/Umsetzung.md
index f29e323..02c594b 100644
--- a/Projektarbeit-3/Umsetzung.md
+++ b/Projektarbeit-3/Umsetzung.md
@@ -337,9 +337,49 @@ export interface IMapBikePoint {
 </tr>
 </table>
 
+Daher mussten wir bevor unsere Heatpoints dem Layer hinzufügen können, unsere Bikepoints reduzieren.
+
+```typescript
+const heatPoints = this.bikePoints.map(bikePoint => ([
+  bikePoint.lat,
+  bikePoint.lon,
+  bikePoint.status.NbBikes
+]));
+const heatmap = L.heatLayer(heatPoints, {
+  max: 5,
+  radius: 90
+});
+```
+
+Enorm wichtig war die Wahl der Intensität. Diese beträgt in unserem Fall die Anzahl an Fahrrädern, die sich in der Station befinden. Außerdem unterscheidet sich die Heatmap gravierend je nach Radius des Heatpoints. Nach ausführlicher Analyse haben wir uns für einen Radius von 90 entschieden, um das optimale Ergebnis zu erhalten.
+
+#### drawAccidents
+Besonders an der Unfallstatistik ist das eigene Datenmodell. Da wir aber außerhalb dieser Methode nie mit einem Unfall hantieren, haben wir hierfür im Frontend kein eigenes Domänenobjekt erstellt.
+
+```typescript
+const accidents = [];
+for (const accident of data) {
+  const severityColor = this.getAccidentColor(accident.severity);
+  const accidentMarker = L.circle([accident.lat, accident.lon], {
+    renderer: myRenderer,
+    color: severityColor,
+    fillColor: severityColor,
+    fillOpacity: 0.5,
+    radius: 30,
+    interactive: false
+  });
+  accidents.push(accidentMarker);
+  }
+const accidentLayer = L.layerGroup(accidents);
+```
+Wir iterieren durch das API-Response und setzen als Erstes mit der Hilfsmethode `getAccidentColor` die Farbe des Markers. Diese unterscheidet lediglich nach Schwere des Unfalls zwischen Gelb, Grün und Rot.
+
+Anschließend erstellen wir für jeden Unfall ein Objekt vom Typ Circle. Auch die Unfälle fügen wir der Map nicht direkt hinzu, sondern gehen über die `L.layerGroup`. So können wir auch die Unfälle in unserem Menü nach Belieben auf und abschalten.
+
 ## Erläuterung "the Angular way"
 * Pop-Up Komponentengenerierung auf Button-click
 * Abhängigkeiten der Services zu den jeweiligen Komponenten
+* auto-refresh
 
 ## Komponenten
 Einführung in das Dashboard sowie auf die Map