synchron call for maps and overlay

* implement heatmap
* adjust pupupAnchor for new popup-component

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

@@ -12,11 +12,12 @@ export class MapComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.init_map_view();
+    this.initMapView();
   }
 
-  init_map_view(): void {
-    this.service.init_map(51.509865, -0.118092, 14);
-    this.service.make_station_markers();
+   async initMapView(): Promise<any> {
+    this.service.initMap(51.509865, -0.118092, 14);
+    await this.service.makeStationMarkers();
+    this.service.drawHeatmap();
   }
 }

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

@@ -5,13 +5,14 @@ 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';
 
 
 const createIcon = L.icon({
   iconUrl: '../../assets/bike-point.png',
-  iconSize: [60, 60],
-  iconAnchor: [30, 60],
-  popupAnchor: [-118, -53]
+  iconSize: [40, 40],
+  iconAnchor: [18, 40],
+  popupAnchor: [0, -39]
 });
 
 @Injectable({
@@ -20,14 +21,17 @@ const createIcon = L.icon({
 export class MapService {
   public map;
   public miniMap;
+  bikePoints: Array<IMapBikePoint> = [];
+  mapOverlays: any = {};
 
   constructor(
     private client: HttpClient,
     private popUpService: PopUpService,
   ) {
+
   }
 
-  public init_map(lat: number, lon: number, zoom: number): void {
+  public initMap(lat: number, lon: number, zoom: number): void {
     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',
@@ -36,7 +40,7 @@ export class MapService {
     }));
   }
 
-  public draw_dashboard_map(lat: number, lon: number, zoom: number): void {
+  public drawDashboardMap(lat: number, lon: number, zoom: number): void {
     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',
@@ -45,13 +49,15 @@ export class MapService {
     }));
   }
 
-  public make_station_markers(): void {
-    this.fetch_station_geo_data().then((data) => {
+  public makeStationMarkers(): Promise<any> {
+    return this.fetchStationGeoData().then((data) => {
+      this.bikePoints = data;
       const markerClusters = L.markerClusterGroup({
         spiderflyOnMaxZoom: true,
         showCoverageOnHover: true,
         zoomToBoundsOnClick: true
       });
+      this.mapOverlays.Bikepoints = markerClusters;
       this.map.addLayer(markerClusters);
       for (const station of data) {
         const marker = L.marker([station.lat, station.lon], {icon: createIcon});
@@ -63,16 +69,35 @@ export class MapService {
         marker.on('popupclose', e => e.target.unbindPopup());
       }
     }).catch((error) => {
-      console.log('something went wrong: ' + JSON.stringify(error));
+      console.log(error);
     });
   }
 
-  public draw_dashboard_station_marker(lat: number, lon: number): void {
+  public drawHeatmap(): void {
+    const heatPoints = this.bikePoints.map(bikePoint => ({
+      lat: bikePoint.lat,
+      lon: bikePoint.lon,
+      intensity: this.getIntensity(bikePoint.status)
+    }));
+    const heatLayer = L.heatLayer(heatPoints, {
+      max: 1.0,
+      minOpacity: 0.2,
+      radius: 100
+    });
+    this.mapOverlays.Heatmap = heatLayer;
+    L.control.layers(null, this.mapOverlays).addTo(this.map);
+  }
+
+  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 async fetch_station_geo_data(): Promise<any> {
-    return await this.client.get(environment.apiUrl + 'latest/bikepoints/').toPromise();
+  private fetchStationGeoData(): Promise<any> {
+    return this.client.get(environment.apiUrl + 'latest/bikepoints/').toPromise();
   }
 }