Add driving animation for google maps

components/control_center/package.json

@@ -12,6 +12,7 @@
   },
   "private": true,
   "dependencies": {
+    "@agm/core": "^3.0.0-beta.0",
     "@angular-devkit/schematics": "~9.1.7",
     "@angular/animations": "~9.1.9",
     "@angular/cdk": "9.2.4",
@@ -19,7 +20,6 @@
     "@angular/compiler": "~9.1.9",
     "@angular/core": "~9.1.9",
     "@angular/forms": "~9.1.9",
-    "@angular/google-maps": "^12.0.2",
     "@angular/localize": "~9.1.9",
     "@angular/material": "9.2.4",
     "@angular/platform-browser": "~9.1.9",
@@ -40,6 +40,7 @@
     "@angular/compiler-cli": "~9.1.9",
     "@angular/language-service": "~9.1.9",
     "@compodoc/compodoc": "~1.1.11",
+    "@types/googlemaps": "^3.39.13",
     "@types/jasmine": "~3.4.6",
     "@types/jasminewd2": "~2.0.8",
     "@types/node": "^12.12.42",

components/control_center/src/app/app.module.ts

@@ -15,13 +15,11 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {MatButtonModule} from '@angular/material/button';
 import {MatInputModule} from '@angular/material/input';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
-import {MatSliderModule} from "@angular/material/slider";
-import { GoogleMapsModule } from '@angular/google-maps';
+import {AgmCoreModule, GoogleMapsAPIWrapper} from '@agm/core';
 
 @NgModule({
   declarations: [LandingComponent],
   imports: [
-    GoogleMapsModule,
     ReactiveFormsModule,
     BrowserModule,
     BrowserAnimationsModule,
@@ -33,10 +31,13 @@ import { GoogleMapsModule } from '@angular/google-maps';
     MatButtonModule,
     MatInputModule,
     MatSlideToggleModule,
-    MatSliderModule
+    AgmCoreModule.forRoot({
+      apiKey: 'AIzaSyCXF-INAlIkG9uPBofGLUCyHthaLxN-3PY',
+    })
   ],
   // enables injecting
   providers: [
+    GoogleMapsAPIWrapper,
     RestService,
     WebsocketService,
     {

components/control_center/src/app/component/landing/landing.component.html

@@ -1,6 +1,6 @@
-<google-map width="auto" height="100vh"
-  [zoom]="zoom"
-  [center]="center"
-  [options]="options"
->
-</google-map>
+<button (click)="toggleMarker()">Drive!</button>
+
+<agm-map id="map" #map [zoom]="zoom" [latitude]="center.lat" [longitude]="center.lng" style="height: 900px; width: 1200px">
+  <agm-marker *ngFor="let m of markers" [iconUrl]="m.iconUrl" [visible]="m.visible"  [latitude]="m.lat" [longitude]="m.lng" >
+  </agm-marker>
+</agm-map>

components/control_center/src/app/component/landing/landing.component.ts

@@ -1,8 +1,5 @@
 import {Component, OnInit, ViewChild} from '@angular/core';
-import {RestService} from '../../services/rest.service';
-import {NGXLogger} from 'ngx-logger';
-import {Subscription} from 'rxjs';
-
+import {AgmMap, AgmMarker} from '@agm/core';
 
 @Component({
   selector: 'app-landing',
@@ -11,80 +8,59 @@ import {Subscription} from 'rxjs';
 })
 export class LandingComponent implements OnInit {
 
-  zoom = 12;
-  center: { lat: -33, lng: 151 };
-  options: google.maps.MapOptions = {
-    zoomControl: false,
-    scrollwheel: false,
-    maxZoom: 12,
-    minZoom: 12,
-    disableDefaultUI: true
-  };
-
-  private wsSubscription: Subscription;
-  private wsMessageCounter: number;
-
-  constructor(
-    private logger: NGXLogger,
-    private restService: RestService
-  ) {
+  constructor() {
   }
 
-  ngOnInit(): void {
-    // perform test rest call as observable
-    this.observableCall();
+  @ViewChild('map') map: AgmMap;
 
-    // perform test rest call as promise (shorter - will only be executed exactly once)
-    this.promiseCall();
 
-    // perform test ws send / receive
-    /*    setTimeout(() => {
-            this.wsCall();
-          },
-          1000);*/
+  zoom = 14;
+  center = {lat: 53.531248, lng: 13.409038};
+
+  // Test Data
+  markers = [
+    {
+      Id: 1,
+      name: 'Car-1',
+      lat: 53.521248,
+      lng: 13.399038,
+      visible: true,
+      iconUrl: 'assets/pictures/car.png'
+    },
+    {
+      Id: 2,
+      name: 'Car-2',
+      lat: 53.531248,
+      lng: 13.409038,
+      visible: true,
+      iconUrl: 'assets/pictures/car.png'
+    },
+  ];
+
+  ngOnInit() {
   }
 
-  private observableCall(): void {
-
-    const subscription = this.restService.testCall(1).subscribe(
-      // subscribe with lambda function
-      response => {
-        this.logger.debug('Execute obs test call', response);
-        subscription.unsubscribe();
-      },
-      error => {
-        this.logger.error('Error while executing obs test call', error);
-        subscription.unsubscribe();
-      }
-    );
+  getDelta(source, destination, steps) {
+    return {
+      lat: (destination.lat - source.lat) / steps,
+      lng: (destination.lng - source.lng) / steps
+    };
   }
 
-  private promiseCall(): void {
-    this.restService.testCall(2).toPromise()
-      // lambda for success
-      .then(response => {
-        this.logger.debug('Execute obs test call', response);
-      })
-      // lambda for fail
-      .catch(error => {
-        this.logger.error('Error while executing obs test call', error);
-      });
+  toggleMarker() {
+    const delta = this.getDelta(this.markers[0], this.markers[1], 100);
+
+    this.move(this.markers[0], delta, 0, 10, 100);
+
   }
 
-  /*  private wsCall(): void {
-      this.wsMessageCounter = 0;
-      this.wsSubscription = this.wsService.wsTestCall('Test message').message.subscribe(
-        result => {
-          this.logger.debug('ws call result', result);
-          if (this.wsMessageCounter >= 2) {
-            this.wsSubscription.unsubscribe();
-          }
-        },
-        error => {
-          this.logger.error('ws call error', error);
-          this.wsSubscription.unsubscribe();
-        }
-      );
-    }*/
+  move(source, delta, counter, delay, steps) {
+    source.lat += delta.lat;
+    source.lng += delta.lng;
+    if (counter !== steps) {
+      counter++;
+      setTimeout(this.move.bind(this), delay, source, delta, counter, delay, steps);
+    }
+  }
 
 }