Update Vorgehensweise

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
+}));
+```