Update Umsetzung

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