From 34080a4378289684ac95c8ac00a703552e2912e3 Mon Sep 17 00:00:00 2001
From: Tim Herbst <herbst.tim@icloud.com>
Date: Tue, 19 Jan 2021 15:11:04 +0000
Subject: [PATCH] Update Vorgehensweise

---
 Projektarbeit-3/Vorgehensweise.md | 54 +++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/Projektarbeit-3/Vorgehensweise.md b/Projektarbeit-3/Vorgehensweise.md
index a1743af..42b09c8 100644
--- a/Projektarbeit-3/Vorgehensweise.md
+++ b/Projektarbeit-3/Vorgehensweise.md
@@ -443,3 +443,57 @@ async initMapView(): Promise<any> {
 </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.
+
+### Map-Initialisierung
+Sowohl im Dashboard als auch auf der Startseite wird eine Map generiert. Beide nutzen die in der Vorlesung vorgestellten Daten von OpenStreetMap. Diese Daten werden bei beiden Maps als Base Layer gesetzt und sind nicht veränderlich.
+
+#### Mini-Map
+
+Aufruf aus der Komponente:
+
+```typescript
+this.map.initDashboardMap(this.bikePoint.lat, this.bikePoint.lon, 17);
+```
+
+Auszug aus der Methode `initDashBoardMap` im MapService
+
+```typescript
+if (this.miniMap) {
+  this.miniMap.off();
+  this.miniMap.remove();
+}
+this.miniMap = L.map('minimap').setView([lat, lon], zoom);
+this.miniMap.addLayer(new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+  attribution: 'Map data <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
+  minZoom: 0,
+  maxZoom: 19
+}));
+```
+
+Zu beachten ist wie schon erwähnt bei der Generierung des Map-Objektes die richtige DOM-ID zu übergeben. Zentriert wird die Map in der Startseite auf das Stadtzentrum, während die Mini-Map auf die Geo-Koordinaten des jeweiligen Bikepoints schaut.
+
+Ein weiterer nennenswerter Punkt ist die initiale if-Bedingung in der `initDashBoardMap`. Diese ist nötig, da für jeden einzelnen Bikepoint eine Mini-Map geladen wird und falls diese schon gesetzt ist, wird sie mit den folgenden Code zurückgesetzt:
+
+```typescript
+this.miniMap.off();
+this.miniMap.remove();
+```
+
+#### Map
+Aufruf aus der Komponente:
+
+```typescript
+this.service.initMap(51.509865, -0.118092, 14);
+```
+
+Auszug aus der Methode `initMap` im MapService
+
+```typescript
+this.map = L.map('map').setView([lat, lon], zoom);
+this.map.addLayer(new L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+  attribution: 'Map data <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
+  minZoom: 0,
+  maxZoom: 19,
+  preferCanvas: true
+}));
+```
\ No newline at end of file