From 74bab52b47c10aaaaddf5c6687d472b46129ae00 Mon Sep 17 00:00:00 2001
From: Tim Herbst <herbst.tim@icloud.com>
Date: Tue, 19 Jan 2021 15:40:50 +0000
Subject: [PATCH] Update Umsetzung

---
 Projektarbeit-3/Umsetzung.md | 43 ++++++++++++++++++++++++++++++++----
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/Projektarbeit-3/Umsetzung.md b/Projektarbeit-3/Umsetzung.md
index b83e073..a32f262 100644
--- a/Projektarbeit-3/Umsetzung.md
+++ b/Projektarbeit-3/Umsetzung.md
@@ -206,8 +206,46 @@ Aktuell wird nur der Source Code in das Image kopiert und die vorher generierte
  
 # Frontend
 ## Leaflet im Detail
+### Marker Generierung
+Auch die Marker werden in unserer Applikation über den Map Service geladen. Wie bereits im [Kapitel 2 Vorgehensweise](Projektarbeit-3/Vorgehensweise) angedeutet wird die Map mit mehreren Methoden gefüllt. Jedes Layer oder Overlay besitzt eine eigene Methode.
+Hier noch einmal die Methoden im Überblick:
+
+```typscript
+this.service.initMap(51.509865, -0.118092, 14);
+await this.service.drawStationMarkers();
+this.service.drawHeatmap();
+this.service.drawAccidents();
+```
+Schauen wir uns im Weiteren die Methoden genauer an:
+
+#### initMap
+```typscript
+this.map = L.map('map').setView([lat, lon], zoom);
+```
+Wie bereits in der Vorgehensweise erläutert wird zuerst das Map-Objekt mit `L.map('map)` initialisiert.
+ 
+```typescript
+this.map.addLayer(new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+  ...
+  ...
+```
+Anschließend werden die Daten von OpenStreetMap als Base Layer gesetzt. So haben wir sichergestellt, dass die Map immer einen legitimen Hintergrund besitzt.
+
+```typescript
+this.accidentLegend.onAdd = () => {
+  ...
+  ...
+}
+this.map.on('overlayadd', e => e.name === 'Accidents' ? this.accidentLegend.addTo(this.map) : null);
+this.map.on('overlayremove', e => e.name === 'Accidents' ? this.accidentLegend.remove() : null);
+```
+In dieser Methode wird unter anderem vorbereitend auf die Accidents die zugehörige Legende definiert. Innerhalb des `this.accidentLegend.onAdd {}` Blockes wird das DOM-Element erstellt, dass wenn die Accidents der Map aufgeschaltet werden, automatisch angezeigt wird.
+
+#### drawStationMarkers
+Diese Methode macht einen Aufruf an unser Backend und bezieht für alle 840 Stationen die nötigen Informationen, um die Anforderungen an das Pop-up als auch an die Routing Parameter zu erfüllen.
+
+
 * Leaflet-Heatmap
-* Markerclustering
 * ngx-leaflet vs plain
 
 ## Erläuterung "the Angular way"
@@ -227,9 +265,6 @@ Einführung in das Dashboard sowie auf die Map
 ### Charts
 * Erklärung der ChartOptions, sowie genaue Erläuterung bei Aktualisierung
 
-## Service ???
-noch nicht sicher, ob in die jeweilige Komponente
-
 ## Layout
 * Überblick über Angular Material
 * Bootstrap Layout