add accidents layer with clustering

projects/project-3/frontend/src/app/dashboard/dashboard.component.scss

@@ -11,7 +11,7 @@ a {
 }
 
 .button-back:hover, .button-wiki:hover {
-  background: #5a34a0;
+  background: #086ed2;
 }
 
 #submit-date-span {

projects/project-3/frontend/src/app/map/map.component.scss

@@ -8,6 +8,10 @@
   flex: 1 1 auto;
 }
 
+.button-wiki:hover {
+  background: #086ed2;
+}
+
 .map-container {
   height: 95%;
 }

projects/project-3/frontend/src/app/map/map.component.ts

@@ -17,7 +17,8 @@ export class MapComponent implements OnInit {
 
    async initMapView(): Promise<any> {
     this.service.initMap(51.509865, -0.118092, 14);
-    await this.service.makeStationMarkers();
+    await this.service.drawStationMarkers();
     this.service.drawHeatmap();
+    this.service.drawAccidents();
   }
 }

projects/project-3/frontend/src/app/service/map.service.ts

@@ -5,7 +5,7 @@ import 'leaflet.heat/dist/leaflet-heat';
 import {HttpClient} from '@angular/common/http';
 import {environment} from '../../environments/environment';
 import {PopUpService} from './pop-up.service';
-import {BikePointStatus, IMapBikePoint} from './domain/map-bike-point';
+import {IMapBikePoint} from './domain/map-bike-point';
 
 
 const createIcon = L.icon({
@@ -36,7 +36,8 @@ export class MapService {
     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
+      maxZoom: 19,
+      preferCanvas: true
     }));
   }
 
@@ -49,8 +50,8 @@ export class MapService {
     }));
   }
 
-  public makeStationMarkers(): Promise<any> {
-    return this.fetchStationGeoData().then((data) => {
+  public drawStationMarkers(): Promise<any> {
+    return this.fetchBikePointGeoData().then((data) => {
       this.bikePoints = data;
       const markerClusters = L.markerClusterGroup({
         spiderflyOnMaxZoom: true,
@@ -74,54 +75,68 @@ export class MapService {
   }
 
   public drawHeatmap(): void {
-    // PLS LOOK AT THIS - START
-    const heatPoints = this.bikePoints.map(bikePoint => ({
-      lat: bikePoint.lat,
-      lon: bikePoint.lon,
-      intensity: this.getIntensity(bikePoint.status)
-    }));
-
-    this.mapOverlays.Heatmap = L.heatLayer(heatPoints, {
-      max: 0.3,
-      radius: 90
-    });
-
-    const heatPointsBla = this.bikePoints.map(bikePoint => ([
-      bikePoint.lat,
-      bikePoint.lon,
-      this.getIntensity(bikePoint.status)
-    ]));
-
-    this.mapOverlays.Heatmap2 = L.heatLayer(heatPointsBla, {
-      max: 0.3,
-      radius: 90
-    });
-
-    const heatPointsBla2 = this.bikePoints.map(bikePoint => ([
+    const heatPoints = this.bikePoints.map(bikePoint => ([
       bikePoint.lat,
       bikePoint.lon,
       bikePoint.status.NbBikes
     ]));
 
-    this.mapOverlays.Heatmap3 = L.heatLayer(heatPointsBla2, {
+    this.mapOverlays.Heatmap = L.heatLayer(heatPoints, {
       max: 5,
       radius: 90
     });
-    // PLS LOOK AT THIS - END
+  }
 
-    L.control.layers(null, this.mapOverlays).addTo(this.map);
+  public drawAccidents(): void {
+    this.fetchAccidentGeoData().then(data => {
+      const accidents = [];
+      const myRenderer = L.canvas({padding: 0.5});
+      const accidentCluster = L.markerClusterGroup({
+        spiderflyOnMaxZoom: true,
+        showCoverageOnHover: true,
+        zoomToBoundsOnClick: true
+      });
+      for (const accident of data) {
+        const severityColor = this.getAccidentColor(accident.severity);
+        const accidentMarker = L.circle([accident.lat, accident.lon], {
+          renderer: myRenderer,
+          color: severityColor,
+          fillColor: severityColor,
+          fillOpacity: 0.5,
+          radis: 25
+        });
+        accidentCluster.addLayer(accidentMarker);
+      }
+      this.mapOverlays.Accidents = accidentCluster;
+      this.drawMapControl();
+    });
+  }
+
+  public getAccidentColor(severity: string): string {
+    switch (severity) {
+      case 'Slight':
+        return 'yellow';
+      case 'Serious':
+        return 'orange';
+      case 'Fatal':
+        return 'red';
+    }
   }
 
   public drawDashboardStationMarker(lat: number, lon: number): void {
     L.marker([lat, lon], {icon: createIcon}).addTo(this.miniMap);
   }
 
-  private getIntensity(status: BikePointStatus): number {
-    const percentage = Math.round((status.NbBikes / status.NbDocks) * 100);
-    return (percentage / 100);
+  private drawMapControl(): void {
+    L.control.layers(null, this.mapOverlays, {position: 'bottomright'}).addTo(this.map);
+    L.control.scale({position: 'bottomleft'}).addTo(this.map);
   }
 
-  private fetchStationGeoData(): Promise<any> {
+  private fetchBikePointGeoData(): Promise<any> {
     return this.client.get(environment.apiUrl + 'latest/bikepoints/').toPromise();
   }
+
+  private fetchAccidentGeoData(): Promise<any> {
+    return this.client.get(environment.apiUrl + 'latest/accidents/').toPromise();
+  }
 }