Update Umsetzung

Projektarbeit-3/Umsetzung.md

@@ -244,9 +244,98 @@ In dieser Methode wird unter anderem vorbereitend auf die Accidents die zugehör
 #### 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.
 
+##### Clustering der Marker
+Da 840 Marker auf der Map keinen ordentlichen Eindruck machen, haben wir mithilfe von `Leaflet.MarkerCluster` die Marker je nach Zoom-Level des Benutzers gruppiert.
+```typescript
+const markerClusters = L.markerClusterGroup({
+  spiderflyOnMaxZoom: true,
+  showCoverageOnHover: true,
+  zoomToBoundsOnClick: true
+});
+this.mapOverlays.Bikepoints = markerClusters;
+this.map.addLayer(markerClusters);
+```
+Der MarkerCluster-Gruppe können bestimmte Optionen mitgegeben werden, wie z.B.:
+<table>
+    <tr>
+        <td>spiderfyOnMaxZoom</td>
+        <td>Bei Klick auf ein Cluster, wird dieses automatisch aufgelöst und die Map zeigt die Marker</td>
+    </tr>
+    <tr>
+        <td>showCoverageOnHover</td>
+        <td>Wenn man mit der Maus über ein Cluster hovert, zeigt dieses die Grenzen der Marker</td>
+    </tr>
+    <tr>
+        <td>zoomToBoundsOnClick</td>
+        <td>Bei Klick zoomt die Map auf die Grenzen des ausgewählten Clusters</td>
+    </tr>
+</table>
 
-* Leaflet-Heatmap
+```typescript
-* ngx-leaflet vs plain
+this.mapOverlays.Bikepoints = markerClusters;
+this.map.addLayer(markerClusters);
+```
+Die letzten beiden Zeilen fügen zum einen die Marker dem Layer Control hinzu. Und da wir uns entschieden haben, die Marker standardmäßig beim Laden auf der Map anzuzeigen, werden diese zusätzlich direkt der Map hinzugefügt.
+
+##### Generierung der Marker
+Anschließend iterieren wir durch die API-Response, welche die 840 Bikestationen hält.
+```typscript
+for (const station of data) {
+        const marker = L.marker([station.lat, station.lon], {icon: createIcon('blue')});
+        markerClusters.addLayer(marker);
+        marker.on('click', e => {
+          e.target.bindPopup(this.popUpService.makeAvailabilityPopUp(station), {maxWidth: 'auto'})
+            .openPopup();
+          this.map.panTo(e.target.getLatLng());
+        });
+        marker.on('popupclose', e => e.target.unbindPopup());
+      }
+```
+Die Marker werden nicht direkt der Map hinzugefügt. Wie gerade ausgeführt gruppieren wir diese, das heißt wir fügen die Marker über das `markerClusters` Layer der Map hinzu.
+
+Anschließend werden dem Marker noch zwei Eventlistener hinzugefügt. 
+```typescript
+ marker.on('click', e => {
+  e.target.bindPopup(this.popUpService.makeAvailabilityPopUp(station), {maxWidth: 'auto'})
+            .openPopup();
+  this.map.panTo(e.target.getLatLng());
+});
+```
+Dadurch wird erst bei Klick auf einen Marker, die entsprechende Komponente für das Pop-up generiert. Die Methoden des Pop-ups werden zu einem späteren Zeitpunkt genauer erläutert.
+
+#### drawHeatmap
+Bei der Heatmap haben wir uns entschieden das Plugin von Vladimir Agafonkin [Leaflet.heat](https://github.com/Leaflet/Leaflet.heat) zu nutzen. Das Plugin hat uns zugesagt, da die Heatpunkte die für die Generierung der Heatmap nötig sind, auch über ein Layer der Map hinzugefügt werden. Dies konnten nahtlos in unsere bestehende Architektur einbinden.
+
+In diesem Punkt hat sich aber das Datenmodell des Plugins leicht von unserem unterschieden und mussten daher unsere Bikepoints erst einmal mappen.
+
+<table>
+<tr>
+<td>Leaflet.heat Domänenobjekt</td>
+<td>MapBikePoint</td>
+</tr>
+<tr>
+<td>
+
+```typescript
+[50.5, 30.5, 0.2], // lat, lng, intensity
+```
+
+</td>
+<td>
+
+```typescript
+export interface IMapBikePoint {
+  id?: string;
+  commonName?: string;
+  lat?: number;
+  lon?: number;
+  status?: BikePointStatus;
+}
+```
+
+</td>
+</tr>
+</table>
 
 ## Erläuterung "the Angular way"
 * Pop-Up Komponentengenerierung auf Button-click