From 28d5bb00dd1ae19cc92429fd354044194498e33c Mon Sep 17 00:00:00 2001
From: Tim Herbst <herbst.tim@icloud.com>
Date: Mon, 18 Jan 2021 19:40:17 +0000
Subject: [PATCH] Update Vorgehensweise

---
 Projektarbeit-3/Vorgehensweise.md | 38 +++++++++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/Projektarbeit-3/Vorgehensweise.md b/Projektarbeit-3/Vorgehensweise.md
index 390756e..d7d49f4 100644
--- a/Projektarbeit-3/Vorgehensweise.md
+++ b/Projektarbeit-3/Vorgehensweise.md
@@ -401,11 +401,45 @@ private fetchBikePointGeoData(): Promise<any> {
   return this.client.get(environment.apiUrl + 'latest/bikepoints/').toPromise();
 }
 ```
-Weitere Beispiele sind aus dem Sourcecode zu entnehmen.
+Weitere Beispiele sind dem Sourcecode zu entnehmen.
 
 ## Einbinden von Leaflet
 <div align="center">
   <img src="uploads/ba24436b46fbe8e67d6adddf64f12bf6/LeafletMapArchitektur.png"/>
 </div>
 
-* Grober Ablauf der Map-Generierung (Layer-Aufbau grafisch darstellen)
+Wie die Grafik zeigt, ist die Map-Komponente allein für die Darstellung der Map verantwortlich. Alle Logik, um die verschiedenen Layer zu generieren, wurde in den Service ausgelagert.
+
+<table>
+<tr>
+<th style="text-align: center">MapComponent.html</th>
+<th style="text-align: center">MapComponent.ts</th>
+</tr>
+<tr>
+<td>
+            
+```
+<div class="map-container" fxLayout="row">
+  <div class="map-frame" fxFill>
+    <div id="map"></div>
+  </div>
+</div>
+```
+
+</td>
+<td>
+
+```
+async initMapView(): Promise<any> {
+  this.service.initMap(51.509865, -0.118092, 14);
+  await this.service.drawStationMarkers();
+  this.service.drawHeatmap();
+  this.service.drawAccidents();
+}
+```
+
+</td>
+</tr>
+</table>
+
+In der `MapComponent.html` ist das div-Element mit der DOM-ID "map" ausschlaggebend. Über diese ID wird im Service ein Map-Objekt initialisiert und alle weiteren Layer darauffolgend geladen.