Merge branch 'master' into '20-ride-history-2'

# Conflicts:
#   src/app/hirebike/hirebike.page.ts

angular.json

@@ -37,9 +37,15 @@
               },
               {
                 "input": "src/global.scss"
-              }
+              },
+              "src/assets/js/mapsjs-ui.css"
             ],
-            "scripts": []
+            "scripts": [
+              "./src/assets/js/mapsjs-core.js",
+              "./src/assets/js/mapsjs-mapevents.js",
+              "./src/assets/js/mapsjs-service.js",
+              "./src/assets/js/mapsjs-ui.js"
+            ]
           },
           "configurations": {
             "production": {

config.xml

 <?xml version='1.0' encoding='utf-8'?>
 <widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
-    <name>MyApp</name>
+    <name>AWADO</name>
     <description>An awesome Ionic/Cordova app.</description>
     <author email="hi@ionicframework.com" href="http://ionicframework.com/">Ionic Framework Team</author>
     <content src="index.html" />

src/app/auth/login/login.page.ts

 import { Component, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
+import { Router, LoadChildrenCallback } from '@angular/router';
 
 import { Observable } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 
 import { RestService } from '../../rest.service';
 import { UserService } from 'src/app/services/user.service';
+import { LocationService } from 'src/app/services/location.service';
+import { LoadingService } from 'src/app/services/loading.service';
 
 @Component({
   selector: 'app-login',
@@ -15,12 +17,15 @@ import { UserService } from 'src/app/services/user.service';
 export class LoginPage implements OnInit {
   username = "";
   password = "";
-  //username = "";
-  //password = "";
   correctCredentials = false;
   loginApi: Observable<any>;
 
-  constructor(private router: Router, public httpClient: HttpClient, public restService: RestService,public userService: UserService) {
+  constructor(private router: Router,
+    public httpClient: HttpClient,
+    public restService: RestService,
+    public userService: UserService,
+    public locationService: LocationService,
+    public loadingService: LoadingService) {
 
   }
 
@@ -37,6 +42,7 @@ export class LoginPage implements OnInit {
       "email": this.username,
       "password": this.password
     });
+    this.loadingService.showLoader();
     this.loginApi
       .subscribe((data) => {
         //console.log('my data: ', data);
@@ -44,9 +50,11 @@ export class LoginPage implements OnInit {
         this.restService.isLoginPage = false;
         this.userService.setUsername(this.username);
         this.router.navigateByUrl('/home');
+        this.loadingService.hideLoader();
       }, (error) => {
         console.log(JSON.stringify(error));
         this.correctCredentials = true;
+        this.loadingService.hideLoader();
       });
   }
   register() {

src/app/components/here-map/here-map.component.html

 <div #mapElement style="width: 100%; height: 100%" id="mapContainer" *ngIf="!is3DChecked"></div>
-  <ion-fab class="get-position" vertical="bottom" horizontal="end" (click)="getCurrentPosition()" slot="fixed">
-    <ion-fab-button>
-      <ion-icon name="locate"></ion-icon>
-    </ion-fab-button>
-  </ion-fab>
+<ion-fab class="get-position" vertical="bottom" horizontal="end" (click)="getCurrentPosition()" slot="fixed">
+  <ion-fab-button>
+    <ion-icon name="locate"></ion-icon>
+  </ion-fab-button>
+</ion-fab>
\ No newline at end of file

src/app/components/here-map/here-map.component.ts

@@ -104,7 +104,7 @@ export class HereMapComponent implements OnInit {
     // needed if child gets re-created (eg on some model changes)
     // note that subsequent subscriptions on the same subject will fail
     // so the parent has to re-create parentSubject on changes
-    this.startRideSubject.unsubscribe();
+    //this.startRideSubject.unsubscribe();
   }
 
   onSuccess(result) {

src/app/hirebike/hirebike.page.html

@@ -19,7 +19,13 @@
     </ion-item>
   </div-->
   <!--div #mapElement style="width: 100%; height: 100%" id="mapContainer"></div-->
-  <app-here-map [startRideSubject]="startRideSubject" [gotReservedBikeSubject]="gotReservedBikeSubject"></app-here-map>
+  <!--app-here-map [startRideSubject]="startRideSubject" [gotReservedBikeSubject]="gotReservedBikeSubject"></app-here-map-->
+  <div #mapElement style="width: 100%; height: 100%" id="mapContainer" *ngIf="!is3DChecked"></div>
+  <ion-fab class="get-position" vertical="bottom" horizontal="end" (click)="getCurrentPosition()" slot="fixed">
+    <ion-fab-button>
+      <ion-icon name="locate"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
 </ion-content>
 <ion-footer>
   <div class="bike-details-container">

src/app/hirebike/hirebike.page.ts

-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef, Input } from '@angular/core';
 
 import { Geolocation } from '@ionic-native/geolocation/ngx';
 import { RestService } from '../rest.service';
@@ -8,6 +8,8 @@ import { Storage } from '@ionic/storage';
 import { ToastService } from '../services/toast.service';
 import { Router } from '@angular/router';
 import { MapDataService } from '../services/map-data.service';
+import { LocationService } from '../services/location.service';
+import { LoadingService } from '../services/loading.service';
 declare var H: any;
 
 @Component({
@@ -33,16 +35,71 @@ export class HirebikePage implements OnInit {
   gotReservedBikeSubject: Subject<any> = new Subject();
   maneuverList: any = [];
 
+  @ViewChild("mapElement", { static: false })
+  public mapElement: ElementRef;
+
+  private map: any;
+  private ui: any;
+  private defaultLayers: any;
+  private locationsGroup: any;
+
+  private currentUserPosition = { lat: 48.783480, lng: 9.180319 };
+  private bikePosition = { lat: 48.783480, lng: 9.180319 };
+  private destinationPosition = { lat: 48.783480, lng: 9.180319 };
+
+  public currentLocationMarker: any;
+  public destinationMarker: any;
+
+  public rideStarted = false;
+
   constructor(private geolocation: Geolocation,
     public restService: RestService,
     public httpClient: HttpClient,
     private storage: Storage,
     private toastService: ToastService,
     private router: Router,
-    private mapDataService: MapDataService) {
+    private mapDataService: MapDataService,
+    public locationService: LocationService,
+    public loadingService: LoadingService) {
+      
     this.platform = new H.service.Platform({
       'apikey': 'tiVTgBnPbgV1spie5U2MSy-obhD9r2sGiOCbBzFY2_k'
     });
+  }
+
+  ngOnInit() {
+    
+  }
+
+  ngAfterViewInit() {
+    window.addEventListener('resize', () => this.map.getViewPort().resize());
+  }
+
+  ionViewWillEnter() {
+    this.currentUserPosition.lat = this.locationService.currentUserPosition.lat;
+    this.currentUserPosition.lng = this.locationService.currentUserPosition.lng;
+
+    this.initializeMap();
+
+    //get user location
+    if (this.currentLocationMarker) {
+      this.currentLocationMarker.setGeometry({ lat: this.currentUserPosition.lat, lng: this.currentUserPosition.lng })
+    } else {
+      this.showUserLocationOnMap(this.currentUserPosition.lat, this.currentUserPosition.lng);
+    }
+
+    this.locationService.liveLocationSubject.subscribe((position) => {
+      console.log('got location inside home subscription');
+      this.currentUserPosition.lat = position.lat;
+      this.currentUserPosition.lng = position.lng;
+      if (this.currentLocationMarker) {
+        this.currentLocationMarker.setGeometry({ lat: this.currentUserPosition.lat, lng: this.currentUserPosition.lng })
+      } else {
+        this.showUserLocationOnMap(this.currentUserPosition.lat, this.currentUserPosition.lng);
+      }
+    });
+    this.getReservedBike();
+
     this.mapDataService.mapDataSubject.subscribe(receiveddata => {
       console.log('data received ');
       console.log(receiveddata);
@@ -58,14 +115,34 @@ export class HirebikePage implements OnInit {
       }
       this.wayPointsInfo = waypointLabels.join(' - ');
     });
-  }
 
-  ngOnInit() {
-    this.getReservedBike();
-  }
+    this.gotReservedBikeSubject.subscribe(bikeDetails => {
+      console.log('Got Bike in map');
+      console.log(bikeDetails);
+      this.bikePosition.lat = bikeDetails.lat;
+      this.bikePosition.lng = bikeDetails.lon;
+      var img = ['../../../assets/images/100_percent.png', '../../../assets/images/75_percent.png', '../../../assets/images/50_percent.png', '../../../assets/images/25_percent.png', '../../../assets/images/0_percent.png'];
+      if (bikeDetails.batteryPercentage < 100 && bikeDetails.batteryPercentage >= 75) {
+        this.addMarker(Number(bikeDetails.lat), Number(bikeDetails.lon), img[0]);
+      }
+      else if (bikeDetails.batteryPercentage < 75 && bikeDetails.batteryPercentage >= 50) {
+        this.addMarker(Number(bikeDetails.lat), Number(bikeDetails.lon), img[1]);
+      }
+      else if (bikeDetails.batteryPercentage < 50 && bikeDetails.batteryPercentage >= 25) {
+        this.addMarker(Number(bikeDetails.lat), Number(bikeDetails.lon), img[2]);
+      } else if (bikeDetails.batteryPercentage < 25 && bikeDetails.batteryPercentage >= 0) {
+        this.addMarker(Number(bikeDetails.lat), Number(bikeDetails.lon), img[3]);
+      }
 
-  ngAfterViewInit() {
+      this.setZoomLevelToPointersGroup();
+    });
 
+    this.startRideSubject.subscribe(event => {
+      console.log('start ride');
+      //remove event listener
+      this.rideStarted = true;
+      this.calculateRoute();
+    });
   }
 
   showRouteInfoPanel(route) {
@@ -76,17 +153,6 @@ export class HirebikePage implements OnInit {
         // Get the next maneuver.
         let maneuver = route.leg[i].maneuver[j];
         maneuverList.push(maneuver);
-
-        // var li = document.createElement('li'),
-        //   spanArrow = document.createElement('span'),
-        //   spanInstruction = document.createElement('span');
-
-        // spanArrow.className = 'arrow ' + maneuver.action;
-        // spanInstruction.innerHTML = maneuver.instruction;
-        // li.appendChild(spanArrow);
-        // li.appendChild(spanInstruction);
-
-        // nodeOL.appendChild(li);
       }
     }
 
@@ -94,6 +160,7 @@ export class HirebikePage implements OnInit {
   }
 
   getReservedBike() {
+    this.loadingService.showLoader();
     this.storage.get('token').then((token) => {
       const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
       //call reserved bike api
@@ -115,9 +182,16 @@ export class HirebikePage implements OnInit {
 
             //pass reserved bike subject here map
             this.gotReservedBikeSubject.next(resp.data);
-          }, (reservedBikeError) => console.log(reservedBikeError));
+            this.loadingService.hideLoader();
+          }, (reservedBikeError) => {
+            console.log(reservedBikeError);
+            this.loadingService.hideLoader();
+          });
         }
-      }, (bikeDetailsError) => console.log(bikeDetailsError));
+      }, (bikeDetailsError) => {
+        console.log(bikeDetailsError);
+        this.loadingService.hideLoader();
+      });
     });
   }
 
@@ -128,11 +202,13 @@ export class HirebikePage implements OnInit {
       let bikeApi = this.httpClient.get(url, { headers });
       bikeApi.subscribe((resp) => {
         console.log('my data: ', resp);
+        this.loadingService.hideLoader();
         this.toastService.showToast("Trip Started");
         this.isBikeHired = true;
       }, (error) => {
-        console.log(error)
-        this.toastService.showToast("This is ongoing Trip")
+        console.log(error);
+        this.loadingService.hideLoader();
+        this.toastService.showToast("This is ongoing Trip");
       });
     });
 
@@ -144,19 +220,307 @@ export class HirebikePage implements OnInit {
   }
 
   CancelTrip() {
+    this.loadingService.showLoader();
     this.storage.get('token').then((token) => {
       let url = 'http://193.196.52.237:8081/rent' + '?bikeId=' + this.bikeDetails.id;
       const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
       let bikeApi = this.httpClient.delete(url, { headers });
       bikeApi.subscribe((resp) => {
         console.log('my data: ', resp);
+        this.loadingService.hideLoader();
         this.toastService.showToast("Trip Ended!");
       }, (error) => {
-        console.log(error)
+        console.log(error);
+        this.loadingService.hideLoader();
         this.toastService.showToast("No Ongong Trip to End")
       });
     });
   }
+
+  ngOnDestroy() {
+    // needed if child gets re-created (eg on some model changes)
+    // note that subsequent subscriptions on the same subject will fail
+    // so the parent has to re-create parentSubject on changes
+    //this.startRideSubject.unsubscribe();
+  }
+
+  onSuccess(result) {
+    var route = result.response.route[0];
+    /*
+     * The styling of the route response on the map is entirely under the developer's control.
+     * A representitive styling can be found the full JS + HTML code of this example
+     * in the functions below:
+     */
+    this.addRouteShapeToMap(route);
+    this.addManueversToMap(route);
+    this.mapDataService.mapDataSubject.next(route);
+
+    //addWaypointsToPanel(route.waypoint);
+    //addManueversToPanel(route);
+    //addSummaryToPanel(route.summary);
+  }
+
+  /**
+     * This function will be called if a communication error occurs during the JSON-P request
+     * @param  {Object} error  The error message received.
+     */
+  onError(error) {
+    alert('Can\'t reach the remote server');
+  }
+
+  bubble;
+
+  /**
+   * Opens/Closes a infobubble
+   * @param  {H.geo.Point} position     The location on the map.
+   * @param  {String} text              The contents of the infobubble.
+   */
+  openBubble(position, text) {
+    if (!this.bubble) {
+      this.bubble = new H.ui.InfoBubble(
+        position,
+        // The FO property holds the province name.
+        { content: text });
+      this.ui.addBubble(this.bubble);
+    } else {
+      this.bubble.setPosition(position);
+      this.bubble.setContent(text);
+      this.bubble.open();
+    }
+  }
+
+  /**
+   * Creates a H.map.Polyline from the shape of the route and adds it to the map.
+   * @param {Object} route A route as received from the H.service.RoutingService
+   */
+  addRouteShapeToMap(route) {
+    var lineString = new H.geo.LineString(),
+      routeShape = route.shape,
+      polyline;
+
+    routeShape.forEach(function (point) {
+      var parts = point.split(',');
+      lineString.pushLatLngAlt(parts[0], parts[1]);
+    });
+
+    polyline = new H.map.Polyline(lineString, {
+      style: {
+        lineWidth: 4,
+        strokeColor: 'rgba(0, 128, 255, 0.7)'
+      }
+    });
+    // Add the polyline to the map
+    this.map.addObject(polyline);
+    // And zoom to its bounding rectangle
+    this.map.getViewModel().setLookAtData({
+      bounds: polyline.getBoundingBox()
+    });
+  }
+
+  /**
+  * Creates a series of H.map.Marker points from the route and adds them to the map.
+  * @param {Object} route  A route as received from the H.service.RoutingService
+  */
+  addManueversToMap(route) {
+    var svgMarkup = '<svg width="18" height="18" ' +
+      'xmlns="http://www.w3.org/2000/svg">' +
+      '<circle cx="8" cy="8" r="8" ' +
+      'fill="#1b468d" stroke="white" stroke-width="1"  />' +
+      '</svg>',
+      dotIcon = new H.map.Icon(svgMarkup, { anchor: { x: 8, y: 8 } }),
+      group = new H.map.Group()
+    var group = new H.map.Group();
+
+    // Add a marker for each maneuver
+    for (let i = 0; i < route.leg.length; i += 1) {
+      for (let j = 0; j < route.leg[i].maneuver.length; j += 1) {
+        // Get the next maneuver.
+        var maneuver = route.leg[i].maneuver[j];
+        // Add a marker to the maneuvers group
+        var marker = new H.map.Marker({
+          lat: maneuver.position.latitude,
+          lng: maneuver.position.longitude
+        },
+          { icon: dotIcon });
+        marker.instruction = maneuver.instruction;
+        group.addObject(marker);
+      }
+    }
+
+    group.addEventListener('tap', (evt) => {
+      this.map.setCenter(evt.target.getGeometry());
+      this.openBubble(
+        evt.target.getGeometry(), evt.target.instruction);
+    }, false);
+
+    // Add the maneuvers group to the map
+    this.map.addObject(group);
+  }
+
+  calculateRoute() {
+    var waypoint0 = this.bikePosition.lat + ',' + this.bikePosition.lng;
+    var waypoint1 = this.destinationPosition.lat + ',' + this.destinationPosition.lng;
+    var router = this.platform.getRoutingService(),
+      routeRequestParams = {
+        mode: 'fastest;bicycle',
+        representation: 'display',
+        routeattributes: 'waypoints,summary,shape,legs',
+        maneuverattributes: 'direction,action',
+        waypoint0: waypoint0, // Brandenburg Gate
+        waypoint1: waypoint1  // Friedrichstraße Railway Station
+      };
+
+    router.calculateRoute(
+      routeRequestParams,
+      this.onSuccess.bind(this),
+      this.onError.bind(this)
+    );
+  }
+
+
+  initializeMap() {
+    // Obtain the default map types from the platform object
+    this.defaultLayers = this.platform.createDefaultLayers();
+    this.map = new H.Map(
+      this.mapElement.nativeElement,
+      this.defaultLayers.raster.normal.map,
+      {
+        center: { lat: this.locationService.preiousUserPosition.lat, lng: this.locationService.preiousUserPosition.lng },
+        zoom: 17,
+        pixelRatio: window.devicePixelRatio || 1
+      }
+    );
+
+    var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
+    this.ui = H.ui.UI.createDefault(this.map, this.defaultLayers);
+    this.ui.removeControl("mapsettings");
+    // create custom map settings (icons on map)
+    var customMapSettings = new H.ui.MapSettingsControl({
+      baseLayers: [
+        {
+          label: "3D", layer: this.defaultLayers.vector.normal.map
+        }, {
+          label: "Normal", layer: this.defaultLayers.raster.normal.map
+        }, {
+          label: "Satellite", layer: this.defaultLayers.raster.satellite.map
+        }, {
+          label: "Terrain", layer: this.defaultLayers.raster.terrain.map
+        }
+      ],
+      layers: [
+        {
+          label: "layer.traffic", layer: this.defaultLayers.vector.normal.traffic
+        },
+        {
+          label: "layer.incidents", layer: this.defaultLayers.vector.normal.trafficincidents
+        }
+      ]
+    });
+    this.ui.addControl("custom-mapsettings", customMapSettings);
+    var mapSettings = this.ui.getControl('custom-mapsettings');
+    var zoom = this.ui.getControl('zoom');
+    mapSettings.setAlignment('top-right');
+    zoom.setAlignment('right-top');
+
+    this.map.getViewPort().setPadding(30, 30, 30, 30);
+
+    // Listen for base layer change event (eg. from satellite to 3D)
+    this.map.addEventListener('baselayerchange', (evt) => {
+      let mapConfig = this.map.getBaseLayer().getProvider().getStyleInternal().getConfig();
+      if (mapConfig === null || (mapConfig && mapConfig.sources && mapConfig.sources.omv)) {
+        this.map.getViewModel().setLookAtData({ tilt: 60 });
+      } else {
+        this.map.getViewModel().setLookAtData({ tilt: 0 });
+      }
+    });
+
+    // listen for map click event
+    this.map.addEventListener('tap', this.mapClickedEvent.bind(this));
+
+    if(!this.locationsGroup) {
+      this.locationsGroup = new H.map.Group();
+    }
+    this.map.addObject(this.locationsGroup);
+  }
+
+  mapClickedEvent(event) {
+    if(this.rideStarted) {
+      return;
+    }
+    //console.log(event.type, event.currentPointer.type);
+    var coord = this.map.screenToGeo(event.currentPointer.viewportX,
+      event.currentPointer.viewportY);
+    console.log(coord.lat + ', ' + coord.lng);
+
+    this.destinationPosition = { lat: coord.lat, lng: coord.lng };
+
+    if (this.destinationMarker) {
+      this.destinationMarker.setGeometry({ lat: coord.lat, lng: coord.lng })
+    } else {
+      let icon = new H.map.Icon('../../../assets/images/current_location.png');
+      // Create a marker using the previously instantiated icon:
+      this.destinationMarker = new H.map.Marker({ lat: coord.lat, lng: coord.lng }, { icon: icon });
+      // Add the marker to the map:
+      if(!this.locationsGroup) {
+        this.locationsGroup = new H.map.Group();
+      }
+      this.locationsGroup.addObjects([this.destinationMarker]);
+      this.setZoomLevelToPointersGroup();
+    }
+  }
+
+  //TODO change this logic
+  getCurrentPosition() {
+    if (!this.currentLocationMarker) {
+      this.showUserLocationOnMap(this.currentUserPosition.lat, this.currentUserPosition.lng);
+    }
+    this.map.setZoom(17);
+    this.map.setCenter({ lat: this.currentUserPosition.lat, lng: this.currentUserPosition.lng });
+  }
+
+  setZoomLevelToPointersGroup() {
+    this.map.getViewModel().setLookAtData({
+      bounds: this.locationsGroup.getBoundingBox()
+    });
+  }
+
+  showUserLocationOnMap(lat, lng) {
+    let svgMarkup = '<svg width="24" height="24" ' +
+      'xmlns="http://www.w3.org/2000/svg">' +
+      '<circle cx="10" cy="10" r="10" ' +
+      'fill="#007cff" stroke="white" stroke-width="2"  />' +
+      '</svg>';
+    let icon = new H.map.Icon(svgMarkup);
+    //let icon = new H.map.Icon('../../../assets/images/current_location.png');
+    // Create a marker using the previously instantiated icon:
+    this.currentLocationMarker = new H.map.Marker({ lat: lat, lng: lng }, { icon: icon });
+    // Add the marker to the map:
+    if(!this.locationsGroup) {
+      this.locationsGroup = new H.map.Group();
+    }
+    this.locationsGroup.addObjects([this.currentLocationMarker]);
+    this.setZoomLevelToPointersGroup();
+
+    //this.map.addObject(marker);
+    //this.map.setCenter({ lat: lat, lng: lng });
+  }
+
+  addMarker(lat, lng, img) {
+    var icon = new H.map.Icon(img);
+    // Create a marker using the previously instantiated icon:
+    var marker = new H.map.Marker({ lat: lat, lng: lng }, { icon: icon });
+    // Add the marker to the map:
+    //this.map.addObject(marker);
+    if(!this.locationsGroup) {
+      this.locationsGroup = new H.map.Group();
+    }
+    this.locationsGroup.addObjects([marker]);
+  }
+
+  enable3DMaps() {
+    this.map.setBaseLayer(this.defaultLayers.vector.normal.map);
+  }
+
   reverseGeocode(platform, lat, lng) {
     var prox = lat + ',' + lng + ',56';
     var geocoder = platform.getGeocodingService(),
@@ -168,14 +532,11 @@ export class HirebikePage implements OnInit {
       };
 
     geocoder.reverseGeocode(parameters, result => {
-      console.log(result);
       var streets = result.Response.View[0].Result[0].Location.Address.Street;
       var houseNumber = result.Response.View[0].Result[0].Location.Address.HouseNumber;
       var zipcode = result.Response.View[0].Result[0].Location.Address.PostalCode;
 
-      this.address = streets;
-
-
+      return streets + houseNumber + zipcode;
     }, (error) => {
       alert(error);
     });

src/app/home/home.page.ts

-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef, OnDestroy } from '@angular/core';
 import { Geolocation } from '@ionic-native/geolocation/ngx';
 import { RestService } from '../rest.service';
 import { Observable } from 'rxjs';
@@ -6,6 +6,8 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Storage } from '@ionic/storage';
 import { ToastService } from '../services/toast.service';
 import { Router } from '@angular/router';
+import { LocationService } from '../services/location.service';
+import { LoadingService } from '../services/loading.service';
 
 declare var H: any;
 
@@ -15,12 +17,12 @@ declare var H: any;
   styleUrls: ['home.page.scss'],
 })
 
-export class HomePage implements OnInit {
+export class HomePage implements OnInit, OnDestroy {
   private platform: any;
   private map: any;
   private defaultLayers: any;
   private locationsGroup: any;
-  private currentUserPosition = {lat: 48.783480, lng: 9.180319};
+  private currentUserPosition = { lat: 48.783480, lng: 9.180319 };
 
   bikes = [];
   bikeApi: Observable<any>;
@@ -39,35 +41,43 @@ export class HomePage implements OnInit {
     public restService: RestService,
     public httpClient: HttpClient,
     private storage: Storage,
-    private toastService: ToastService) {
+    private toastService: ToastService,
+    public locationService: LocationService,
+    public loadingService: LoadingService) {
 
     this.platform = new H.service.Platform({
       'apikey': 'tiVTgBnPbgV1spie5U2MSy-obhD9r2sGiOCbBzFY2_k'
     });
-
-    let watch = this.geolocation.watchPosition({ enableHighAccuracy: true, maximumAge: 10000 });
-    watch.subscribe((position) => {
-      console.log(position.coords.latitude);
-      console.log(position.coords.longitude);
-      this.currentUserPosition.lat = position.coords.latitude;
-      this.currentUserPosition.lng = position.coords.longitude;
-      this.currentLocationMarker.setGeometry( {lat:position.coords.latitude, lng:position.coords.longitude})
-    }, (errorObj) => {
-      console.log(errorObj.code + ": " + errorObj.message);
-    });
   }
 
   ngOnInit() {
   }
 
   ngAfterViewInit() {
-    this.initializeMap();
     window.addEventListener('resize', () => this.map.getViewPort().resize());
-    setTimeout(() => {
-      window.dispatchEvent(new Event('resize'));  
-    },100);
-    this.getUserLocation();
+  }
+
+  ionViewWillEnter() {
+    this.currentUserPosition.lat = this.locationService.currentUserPosition.lat;
+    this.currentUserPosition.lng = this.locationService.currentUserPosition.lng;
+    this.initializeMap();
+    if (this.currentLocationMarker) {
+      this.currentLocationMarker.setGeometry({ lat: this.currentUserPosition.lat, lng: this.currentUserPosition.lng })
+    } else {
+      this.showUserLocationOnMap(this.currentUserPosition.lat, this.currentUserPosition.lng);
+    }
     this.getBikesList();
+
+    this.locationService.liveLocationSubject.subscribe((position) => {
+      console.log('got location inside home subscription');
+      this.currentUserPosition.lat = position.lat;
+      this.currentUserPosition.lng = position.lng;
+      if (this.currentLocationMarker) {
+        this.currentLocationMarker.setGeometry({ lat: this.currentUserPosition.lat, lng: this.currentUserPosition.lng })
+      } else {
+        this.showUserLocationOnMap(this.currentUserPosition.lat, this.currentUserPosition.lng);
+      }
+    });
   }
 
   initializeMap() {
@@ -77,6 +87,7 @@ export class HomePage implements OnInit {
       this.mapElement.nativeElement,
       this.defaultLayers.raster.normal.map,
       {
+        center: { lat: this.locationService.preiousUserPosition.lat, lng: this.locationService.preiousUserPosition.lng },
         zoom: 17,
         pixelRatio: window.devicePixelRatio || 1
       }
@@ -126,7 +137,7 @@ export class HomePage implements OnInit {
     });
 
     // listen for map click event
-    this.map.addEventListener('tap', (event) =>{
+    this.map.addEventListener('tap', (event) => {
       console.log(event.type, event.currentPointer.type);
     });
 
@@ -134,34 +145,22 @@ export class HomePage implements OnInit {
   }
 
   getBikesList() {
-    this.geolocation.getCurrentPosition({
-      maximumAge: 1000, timeout: 4000,
-      enableHighAccuracy: true
-    }).then((resp) => {
-      let lat = resp.coords.latitude;
-      let lng = resp.coords.longitude;
-
-      this.currentUserPosition.lat = resp.coords.latitude;
-      this.currentUserPosition.lng = resp.coords.longitude;
-
-      this.storage.get('token').then((token) => {
-        let url = 'http://193.196.52.237:8081/bikes' + '?lat=' + lat + '&lng=' + lng;
-        const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
-        this.bikeApi = this.httpClient.get(url, { headers });
-        this.bikeApi.subscribe((resp) => {
-          console.log("bikes response", resp);
-          this.bikes = resp;
-          for (let i = 0; i < this.bikes.length; i++) {
-            this.bikes[i].distance = this.bikes[i].distance.toFixed(2);;
-            this.reverseGeocode(this.platform, this.bikes[i].lat, this.bikes[i].lon, i);
-          }
-          this.showBikesOnMap();
-        }, (error) => console.log(error));
-      });
-    }, er => {
-      //alert('Can not retrieve location');
-    }).catch((error) => {
-      //alert('Error getting location - ' + JSON.stringify(error));
+    this.loadingService.showLoader();
+    this.storage.get('token').then((token) => {
+      let url = 'http://193.196.52.237:8081/bikes' + '?lat=' + this.currentUserPosition.lat + '&lng=' + this.currentUserPosition.lng;
+      const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
+      this.bikeApi = this.httpClient.get(url, { headers });
+      this.bikeApi.subscribe((resp) => {
+        console.log("bikes response", resp);
+        this.bikes = resp;
+        for (let i = 0; i < this.bikes.length; i++) {
+          this.bikes[i].distance = this.bikes[i].distance.toFixed(2);;
+          this.reverseGeocode(this.platform, this.bikes[i].lat, this.bikes[i].lon, i);
+        }
+        this.showBikesOnMap();
+        this.loadingService.hideLoader();
+      }, (error) => {console.log(error)
+        this.loadingService.hideLoader();});
     });
   }
 
@@ -181,7 +180,7 @@ export class HomePage implements OnInit {
       }
     }
 
-    this.map.addObject(this.locationsGroup);
+    //this.map.addObject(this.locationsGroup);
     this.setZoomLevelToPointersGroup();
   }
 
@@ -197,39 +196,19 @@ export class HomePage implements OnInit {
     });
   }
 
-  getUserLocation() {
-    this.geolocation.getCurrentPosition(
-      {
-        maximumAge: 1000, timeout: 4000,
-        enableHighAccuracy: true
-      }
-    ).then((resp) => {
-      let lat = resp.coords.latitude;
-      let lng = resp.coords.longitude;
-      this.currentUserPosition.lat = resp.coords.latitude;
-      this.currentUserPosition.lng = resp.coords.longitude;
-      this.showUserLocationOnMap(lat, lng);
-    }, er => {
-      //alert('Can not retrieve Location')
-      this.showUserLocationOnMap(this.currentUserPosition.lat, this.currentUserPosition.lng);
-    }).catch((error) => {
-      this.showUserLocationOnMap(this.currentUserPosition.lat, this.currentUserPosition.lng);
-      //alert('Error getting location - ' + JSON.stringify(error))
-    });
-  }
-
   showUserLocationOnMap(lat, lng) {
     let svgMarkup = '<svg width="24" height="24" ' +
-    'xmlns="http://www.w3.org/2000/svg">' +
-    '<circle cx="10" cy="10" r="10" ' +
+      'xmlns="http://www.w3.org/2000/svg">' +
+      '<circle cx="10" cy="10" r="10" ' +
       'fill="#007cff" stroke="white" stroke-width="2"  />' +
-    '</svg>';
+      '</svg>';
     let icon = new H.map.Icon(svgMarkup);
     //let icon = new H.map.Icon('../../../assets/images/current_location.png');
     // Create a marker using the previously instantiated icon:
     this.currentLocationMarker = new H.map.Marker({ lat: lat, lng: lng }, { icon: icon });
     // Add the marker to the map:
     this.locationsGroup.addObjects([this.currentLocationMarker]);
+    this.map.addObject(this.locationsGroup);
     this.setZoomLevelToPointersGroup();
 
     //this.map.addObject(marker);
@@ -281,6 +260,7 @@ export class HomePage implements OnInit {
 
   reserveBike() {
     //this.selectedBike=bikeS;
+    this.loadingService.showLoader();
     this.storage.get('token').then((token) => {
       let url = 'http://193.196.52.237:8081/reservation' + '?bikeId=' + this.selectedBike.id;
       const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
@@ -290,11 +270,17 @@ export class HomePage implements OnInit {
         this.isBikeReserved = true;
         this.toastService.showToast("Reservation Successful!");
         this.router.navigateByUrl('/myreservation');
+        this.loadingService.hideLoader();
       }, (error) => {
-        console.log(error)
-        this.toastService.showToast("Only one bike may be reserved or rented at a time")
+        console.log(error);
+        this.loadingService.hideLoader();
+        this.toastService.showToast("Only one bike may be reserved or rented at a time");
       });
     });
   }
 
+  ngOnDestroy(){
+    //this.locationService.liveLocationSubject.unsubscribe();
+  }
+
 }

src/app/myreservation/myreservation.page.html

@@ -10,16 +10,21 @@
 </ion-header>
 
 <ion-content>
-  <ion-card *ngIf="noReservation">
+  <ion-card *ngIf="!isBikeReserved">
     <ion-card-content>
       No reservation found
     </ion-card-content>
   </ion-card>
-  <div #mapElement style="width: 100%; height: 100%" id="mapContainer" *ngIf="!noReservation"></div>
+  <div #mapElement style="width: 100%; height: 100%" id="mapContainer" *ngIf="isBikeReserved"></div>
+  <ion-fab class="get-position" vertical="bottom" horizontal="end" (click)="getCurrentPosition()" slot="fixed">
+    <ion-fab-button>
+      <ion-icon name="locate"></ion-icon>
+    </ion-fab-button>
+  </ion-fab>
 </ion-content>
 
 <ion-footer>
-  <div class="bike-details-container" *ngIf="!noReservation">
+  <div class="bike-details-container" *ngIf="isBikeReserved">
     <div class="inner">
       <div class="button-container">
         <ion-grid>

src/app/myreservation/myreservation.page.ts

@@ -7,6 +7,8 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Storage } from '@ionic/storage';
 import { ToastService } from '../services/toast.service';
 import { Router } from '@angular/router';
+import { LocationService } from '../services/location.service';
+import { LoadingService } from '../services/loading.service';
 
 declare var H: any;
 
@@ -20,14 +22,18 @@ export class MyreservationPage implements OnInit {
   private map: any;
   // Get an instance of the routing service:
   private mapRouter: any;
+  private ui: any;
+  private defaultLayers: any;
 
   reservedBike: any = {};
   bikeDetails: any = {};
   isBikeHired = false;
-  address="sample";
-  noReservation = true;
+  address = "sample";
+  isBikeReserved = true;
 
-  private currentLocation = { lat: 0, lng: 0 };
+  private currentUserPosition = { lat: 48.783480, lng: 9.180319 };
+
+  public currentLocationMarker: any;
 
   // Create the parameters for the routing request:
   private routingParameters = {
@@ -50,7 +56,9 @@ export class MyreservationPage implements OnInit {
     public httpClient: HttpClient,
     private storage: Storage,
     private toastService: ToastService,
-    private router: Router) {
+    private router: Router,
+    public locationService: LocationService,
+    public loadingService: LoadingService) {
     this.platform = new H.service.Platform({
       'apikey': 'tiVTgBnPbgV1spie5U2MSy-obhD9r2sGiOCbBzFY2_k'
     });
@@ -58,14 +66,72 @@ export class MyreservationPage implements OnInit {
   }
 
   ngOnInit() {
-    this.getReservedBike();
+
   }
 
   ngAfterViewInit() {
 
   }
 
+  ionViewWillEnter() {
+    this.currentUserPosition.lat = this.locationService.currentUserPosition.lat;
+    this.currentUserPosition.lng = this.locationService.currentUserPosition.lng;
+    
+    this.loadmap();
+    
+    if (this.currentLocationMarker) {
+      this.currentLocationMarker.setGeometry({ lat: this.currentUserPosition.lat, lng: this.currentUserPosition.lng })
+    } else {
+      this.showUserLocationOnMap(this.currentUserPosition.lat, this.currentUserPosition.lng);
+    }
+
+    this.getReservedBike();
+
+    this.locationService.liveLocationSubject.subscribe((position) => {
+      console.log('got location inside home subscription');
+      this.currentUserPosition.lat = position.lat;
+      this.currentUserPosition.lng = position.lng;
+      if (this.currentLocationMarker) {
+        this.currentLocationMarker.setGeometry({ lat: this.currentUserPosition.lat, lng: this.currentUserPosition.lng })
+      } else {
+        this.showUserLocationOnMap(this.currentUserPosition.lat, this.currentUserPosition.lng);
+      }
+    });
+  }
+
+  showUserLocationOnMap(lat, lng) {
+    let svgMarkup = '<svg width="24" height="24" ' +
+      'xmlns="http://www.w3.org/2000/svg">' +
+      '<circle cx="10" cy="10" r="10" ' +
+      'fill="#007cff" stroke="white" stroke-width="2"  />' +
+      '</svg>';
+    let icon = new H.map.Icon(svgMarkup);
+    //let icon = new H.map.Icon('../../../assets/images/current_location.png');
+    // Create a marker using the previously instantiated icon:
+    this.currentLocationMarker = new H.map.Marker({ lat: lat, lng: lng }, { icon: icon });
+    // Add the marker to the map:
+    this.map.addObject(this.currentLocationMarker);
+
+    this.map.setCenter({ lat: lat, lng: lng });
+  }
+
+  addBikeOnMap() {
+    var img = ['../../../assets/images/100_percent.png', '../../../assets/images/75_percent.png', '../../../assets/images/50_percent.png', '../../../assets/images/25_percent.png', '../../../assets/images/0_percent.png'];
+    if (this.bikeDetails.batteryPercentage < 100 && this.bikeDetails.batteryPercentage >= 75) {
+      this.addMarker(Number(this.bikeDetails.lat), Number(this.bikeDetails.lon), img[0]);
+    }
+    else if (this.bikeDetails.batteryPercentage < 75 && this.bikeDetails.batteryPercentage >= 50) {
+      this.addMarker(Number(this.bikeDetails.lat), Number(this.bikeDetails.lon), img[1]);
+    }
+    else if (this.bikeDetails.batteryPercentage < 50 && this.bikeDetails.batteryPercentage >= 25) {
+      this.addMarker(Number(this.bikeDetails.lat), Number(this.bikeDetails.lon), img[2]);
+    } else if (this.bikeDetails.batteryPercentage < 25 && this.bikeDetails.batteryPercentage >= 0) {
+      this.addMarker(Number(this.bikeDetails.lat), Number(this.bikeDetails.lon), img[3]);
+    }
+  }
+
   getReservedBike() {
+    this.loadingService.showLoader();
     this.storage.get('token').then((token) => {
       const headers = new HttpHeaders().set("Authorization", "Bearer " + token);
       //call reserved bike api
@@ -81,18 +147,32 @@ export class MyreservationPage implements OnInit {
           let bikeDetailsApi = this.httpClient.get(bikeDetailsUrl, { headers });
           bikeDetailsApi.subscribe((resp: any) => {
             console.log('Bike Details', resp);
+            this.loadingService.hideLoader();
             this.bikeDetails = resp.data;
             this.reverseGeocode(this.platform, this.bikeDetails.lat, this.bikeDetails.lon);
-            this.noReservation = false;
-
-            // display map
-            setTimeout(() => {
-              this.loadmap();
-            }, 1000);
-            window.addEventListener('resize', () => this.map.getViewPort().resize());
-          }, (reservedBikeError) => console.log(reservedBikeError));
+            this.isBikeReserved = true;
+            this.addBikeOnMap();
+
+            // set routing params
+            this.routingParameters.waypoint1 = 'geo!' + this.bikeDetails.lat + ',' + this.bikeDetails.lon;
+            this.routingParameters.waypoint0 = 'geo!' + this.currentUserPosition.lat + ',' + this.currentUserPosition.lng;
+
+            // show route on map
+            this.mapRouter.calculateRoute(this.routingParameters, this.onResult.bind(this),
+              (error) => {
+                console.log(error.message);
+              });
+          }, (reservedBikeError) => {
+            this.loadingService.hideLoader();
+            console.log(reservedBikeError);
+            this.isBikeReserved = false;
+          });
         }
-      }, (bikeDetailsError) => console.log(bikeDetailsError));
+      }, (bikeDetailsError) => {
+        this.loadingService.hideLoader();
+        console.log(bikeDetailsError)
+        this.isBikeReserved = false;
+      });
     });
   }
 
@@ -110,88 +190,58 @@ export class MyreservationPage implements OnInit {
   }
 
   loadmap() {
-    var defaultLayers = this.platform.createDefaultLayers();
+    this.defaultLayers = this.platform.createDefaultLayers();
     this.map = new H.Map(
       this.mapElement.nativeElement,
-      defaultLayers.raster.normal.map,
+      this.defaultLayers.raster.normal.map,
       {
+        center: { lat: this.locationService.preiousUserPosition.lat, lng: this.locationService.preiousUserPosition.lng },
         zoom: 17,
         pixelRatio: window.devicePixelRatio || 1
       }
     );
 
     var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
-    var ui = H.ui.UI.createDefault(this.map, defaultLayers);
-    ui.removeControl("mapsettings");
+    this.ui = H.ui.UI.createDefault(this.map, this.defaultLayers);
+    this.ui.removeControl("mapsettings");
     // create custom one
-    var ms = new H.ui.MapSettingsControl({
+    var customMapSettings = new H.ui.MapSettingsControl({
       baseLayers: [{
-        label: "3D", layer: defaultLayers.vector.normal.map
+        label: "3D", layer: this.defaultLayers.vector.normal.map
       }, {
-        label: "Normal", layer: defaultLayers.raster.normal.map
+        label: "Normal", layer: this.defaultLayers.raster.normal.map
       }, {
-        label: "Satellite", layer: defaultLayers.raster.satellite.map
+        label: "Satellite", layer: this.defaultLayers.raster.satellite.map
       }, {
-        label: "Terrain", layer: defaultLayers.raster.terrain.map
+        label: "Terrain", layer: this.defaultLayers.raster.terrain.map
       }
       ],
       layers: [{
-        label: "layer.traffic", layer: defaultLayers.vector.normal.traffic
+        label: "layer.traffic", layer: this.defaultLayers.vector.normal.traffic
       },
       {
-        label: "layer.incidents", layer: defaultLayers.vector.normal.trafficincidents
+        label: "layer.incidents", layer: this.defaultLayers.vector.normal.trafficincidents
       }
       ]
     });
-    ui.addControl("customized", ms);
-    var mapSettings = ui.getControl('customized');
-    var zoom = ui.getControl('zoom');
+    this.ui.addControl("custom-mapsettings", customMapSettings);
+    var mapSettings = this.ui.getControl('custom-mapsettings');
+    var zoom = this.ui.getControl('zoom');
     mapSettings.setAlignment('top-right');
-    zoom.setAlignment('left-top');
+    zoom.setAlignment('right-top');
 
-    //get user location
-    this.getLocation(this.map);
+    this.map.getViewPort().setPadding(30, 30, 30, 30);
 
-    var img = ['../../../assets/images/100_percent.png', '../../../assets/images/75_percent.png', '../../../assets/images/50_percent.png', '../../../assets/images/25_percent.png', '../../../assets/images/0_percent.png'];
-    if (this.bikeDetails.batteryPercentage < 100 && this.bikeDetails.batteryPercentage >= 75) {
-      this.addMarker(Number(this.bikeDetails.lat), Number(this.bikeDetails.lon), img[0]);
-    }
-    else if (this.bikeDetails.batteryPercentage < 75 && this.bikeDetails.batteryPercentage >= 50) {
-      this.addMarker(Number(this.bikeDetails.lat), Number(this.bikeDetails.lon), img[1]);
-    }
-    else if (this.bikeDetails.batteryPercentage < 50 && this.bikeDetails.batteryPercentage >= 25) {
-      this.addMarker(Number(this.bikeDetails.lat), Number(this.bikeDetails.lon), img[2]);
-    } else if (this.bikeDetails.batteryPercentage < 25 && this.bikeDetails.batteryPercentage >= 0) {
-      this.addMarker(Number(this.bikeDetails.lat), Number(this.bikeDetails.lon), img[3]);
-    }
+    this.map.getViewPort().setPadding(30, 30, 30, 30);
   }
 
-  getLocation(map) {
-    this.geolocation.getCurrentPosition(
-      {
-        maximumAge: 1000, timeout: 5000,
-        enableHighAccuracy: true
-      }
-    ).then((resp) => {
-      let lat = resp.coords.latitude
-      let lng = resp.coords.longitude
-      this.currentLocation.lat = resp.coords.latitude;
-      this.currentLocation.lng = resp.coords.longitude;
-      this.moveMapToGiven(map, lat, lng);
-      // set routing params
-      this.routingParameters.waypoint1 = 'geo!' + this.bikeDetails.lat + ',' + this.bikeDetails.lon;
-      this.routingParameters.waypoint0 = 'geo!' + this.currentLocation.lat + ',' + this.currentLocation.lng;
-
-      // show route on map
-      this.mapRouter.calculateRoute(this.routingParameters, this.onResult.bind(this),
-        (error) => {
-          alert(error.message);
-        });
-    }, er => {
-      console.log('Can not retrieve Location');
-    }).catch((error) => {
-      console.log('Error getting location - ' + JSON.stringify(error));
-    });
+  //TODO change this logic
+  getCurrentPosition() {
+    if (!this.currentLocationMarker) {
+      this.showUserLocationOnMap(this.currentUserPosition.lat, this.currentUserPosition.lng);
+    }
+    this.map.setZoom(17);
+    this.map.setCenter({ lat: this.currentUserPosition.lat, lng: this.currentUserPosition.lng });
   }
 
   moveMapToGiven(map, lat, lng) {
@@ -225,9 +275,9 @@ export class MyreservationPage implements OnInit {
       var streets = result.Response.View[0].Result[0].Location.Address.Street;
       var houseNumber = result.Response.View[0].Result[0].Location.Address.HouseNumber;
       var zipcode = result.Response.View[0].Result[0].Location.Address.PostalCode;
-     
+
       this.address = streets;
-     
+
 
     }, (error) => {
       alert(error);

src/app/services/loading.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { LoadingService } from './loading.service';
+
+describe('LoadingService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: LoadingService = TestBed.get(LoadingService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/loading.service.ts

+import { Injectable } from '@angular/core';
+import { LoadingController } from '@ionic/angular';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LoadingService {
+  loaderToShow: any;
+
+  constructor(
+    public loadingController: LoadingController
+  ) {
+  }
+
+  showLoader(message = 'loading...') {
+    this.loaderToShow = this.loadingController.create({
+      message: message
+    }).then((res) => {
+      res.present();
+
+      res.onDidDismiss().then((dis) => {
+        console.log('Loading dismissed!');
+      });
+    });
+  }
+
+  hideLoader() {
+    this.loadingController.dismiss();
+  }
+}

src/app/services/location.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { LocationService } from './location.service';
+
+describe('LocationService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: LocationService = TestBed.get(LocationService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/services/location.service.ts

+import { Injectable } from '@angular/core';
+import { Geolocation } from '@ionic-native/geolocation/ngx';
+import { Subject } from 'rxjs';
+@Injectable({
+  providedIn: 'root'
+})
+export class LocationService {
+  public preiousUserPosition = { lat: 48.783480, lng: 9.180319 };
+  public currentUserPosition = { lat: 48.783480, lng: 9.180319 };
+
+  liveLocationSubject = new Subject<any>(); //Decalring new RxJs Subject
+
+  constructor(private geolocation: Geolocation) {
+    let watch = this.geolocation.watchPosition({ enableHighAccuracy: true, maximumAge: 10000 });
+    watch.subscribe((position) => {
+      console.log('IN WATCHER')
+      console.log('lat'+ position.coords.latitude);
+      console.log('lng'+ position.coords.longitude);
+      this.currentUserPosition.lat = position.coords.latitude;
+      this.currentUserPosition.lng = position.coords.longitude;
+      this.preiousUserPosition.lat = position.coords.latitude;
+      this.preiousUserPosition.lng = position.coords.longitude;
+      this.getUserLiveLocation(this.currentUserPosition);
+    }, (errorObj) => {
+      console.log('error getting live location, setting to previous location');
+      this.getUserLiveLocation(this.preiousUserPosition);
+    });
+  }
+
+  getUserLocation(): Promise<any> {
+    return new Promise((resolve, reject) => {
+
+      this.geolocation.getCurrentPosition().then((resp) => {
+        let lat = resp.coords.latitude;
+        let lng = resp.coords.longitude;
+        this.currentUserPosition.lat = resp.coords.latitude;
+        this.currentUserPosition.lng = resp.coords.longitude;
+        this.preiousUserPosition.lat = resp.coords.latitude;
+        this.preiousUserPosition.lng = resp.coords.longitude;
+        resolve(this.currentUserPosition);
+      }, er => {
+        console.log('error getting location setting to previous location');
+        resolve(this.preiousUserPosition);
+      }).catch((error) => {
+        console.log('error getting location setting to previous location');
+        resolve(this.preiousUserPosition);
+      });
+    });
+  }
+
+  getUserLiveLocation(location) {
+    this.liveLocationSubject.next(location);
+  }
+}

src/assets/js/mapsjs-mapevents.js

+
+/**
+ * The code below uses open source software. Please visit the URL below for an overview of the licenses:
+ * http://js.api.here.com/v3/3.1.8.1/HERE_NOTICE
+ */
+
+H.util.eval("function lq(a){var b=a.ownerDocument;b=b.documentElement||b.body.parentNode||b.body;try{var c=a.getBoundingClientRect()}catch(d){c={top:0,right:0,bottom:0,left:0,height:0,width:0}}return{x:c.left+(\"number\"===typeof window.pageXOffset?window.pageXOffset:b.scrollLeft),y:c.top+(\"number\"===typeof window.pageYOffset?window.pageYOffset:b.scrollTop)}}var mq=/Edge\\/\\d+/.test(navigator.appVersion),nq=/(A|a)ndroid/.test(navigator.appVersion),oq=Function(\"return this\")();function pq(a,b,c,d,e,f,g){pq.l.constructor.call(this,a);this.pointers=b;this.changedPointers=c;this.targetPointers=d;this.currentPointer=e;this.originalEvent=g;this.target=f}w(pq,Ec);u(\"H.mapevents.Event\",pq);function qq(a,b,c,d,e,f){if(isNaN(a))throw Error(\"x needs to be a number\");if(isNaN(b))throw Error(\"y needs to be a number\");if(isNaN(c))throw Error(\"pointer must have an id\");this.viewportX=a;this.viewportY=b;this.target=null;this.id=c;this.type=d;this.dragTarget=null;this.a=this.button=Lb(e)?e:-1;this.buttons=Lb(f)?f:0}u(\"H.mapevents.Pointer\",qq);\nfunction rq(a,b,c){if(isNaN(b))throw Error(\"x needs to be a number\");if(isNaN(c))throw Error(\"y needs to be a number\");a.viewportX=b;a.viewportY=c}qq.prototype.tm=function(){return this.a};qq.prototype.getLastChangedButton=qq.prototype.tm;function sq(a,b){a.a=b;a.buttons|=qq.prototype.b[+b]||0}function tq(a,b){a.a=b;a.buttons&=~(qq.prototype.b[+b]||0)}qq.prototype.b=[1,4,2];var uq={NONE:-1,LEFT:0,MIDDLE:1,RIGHT:2};qq.Button=uq;function vq(a){this.a=a instanceof Array?a.slice(0):[]}n=vq.prototype;n.clear=function(){this.a.splice(0,this.a.length)};n.length=function(){return this.a.length};n.indexOf=function(a){for(var b=this.a.length;b--;)if(this.a[b].id===a)return b;return-1};function wq(a,b){b=a.indexOf(b);return-1!==b?a.a[b]:null}n.remove=function(a){a=this.indexOf(a);return-1!==a?this.a.splice(a,1)[0]:null};function xq(a,b){for(var c=a.a.length,d=[];c--;)a.a[c].type!==b&&d.push(a.a[c]);a.a=d}\nfunction yq(a,b){for(var c=a.a.length;c--;)if(a.a[c].dragTarget===b)return!0;return!1}n.push=function(a){if(a instanceof qq)return this.a.push(a);throw Error(\"list needs a pointer\");};n.ab=function(){return this.a};n.clone=function(){return new vq(this.a)};function zq(a,b,c){c=c||{};if(!(a instanceof S))throw Error(\"events: map instance required\");if(!(b instanceof Array))throw Error(\"events: map array required\");Ac.call(this);this.Og=c.Og||300;this.gj=c.gj||50;this.Yk=c.Yk||50;this.Zk=c.Zk||500;this.Bh=c.Bh||900;this.Uj=c.Uj||50;this.map=a;this.u=this.map.Ba;this.i=this.u.element;this.D=b;this.a=new vq;this.b=new vq;this.g={};this.c=null;this.o=!0;this.W={};this.m={};this.j=null;this.ue=A(this.ue,this);this.B={pointerdown:this.Hl,pointermove:this.Il,\npointerup:this.Jl,pointercancel:this.Gl};Aq(this)}w(zq,Ac);function Aq(a,b){var c,d=a.D.length;for(c=0;c<d;c++){var e=a.D[c];var f=e.listener;\"function\"===typeof f&&(b?(e.target||a.i).removeEventListener(e.Sa,f):(e.target||a.i).addEventListener(e.Sa,f))}}function Bq(a,b,c){var d;if(\"function\"===typeof a.B[b]){\"pointermove\"!==b&&(a.o=!0);var e=0;for(d=a.b.length();e<d;e++){var f=a.b.a[e];a.i.contains(c.target)?Cq(a,f,a.mj.bind(a,c,b,f)):a.mj(c,b,f,null)}}a.b.clear()}n=zq.prototype;\nn.mj=function(a,b,c,d){Dq(c.id,this.W);this.B[b].call(this,c,d,a)};function Cq(a,b,c){if(a.c===b)c(b.target);else{var d=a.u;var e=b.viewportX;b=b.viewportY;if(0>e||0>b||e>=d.width||b>=d.height)c(z);else{var f=a.map;f.Qd(e,b,function(a){c(a||f)})}}}\nn.Jl=function(a,b,c){a.target=b;Eq(this,a,c);Fq(this,b,\"pointerup\",c,a);\"mouse\"!==a.type&&Fq(this,b,\"pointerleave\",c,a);b=this.g[a.id];var d={x:a.viewportX,y:a.viewportY},e=c.timeStamp,f=a.target,g=this.j;b&&b.target===f&&b.Gg.bb(d)<this.Yk&&e-b.Di<this.Zk?(Fq(this,f,\"tap\",c,a),g&&g.target===f&&e-g.Di<this.Og?g.Gg.bb({x:a.viewportX,y:a.viewportY})<this.gj&&(Fq(this,f,\"dbltap\",c,a),this.j=null):this.j={target:f,Gg:new H(a.viewportX,a.viewportY),Di:c.timeStamp}):this.j=null;this.g={};Dq(a.id,this.m)};\nfunction Eq(a,b,c){b===a.c&&(Fq(a,b.dragTarget,\"dragend\",c,b),a.c=null,Dq(b.id,a.W));b.dragTarget=null}n.ue=function(a,b){var c=this;Fq(this,a.dragTarget,\"drag\",b,a);Dq(a.id,this.W);this.W[a.id]=setTimeout(function(){c.ue(a,b)},150)};function Dq(a,b){b[a]&&(clearTimeout(b[a]),delete b[a])}\nfunction Gq(a,b,c){var d=b.target,e=new H(b.viewportX,b.viewportY),f=b.id;Dq(f,a.m);a.m[f]=setTimeout(function(){d&&d===b.target&&e.bb({x:b.viewportX,y:b.viewportY})<a.Uj&&(Fq(a,d,\"longpress\",c,b),delete a.g[b.id])},a.Bh)}\nn.Il=function(a,b,c){var d=a.dragTarget,e=a.id;var f=a.target;a.target=b;f!==b&&(Fq(this,f,\"pointerleave\",c,a),Fq(this,b,\"pointerenter\",c,a));d?this.c?this.ue(a,c):this.o?this.o=!1:(this.c=a,Fq(this,d,\"dragstart\",c,a),this.ue(a,c),delete this.g[e],this.o=!0):(!this.c||this.c&&this.c.dragTarget!==b&&this.c.dragTarget!==this.map)&&Fq(this,b,\"pointermove\",c,a)};\nn.Hl=function(a,b,c){var d=!(/^(?:mouse|pen)$/.test(a.type)&&0!==c.button);if(b){a.target=b;this.g[a.id]={Gg:new H(a.viewportX,a.viewportY),target:a.target,Di:c.timeStamp};\"mouse\"!==a.type&&Fq(this,b,\"pointerenter\",c,a);var e=Fq(this,b,\"pointerdown\",c,a);!this.c&&d&&(b.draggable&&!yq(this.a,b)?a.dragTarget=b:!this.map.draggable||e.defaultPrevented||yq(this.a,this.map)||(a.dragTarget=this.map));Gq(this,a,c)}};\nn.Gl=function(a,b,c){a.target=null;b?(Fq(this,b,\"pointerleave\",c,a),Fq(this,b,\"pointercancel\",c,a)):Fq(this,this.map,\"pointercancel\",c,a);Eq(this,a,c);this.g={};Dq(a.id,this.m)};function Fq(a,b,c,d,e){if(b&&\"function\"===typeof b.dispatchEvent){var f=pq;var g=a.a.ab(),h=a.b.ab();a=a.a;var k,l=a.a.length,m=[];for(k=0;k<l;k++)a.a[k].target===b&&m.push(a.a[k]);f=new f(c,g,h,m,e,b,d);e.button=/^(?:longpress|(?:dbl)?tap|pointer(?:down|up))$/.test(c)?e.a:uq.NONE;b.dispatchEvent(f)}return f}\nn.s=function(){Aq(this,!0);this.a.clear();this.b.clear();var a=this.W,b;for(b in a)Dq(b,a);a=this.m;for(var c in a)Dq(c,a);this.c=this.g=this.j=this.map=this.b=this.a=this.D=this.O=null;Ac.prototype.s.call(this)};function Hq(a){this.f=A(this.f,this);zq.call(this,a,[{Sa:\"touchstart\",listener:this.f},{Sa:\"touchmove\",listener:this.f},{Sa:\"touchend\",listener:this.f},{Sa:\"touchcancel\",listener:this.f}]);this.G={touchstart:\"pointerdown\",touchmove:\"pointermove\",touchend:\"pointerup\",touchcancel:\"pointercancel\"};this.v=(a=(a=a.m)?a.J():null)?Array.prototype.slice.call(a.querySelectorAll(\"a\"),0):[]}w(Hq,zq);\nHq.prototype.f=function(a){var b=a.touches,c=this.a.length(),d;if(\"touchstart\"===a.type&&c>=b.length){c=this.a.clone();for(d=b.length;d--;)c.remove(b[d].identifier);for(d=c.length();d--;)this.a.remove(c.a[d].id);this.b=c;Bq(this,\"pointercancel\",a);this.b.clear()}if(this.G[a.type]){b=lq(this.u.element);c=a.type;d=a.changedTouches;var e=d.length,f;this.b.clear();for(f=0;f<e;f++){var g=d[f];var h=wq(this.a,g.identifier);var k=g.pageX-b.x;var l=g.pageY-b.y;if(h)if(\"touchmove\"===c){g=Math.abs(h.viewportX-\nk);var m=Math.abs(h.viewportY-l);if(1<g||1<m||1===g&&1===m)rq(h,k,l),this.b.push(h)}else\"touchend\"===c&&(this.a.remove(h.id),this.b.push(h),tq(h,uq.LEFT));else h=new qq(k,l,g.identifier,\"touch\",uq.LEFT,1),this.a.push(h),this.b.push(h)}Bq(this,this.G[a.type],a);-1===this.v.indexOf(a.target)&&a.preventDefault()}};Hq.prototype.s=function(){this.v=null;zq.prototype.s.call(this)};function Iq(a){var b=Jq(this);(window.PointerEvent||window.MSPointerEvent)&&b.push({Sa:\"MSHoldVisual\",listener:\"prevent\"});zq.call(this,a,b)}w(Iq,zq);function Jq(a){var b=!!window.PointerEvent,c,d,e=[];a.f=A(a.f,a);\"MSPointerDown MSPointerMove MSPointerUp MSPointerCancel MSPointerOut MSPointerOver\".split(\" \").forEach(function(f){c=f.toLowerCase().replace(/ms/g,\"\");d=b?c:f;e.push({Sa:d,listener:a.f,target:\"MSPointerUp\"===f||\"MSPointerMove\"===f?window:null})});return e}var Kq={2:\"touch\",3:\"pen\",4:\"mouse\"};\nIq.prototype.f=function(a){var b=window.PointerEvent?a.type:a.type.toLowerCase().replace(/ms/g,\"\"),c=lq(this.i),d=wq(this.a,a.pointerId),e=a.pageX-c.x;c=a.pageY-c.y;var f=Kq[a.pointerType]||a.pointerType;mq&&\"rtl\"===y.getComputedStyle(this.u.element).direction&&(e-=(y.devicePixelRatio-1)*this.u.width);if(!(d||b in{pointerup:1,pointerout:1,pointercancel:1}||\"touch\"===f&&\"pointerdown\"!==b)){d={x:e,y:c};var g=a.pointerType;\"number\"===typeof g&&(g=Kq[g]);d=new qq(d.x,d.y,a.pointerId,g,a.button,a.buttons);\nthis.a.push(d)}d&&(b in{pointerup:1,pointercancel:1}?(\"touch\"===f&&this.a.remove(d.id),tq(d,a.button)):\"pointerdown\"===b&&(\"touch\"===a.pointerType&&(xq(this.a,\"mouse\"),xq(this.a,\"pen\")),sq(d,a.button)),this.b.push(d),\"pointermove\"!==b?(rq(d,e,c),Bq(this,\"pointerout\"===b||\"pointerover\"===b?\"pointermove\":b,a)):d.viewportX===e&&d.viewportY===c||a.target===document.documentElement||(rq(d,e,c),Bq(this,b,a)));this.b.clear()};function Lq(a,b,c,d){Lq.l.constructor.call(this,\"contextmenu\");this.items=[];this.viewportX=a;this.viewportY=b;this.target=c;this.originalEvent=d}w(Lq,Ec);u(\"H.mapevents.ContextMenuEvent\",Lq);function Mq(a){this.nh=A(this.nh,this);this.ph=A(this.ph,this);this.oh=A(this.oh,this);this.v=!1;this.f=-1;this.G=0;Mq.l.constructor.call(this,a,[{Sa:\"contextmenu\",listener:this.nh},{target:a,Sa:\"longpress\",listener:this.ph},{target:a,Sa:\"dbltap\",listener:this.oh}])}w(Mq,zq);n=Mq.prototype;n.ph=function(a){var b=a.currentPointer;\"touch\"===b.type&&1===a.pointers.length&&Nq(this,b.viewportX,b.viewportY,a.originalEvent,a.target)};n.oh=function(a){\"touch\"===a.currentPointer.type&&(this.G=Date.now())};\nn.nh=function(a){var b=this;-1===this.f?this.f=setTimeout(function(){var c=lq(b.i),d=a.pageX-c.x;c=a.pageY-c.y;b.f=-1;Nq(b,d,c,a)},this.Og):(clearInterval(this.f),this.f=-1);a.preventDefault()};function Nq(a,b,c,d,e){var f=a.map,g=Date.now()-a.G;e?!a.v&&g>a.Bh&&(a.v=!0,e.dispatchEvent(new Lq(b,c,e,d)),pe(f.J(),a.Ki,a.lj,!1,a)):f.Qd(b,c,a.vn.bind(a,b,c,d))}n.vn=function(a,b,c,d){d=d&&r(d.dispatchEvent)?d:this.map;Nq(this,a,b,c,d)};n.Ki=[\"mousedown\",\"touchstart\",\"pointerdown\",\"wheel\"];\nn.lj=function(){this.v&&(this.v=!1,this.map.dispatchEvent(new Ec(\"contextmenuclose\",this.map)))};n.s=function(){var a=this.map.J();clearInterval(this.f);a&&we(a,this.Ki,this.lj,!1,this);zq.prototype.s.call(this)};function Oq(a,b,c,d,e){Oq.l.constructor.call(this,\"wheel\");this.delta=a;this.viewportX=b;this.viewportY=c;this.target=d;this.originalEvent=e}w(Oq,Ec);u(\"H.mapevents.WheelEvent\",Oq);function Pq(a){var b=\"onwheel\"in document;this.P=b;this.G=(b?\"d\":\"wheelD\")+\"elta\";this.f=A(this.f,this);Pq.l.constructor.call(this,a,[{Sa:(b?\"\":\"mouse\")+\"wheel\",listener:this.f}]);this.v=this.map.Ba}w(Pq,zq);\nPq.prototype.f=function(a){if(!a.fl){var b=lq(this.i);var c=a.pageX-b.x;b=a.pageY-b.y;var d=this.G,e=a[d+(d+\"Y\"in a?\"Y\":\"\")],f;mq&&\"rtl\"===y.getComputedStyle(this.v.element).direction&&(c-=(y.devicePixelRatio-1)*this.v.width);if(e){var g=Math.abs;var h=g(e);e=(!(f=a[d+\"X\"])||3<=h/g(f))&&(!(f=a[d+\"Z\"])||3<=h/g(f))?((0<e)-(0>e))*(this.P?1:-1):0}c=new Oq(e,c,b,null,a);c.delta&&(a.stopImmediatePropagation(),a.preventDefault(),this.map.Qd(c.viewportX,c.viewportY,this.L.bind(this,c)))}};\nPq.prototype.L=function(a,b){var c=a.target=b||this.map,d,e;setTimeout(function(){c.dispatchEvent(a);a.f||(d=a.originalEvent,e=new y.WheelEvent(\"wheel\",d),e.fl=1,d.target.dispatchEvent(e))},0)};function Qq(a){var b=window;this.f=A(this.f,this);zq.call(this,a,[{Sa:\"mousedown\",listener:this.f},{Sa:\"mousemove\",listener:this.f,target:b},{Sa:\"mouseup\",listener:this.f,target:b},{Sa:\"mouseover\",listener:this.f},{Sa:\"mouseout\",listener:this.f},{Sa:\"dragstart\",listener:this.v}])}w(Qq,zq);\nQq.prototype.f=function(a){var b=a.type,c=lq(this.i);c={x:a.pageX-c.x,y:a.pageY-c.y};var d;(d=this.a.a[0])||(d=new qq(c.x,c.y,1,\"mouse\"),this.a.push(d));this.b.push(d);rq(d,c.x,c.y);/^mouse(?:move|over|out)$/.test(b)?Bq(this,\"pointermove\",a):(/^mouse(down|up)$/.test(b)&&(c=a.which-1,\"up\"===oq.RegExp.$1?tq(d,c):sq(d,c)),Bq(this,b.replace(\"mouse\",\"pointer\"),a));this.b.clear()};Qq.prototype.v=function(a){a.preventDefault()};function Rq(a){var b=a.Ba.element.style;if(-1!==Sq.indexOf(a))throw Error(\"InvalidArgument: map is already in use\");this.a=a;Sq.push(a);b.msTouchAction=b.touchAction=\"none\";nq||!window.PointerEvent&&!window.MSPointerEvent?(this.c=new Hq(this.a),this.b=new Qq(this.a)):this.c=new Iq(this.a);this.g=new Pq(this.a);this.f=new Mq(this.a);this.a.xb(this.F,this);Ac.call(this)}w(Rq,Ac);u(\"H.mapevents.MapEvents\",Rq);Rq.prototype.c=null;Rq.prototype.b=null;Rq.prototype.g=null;Rq.prototype.f=null;\nvar Sq=[];Yb(Sq);Rq.prototype.F=function(){this.a=null;this.c.F();this.g.F();this.f.F();this.b&&this.b.F();Sq.splice(Sq.indexOf(this.a),1);Ac.prototype.F.call(this)};Rq.prototype.dispose=Rq.prototype.F;Rq.prototype.Vl=function(){return this.a};Rq.prototype.getAttachedMap=Rq.prototype.Vl;function Tq(a,b){var c;if(-1!==Uq.indexOf(a))throw new D(Tq,0,\"events are already used\");b=b||{};Ac.call(this);this.a=c=a.a;this.j=a;Uq.push(a);c.draggable=!0;this.i=b.kinetics||{duration:600,Jd:Ll};this.m=b.modifierKey||\"Alt\";this.enable(b.enabled);this.c=c.Ba;this.f=this.c.element;this.g=0;c.addEventListener(\"dragstart\",this.Lh,!1,this);c.addEventListener(\"drag\",this.$j,!1,this);c.addEventListener(\"dragend\",this.Kh,!1,this);c.addEventListener(\"wheel\",this.pk,!1,this);c.addEventListener(\"dbltap\",\nthis.jk,!1,this);c.addEventListener(\"pointermove\",this.ak,!1,this);oe(this.f,\"contextmenu\",this.Zj,!1,this);a.xb(this.F,this)}w(Tq,Ac);u(\"H.mapevents.Behavior\",Tq);var Uq=[];Yb(Uq);Tq.prototype.b=0;var Vq={Ri:1,Ti:2,Ao:4,to:8,uo:16,bc:32,pc:64};Tq.DRAGGING=1;Tq.WHEELZOOM=4;Tq.DBLTAPZOOM=8;Tq.FRACTIONALZOOM=16;Tq.Feature={PANNING:1,PINCH_ZOOM:2,WHEEL_ZOOM:4,DBL_TAP_ZOOM:8,FRACTIONAL_ZOOM:16,HEADING:64,TILT:32};\nfunction Wq(a,b){if(a!==+a||a%1||0>a||2147483647<a)throw new D(b,0,\"integer in range [0...0x7FFFFFFF] required\");}Tq.prototype.disable=function(a){var b=this.b;a!==B?(Wq(a,this.disable),b^=b&a):b=0;this.c.endInteraction(!0);this.b=b;this.a.draggable=0<(b&1)};Tq.prototype.disable=Tq.prototype.disable;Tq.prototype.enable=function(a){var b=this.b;a!==B?(Wq(a,this.enable),b|=a&127):b=127;this.b=b;this.a.draggable=0<(b&1)};Tq.prototype.enable=Tq.prototype.enable;\nTq.prototype.isEnabled=function(a){Wq(a,this.isEnabled);return a===(this.b&a)};Tq.prototype.isEnabled=Tq.prototype.isEnabled;\nfunction Xq(a,b,c){var d=\"touch\"===b.currentPointer.type,e=0,f;if(f=!d){f=a.m;var g,h=b.originalEvent;h.getModifierState?g=h.getModifierState(f):g=!!h[f.replace(/^Control$/,\"ctrl\").toLowerCase()+\"Key\"];f=g}f?e|=Vq.bc|Vq.pc:(e|=Vq.Ri,d&&(b=b.pointers,2===b.length&&(e|=Vq.Ti|Vq.pc,c?55>Nc(b[0].viewportY-b[1].viewportY)&&(e|=Vq.bc):a.uh&Tk.TILT&&(e|=Vq.bc))));e&=a.b;return(e&Vq.bc?Tk.TILT:0)|(e&Vq.pc?Tk.HEADING:0)|(e&Vq.Ti?Tk.ZOOM:0)|(e&Vq.Ri?Tk.COORD:0)}\nfunction Yq(a){var b=a.pointers;a=b[0];b=b[1];a=[a.viewportX,a.viewportY];b&&a.push(b.viewportX,b.viewportY);return a}n=Tq.prototype;n.uh=0;n.Lh=function(a){var b=Xq(this,a,!0);if(this.uh=b){var c=this.c;a=Yq(a);c.startInteraction(b,this.i);c.interaction.apply(c,a);if(this.b&4&&!(this.b&16)&&(b=a[0],c=a[1],this.g)){a=this.a.qb();var d=(0>this.g?Mc:Lc)(a);a!==d&&(this.g=0,Zq(this,a,d,b,c))}}};\nn.$j=function(a){var b=Xq(this,a,!1);if(b!==this.uh)\"pointerout\"!==a.originalEvent.type&&\"pointerover\"!==a.originalEvent.type&&(this.Kh(a),this.Lh(a));else if(b){b=this.c;var c=Yq(a);b.interaction.apply(b,c);a.originalEvent.preventDefault()}};n.Kh=function(a){Xq(this,a,!1)&&this.c.endInteraction(!this.i)};\nfunction Zq(a,b,c,d,e){a=a.a.b;if(isNaN(+b))throw Error(\"start zoom needs to be a number\");if(isNaN(+c))throw Error(\"to zoom needs to be a number\");0!==+c-+b&&(a.startControl(null,d,e),a.control(0,0,6,0,0,0),a.endControl(!0,function(a){a.zoom=c}))}n.pk=function(a){if(!a.defaultPrevented&&this.b&4){var b=a.delta;var c=this.a.qb();var d=this.a;var e=d.vc().type;d=this.b&16?c-b:(0>-b?Mc:Lc)(c)-b;if(e===Km.P2D||e===Km.WEBGL)Zq(this,c,d,a.viewportX,a.viewportY),this.g=b;a.preventDefault()}};n.ak=function(){};\nn.jk=function(a){var b=a.currentPointer,c=this.a.qb(),d=a.currentPointer.type,e=this.a.vc().type;(e===Km.P2D||e===Km.WEBGL)&&this.b&8&&(a=\"mouse\"===d?0===a.originalEvent.button?-1:1:0<a.pointers.length?1:-1,a=this.b&16?c-a:(0>-a?Mc:Lc)(c)-a,Zq(this,c,a,b.viewportX,b.viewportY))};n.Zj=function(a){return this.b&8?(a.preventDefault(),!1):!0};\nn.F=function(){var a=this.a;a&&(a.draggable=!1,a.removeEventListener(\"dragstart\",this.Lh,!1,this),a.removeEventListener(\"drag\",this.$j,!1,this),a.removeEventListener(\"dragend\",this.Kh,!1,this),a.removeEventListener(\"wheel\",this.pk,!1,this),a.removeEventListener(\"dbltap\",this.jk,!1,this),a.removeEventListener(\"pointermove\",this.ak,!1,this),this.a=null);this.f&&(this.f.style.msTouchAction=\"\",we(this.f,\"contextmenu\",this.Zj,!1,this),this.f=null);this.i=this.c=null;Uq.splice(Uq.indexOf(this.j),1);Ac.prototype.F.call(this)};\nTq.prototype.dispose=Tq.prototype.F;u(\"H.mapevents.buildInfo\",function(){return qf(\"mapsjs-mapevents\",\"1.8.1\",\"3dcce55\")});\n");
\ No newline at end of file

src/assets/js/mapsjs-ui.css

+/*
+ * Explanation why the layout looks so complicated:
+ * The UI container needs a position (absolute or relative) to prevent z-index issues (DomMarker on top of UI)
+ * Therefore it has these additional styles:
+ *    position: absolute;
+ *    width: 100%;
+ *    height: 100%;
+ * To prevent that the UI container captures all events the container is displaced by
+ *   left: 100%;
+ * To neutralize the displacement for the UI elements within the UI container the following adjustments are needed:
+ *  - InfoBubble (.H_ib):            left: -100%;
+ *  - left anchor (.H_l_left):       margin-left: -100%;
+ *  - center anchor (.H_l_center):   left: -50%;            (was left: 50%)
+ *  - right anchor (.H_l_right):     right: 100%;           (was right: 0)
+ *                                        margin-left: -100%;
+ */
+
+.H_ui {
+  font-size: 10px;
+  font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
+  -moz-user-select: none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -o-user-select: none;
+  -ms-user-select: none;
+  /* position ui on top of imprint to make both clickable */
+  z-index: 2;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 100%;
+}
+.H_ui * {
+  /* normalize in case some other normalization CSS likes things differently */
+  box-sizing: content-box;
+  -moz-box-sizing: content-box;
+}
+.H_noevs {
+  pointer-events: none;
+}
+
+/*
+ * Layout
+ */
+.H_l_left {
+  position: absolute;
+  left: 16px;
+  margin-left: -100%;
+}
+.H_l_center {
+  position: absolute;
+  left: -50%;
+}
+.H_l_right {
+  position: absolute;
+  right: calc(100% + 16px);
+  margin-left: -100%;
+}
+.H_l_top {
+  top: 16px;
+}
+.H_l_middle {
+  top: 50%;
+}
+.H_l_bottom {
+  bottom: 16px;
+}
+
+/* Fix MAPSJS-579 for modern browsers */
+[class^=H_l_] {
+    pointer-events: none;
+}
+.H_ctl {
+    /* hack for IE9-10, auto doesn't work for them */
+    pointer-events: visiblePainted;
+    pointer-events: auto;
+}
+
+.H_l_horizontal .H_ctl {
+  float: left;
+}
+
+.H_l_anchor {
+  clear: both;
+  float: right;
+}
+
+.H_l_vertical .H_ctl {
+  clear: both;
+}
+
+.H_l_right .H_l_vertical .H_ctl {
+  float: right;
+}
+
+.H_l_right.H_l_middle.H_l_vertical .H_ctl{
+  float: right;
+}
+
+/**
+ *  Element styles
+ */
+
+.H_ctl {
+  margin: .8em;
+  position: relative;
+  -ms-touch-action: none;
+}
+
+.H_btn {
+  cursor: pointer;
+}
+
+.H_grp .H_btn,
+.H_rdo_buttons .H_btn {
+    box-shadow: none;
+}
+.H_grp .H_btn.H_active,
+.H_rdo_buttons .H_btn.H_active {
+  background: none;
+}
+
+.H_btn {
+  box-shadow: 0em 0 0.4em 0 rgba(15, 22, 33, 0.6);
+  border-radius: 0.5em;
+  width: 4em;
+  height: 4em;
+  background: #fff;
+}
+
+.H_disabled,
+.H_disabled:hover {
+  cursor: default;
+}
+
+.H_rdo_title {
+  font-size: 14px;
+  height: 40px;
+  line-height: 40px;
+  background-color: #575B63;
+  color: #fff;
+  padding-left: 16px;
+  padding-right: 16px;
+  border-radius: 5px 5px 0 0;
+  margin-bottom: 8px;
+  cursor: default;
+}
+.H_rdo ul {
+  list-style: none;
+  margin: 0 auto;
+  padding: 0;
+}
+
+/**
+ *   Base Elements
+ */
+.H_ctl.H_grp {
+  background: #fff;
+  box-shadow: 0em 0 0.4em 0 rgba(15, 22, 33, 0.6);
+  border-radius: 0.5em;
+}
+/* Button divider */
+.H_zoom .H_el {
+  position: relative;
+}
+.H_l_vertical .H_zoom .H_el:last-child::after,
+.H_l_horizontal .H_zoom .H_el:last-child::after {
+  content: none;
+}
+
+.H_l_vertical .H_zoom .H_el {
+  margin-bottom: 0.1em;
+}
+.H_l_vertical .H_zoom .H_el:last-child {
+  margin-bottom: 0;
+}
+.H_l_vertical .H_zoom .H_el::after {
+  content: "";
+  position: absolute;
+  width: 2.6em;
+  height: 0.1em;
+  bottom: -0.1em;
+  left: 0.7em;
+  background: rgba(15, 22, 33, 0.1);
+}
+
+.H_l_horizontal .H_zoom .H_el {
+  margin-right: 0.1em;
+}
+.H_l_horizontal .H_zoom .H_el:last-child {
+  margin-right: 0;
+}
+.H_l_horizontal .H_zoom .H_el::after {
+  content: "";
+  position: absolute;
+  width: 0.1em;
+  height: 2.6em;
+  top: 0.7em;
+  right: -0.1em;
+  background: rgba(15, 22, 33, 0.1);
+}
+/* End: Button divider */
+.H_l_horizontal .H_grp .H_btn,
+.H_l_vertical .H_ctl {
+  float: left;
+}
+
+
+/** Menu panel */
+.H_overlay {
+  font-size: 14px;
+  color: rgba(15, 22, 33, 0.6);
+  box-shadow: 0px 0 4px 0 rgba(15, 22, 33, 0.6);
+  border-radius: 5px;
+  position: absolute;
+  min-width: 200px;
+  background: #fff;
+  display: none;
+  z-index: 100;
+  padding-bottom: 4px;
+}
+
+.H_overlay .H_separator {
+  content: "";
+  position: relative;
+  display: block;
+  margin: 8px 16px 8px 16px;
+  height: 1px;
+  background: rgba(15, 22, 33, 0.1);
+}
+
+.H_overlay .H_btn,
+.H_overlay .H_rdo li {
+  width: 184px;
+  height: 24px;
+  line-height: 24px;
+  padding: 8px 16px;
+}
+.H_overlay .H_btn{
+  border-radius: 0px;
+}
+
+.H_overlay .H_btn:hover,
+.H_overlay .H_rdo li:hover {
+  color: rgba(15, 22, 33, 0.8);
+}
+
+.H_overlay .H_btn.H_disabled,
+.H_overlay .H_rdo.H_disabled li,
+.H_overlay .H_btn.H_disabled:hover,
+.H_overlay .H_rdo.H_disabled li:hover {
+  color: rgba(15, 22, 33, 0.2);
+}
+
+.H_overlay .H_btn.H_active,
+.H_overlay .H_rdo.H_active li,
+.H_overlay .H_btn.H_active:hover,
+.H_overlay .H_rdo.H_active li:hover {
+  color: #0F1621;
+}
+
+.H_overlay>*:last-child {
+  clear: both;
+}
+.H_overlay>.H_btn {
+  white-space: nowrap;
+}
+
+.H_overlay.H_open {
+  display: block;
+}
+
+.H_overlay::before, .H_overlay::after {
+  content: " ";
+  width: 0;
+  height: 0;
+  border-style: solid;
+  position: absolute;
+}
+.H_overlay.H_left::before {
+  border-width: 10px 10px 10px 0;
+  border-color: transparent rgba(15, 22, 33, 0.2) transparent transparent;
+  left: -12px;
+}
+.H_overlay.H_left::after {
+  border-width: 10px 10px 10px 0;
+  border-color: transparent #fff transparent transparent;
+  left: -10px;
+}
+.H_overlay.H_top.H_left::after {
+  border-color: transparent #575B63 transparent transparent;
+}
+
+.H_overlay.H_right::before {
+  border-width: 10px 0 10px 10px;
+  border-color: transparent transparent transparent rgba(15, 22, 33, 0.2);
+  left: calc(100% + 1px);
+}
+.H_overlay.H_right::after {
+  border-width: 10px 0 10px 10px;
+  border-color: transparent transparent transparent #fff;
+  left: 100%;
+}
+.H_overlay.H_top.H_right::after {
+  border-color: transparent transparent transparent #575B63;
+}
+
+.H_overlay.H_top::before,
+.H_overlay.H_top::after {
+  top: 10px;
+}
+.H_overlay.H_bottom::before,
+.H_overlay.H_bottom::after {
+  bottom: 10px;
+}
+.H_overlay.H_middle::before,
+.H_overlay.H_middle::after {
+  top: 50%;
+  margin-top: -10px;
+}
+
+.H_overlay.H_top.H_center::before {
+  border-width: 0 10px 10px 10px;
+  border-color: transparent transparent rgba(15, 22, 33, 0.2) transparent;
+  top: -11px;
+  left: 50%;
+  margin-left: -10px;
+}
+.H_overlay.H_top.H_center::after {
+  border-width: 0 10px 10px 10px;
+  border-color: transparent transparent #575B63 transparent;
+  top: -10px;
+  left: 50%;
+  margin-left: -10px;
+}
+
+.H_overlay.H_bottom.H_center::before {
+  border-width: 10px 10px 0 10px;
+  border-color: rgba(15, 22, 33, 0.2) transparent transparent transparent;
+  bottom: -11px;
+  left: 50%;
+  margin-left: -10px;
+}
+.H_overlay.H_bottom.H_center::after {
+  border-width: 10px 10px 0 10px;
+  border-color: #fff transparent transparent transparent;
+  bottom: -10px;
+  left: 50%;
+  margin-left: -10px;
+}
+
+
+/** InfoBubble */
+.H_ib {
+  position: absolute;
+  left: .91em;
+  left: -100%;
+}
+.H_ib_tail {
+  position: absolute;
+  width: 20px;
+  height: 10px;
+  margin: -10px -10px;
+}
+
+.H_ib_tail::before{
+  bottom: -1px;
+  border-width: 10px;
+  position: absolute;
+  display: block;
+  content: "";
+  border-color: transparent;
+  border-style: solid;
+  right: 0px;
+}
+
+.H_ib_tail::after{
+  bottom: 0;
+  position: absolute;
+  display: block;
+  content: "";
+  border-color: white;
+  border-style: solid;
+  border-width: 10px;
+}
+
+.H_ib.H_ib_top .H_ib_tail::after {
+  border-width: 10px 10px 0px 10px;
+  border-color: white transparent;
+}
+
+.H_ib.H_ib_top .H_ib_tail::before {
+  border-top-color: rgba(15, 22, 33, 0.2);
+  border-bottom-width: 0px;
+}
+
+.H_ib_notail .H_ib_tail {
+  display: none;
+}
+.H_ib_body {
+  background: white;
+  position: absolute;
+  bottom: .5em;
+  padding: 0;
+  right: 0px;
+  border-radius: 5px;
+  margin-right: -3em;
+  box-shadow: 0px 0 4px 0 rgba(15, 22, 33, 0.6);
+  margin-bottom: 0.5em;
+}
+
+.H_ib_close {
+  font-size: .6em;
+  position: absolute;
+  right: 12px;
+  width: 12px;
+  height: 12px;
+  cursor: pointer;
+  top: 12px;
+  z-index: 1;
+  background: none;
+  box-shadow: none;
+}
+
+.H_ib_close svg.H_icon {
+    top: 0;
+    transform: none;
+    width: auto;
+    height: auto;
+}
+
+.H_ib_noclose .H_ib_close {
+  display: none;
+}
+.H_ib_noclose .H_ib_body {
+  padding: 0 0 0 0;
+}
+
+.H_ib_content {
+  min-width: 6em;
+  font: 14px "Lucida Grande", Arial, Helvetica, sans-serif;
+  line-height: 24px;
+  margin: 16px 28px 20px 16px;
+  color: rgba(15,22,33,.8);
+  user-select: text;
+  -moz-user-select: text;
+  -khtml-user-select: text;
+  -webkit-user-select: text;
+  -o-user-select: text;
+  -ms-user-select: text;
+}
+
+
+/*##################################################  SLIDER  ########################################################*/
+
+.H_l_horizontal .H_zoom_slider {
+  min-width: 262px;
+}
+.H_slider {
+  cursor: pointer;
+}
+.H_l_horizontal.H_slider {
+  float: left;
+  height: 4em;
+  width: auto;
+  padding: 0 1em;
+}
+
+.H_slider .H_slider_track {
+  width: 0.4em;
+  height: 100%;
+}
+
+.H_l_horizontal.H_slider .H_slider_track {
+  height: 0.4em;
+  width: 100%;
+}
+
+.H_l_horizontal.H_slider .H_slider_cont {
+  height: 100%;
+}
+
+.H_l_horizontal.H_slider .H_slider_knob_cont {
+  margin-top: -0.4em;
+}
+
+.H_slider {
+  background-color: #fff;
+  padding: 1em 0em;
+  width: 4em;
+}
+
+
+.H_slider .H_slider_cont {
+  position: relative;
+}
+
+.H_slider .H_slider_knob_cont,
+.H_slider .H_slider_knob_halo {
+  width: 1.8em;
+  height: 1.8em;
+  margin-left: 0em;
+  border-radius:9em;
+}
+
+
+.H_slider .H_slider_knob {
+  width: 1.2em;
+  height: 1.2em;
+  background-color: white;
+  border-radius:9em;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+  top: 50%;
+  left: 50%;
+  box-shadow: 0em 0 0.5em 0 rgba(15, 22, 33, 0.6);
+  position: absolute;
+}
+
+.H_slider:hover .H_slider_knob {
+  box-shadow: 0em 0 0.5em 0 rgba(15, 22, 33, 0.8);
+}
+.H_slider.H_disabled .H_slider_knob {
+  box-shadow: 0em 0 0.5em 0 rgba(15, 22, 33, 0.2);
+}
+.H_slider.H_slider_active .H_slider_knob {
+  box-shadow: 0em 0 0.5em 0 rgba(15, 22, 33, 1);
+}
+
+.H_slider:hover .H_slider_track {
+  background-color: rgba(15, 22, 33, 0.8);
+}
+
+.H_disabled .H_slider_track {
+  background-color: rgba(15, 22, 33, 0.2);
+}
+.H_slider:hover .H_slider_track_active {
+  background-color: rgba(0, 182, 178, 0.8);
+}
+.H_disabled .H_slider_track_active {
+  background-color: rgba(0, 182, 178, 0.2);
+}
+.H_slider.H_slider_active .H_slider_track {
+  background-color: rgba(15, 22, 33, 1.0);
+}
+.H_slider.H_slider_active .H_slider_track_active {
+  background-color: rgba(0, 182, 178, 1.0);
+}
+
+.H_slider .H_slider_track,
+.H_slider .H_slider_knob_cont{
+  position:relative;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%,-50%);
+  -ms-transform: translate(-50%,-50%);
+  transform: translate(-50%,-50%);
+}
+
+.H_slider .H_slider_track {
+  background-color: rgba(15, 22, 33, 0.6);
+  overflow: hidden;
+}
+.H_slider .H_slider_track_active {
+  background-color: #00B6B2;
+  position: absolute;
+  transform: translate(-50%,0%);
+}
+
+.H_slider.H_disabled .H_slider_track {
+  background-color: rgba(15, 22, 33, 0.2);
+}
+.H_slider.H_disabled .H_slider_track_active {
+  background-color: #bae2e3;
+}
+
+.H_slider.H_l_horizontal .H_slider_track_active {
+  transform: translate(-200%, -50%);
+}
+
+.H_slider.H_disabled {
+  cursor: default;
+}
+
+/*###############################################  CONTEXT MENU  #####################################################*/
+.H_context_menu {
+  font-size: 14px;
+  min-width: 158px;
+  max-width: 40%;
+  box-shadow: 0em 0 0.4em 0 rgba(15, 22, 33, 0.6);
+  position: absolute;
+  left: -100%;
+  top: 0;
+  color: rgba(15, 22, 33, 0.6);
+  background-color: #fff;
+  -moz-border-radius: 5px;
+  -webkit-border-radius: 5px;
+  -o-border-radius: 5px;
+  border-radius: 5px;
+  padding: 16px 16px 4px 16px;
+  -moz-user-select: initial;
+  -khtml-user-select: initial;
+  -webkit-user-select: initial;
+  -o-user-select: initial;
+  -ms-user-select: initial;
+  z-index: 200;
+}
+
+.H_context_menu_closed {
+    display: none;
+}
+
+.H_context_menu_item {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  line-height: 24px;
+  margin-bottom: 16px;
+  outline: none;
+}
+
+.H_context_menu_item.clickable:hover {
+  color: rgba(15, 22, 33, 0.8);
+  cursor: pointer;
+}
+.H_context_menu_item.disabled:hover,
+.H_context_menu_item.disabled {
+    background: transparent !important;
+    color: rgba(15, 22, 33, 0.2);
+    cursor: default !important;
+
+    -moz-user-select: none;
+    -khtml-user-select: none;
+    -webkit-user-select: none;
+    -o-user-select: none;
+    -ms-user-select: none;
+}
+.H_context_menu_item_separator {
+    height: 0;
+    border-top: 1px solid rgba(15, 22, 33, 0.1);
+    padding-bottom: 16px;
+    line-height: 0;
+    font-size: 0;
+}
+
+
+/*#################################################  SCALE BAR  ######################################################*/
+.H_scalebar {
+  margin-top: 36px;
+  box-shadow: none;
+  display: flex;
+  align-items: center;
+  text-shadow:
+    -1px -1px 0 rgba(255, 255, 255, 0.7),
+    1px -1px 0 rgba(255, 255, 255, 0.7),
+    -1px 1px 0 rgba(255, 255, 255, 0.7),
+    1px 1px 0 rgba(255, 255, 255, 0.7);
+}
+
+
+/*###################################  DISTANCE MEASUREMENT AND TRAFFIC INCIDENTS ####################################*/
+
+.H_tib_content {
+  width: 25em;
+  position: relative;
+  margin: -16px -28px -20px -16px;
+}
+.H_tib .H_tib_desc { padding: 0px 16px 20px 16px }
+.H_tib .H_tib_time {color: rgba(15,22,33,.4);margin-top: 0.8em;}
+.H_tib_right { float:right; }
+
+.H_tib .H_btn > svg.H_icon {
+  fill: rgba(255,255,255, .6);
+}
+
+.H_tib .H_btn:hover > svg.H_icon {
+  fill: white;
+}
+
+.H_dm_label {
+  font: 12px "Lucida Grande", Arial, Helvetica, sans-serif;
+  color: black;
+  text-shadow: 1px 1px .5px #FFF, 1px -1px .5px #FFF, -1px 1px .5px #FFF, -1px -1px .5px #FFF;
+  white-space: nowrap;
+  margin-left: 12px;
+  margin-top: -7px;
+  /* This will not work on IE9, but it is accepted! */
+  pointer-events: none;
+}
+
+
+/*###################################################  ICON  #########################################################*/
+svg.H_icon {
+  display: block;
+  position: relative;
+  top: 50%;
+  transform: translateY(-50%);
+  margin:auto;
+  width: 24px;
+  height: 24px;
+  fill: rgba(15, 22, 33, 0.6);
+}
+svg.H_icon .H_icon_stroke {
+  stroke: rgba(15, 22, 33, 0.6);
+  fill: none;
+}
+.H_btn:hover > svg.H_icon {
+  fill: rgba(15, 22, 33, 0.8);
+}
+.H_btn:hover > svg.H_icon .H_icon_stroke {
+  stroke: rgba(15, 22, 33, 0.8);
+}
+.H_btn.H_active {
+  background-color: #CFD0D3;
+}
+.H_rdo .H_btn.H_active {
+  background: none;
+}
+
+.H_active > svg.H_icon,
+.H_active:hover > svg.H_icon {
+  fill: #0F1621 !important;
+}
+.H_active > svg.H_icon .H_icon_stroke,
+.H_active:hover > svg.H_icon .H_icon_stroke {
+  stroke: #0F1621;
+}
+
+.H_disabled svg.H_icon,
+.H_disabled:hover svg.H_icon {
+  fill: rgba(15, 22, 33, 0.2);
+  cursor: default;
+}
+.H_disabled svg.H_icon .H_icon_stroke,
+.H_disabled:hover svg.H_icon .H_icon_stroke {
+  stroke: rgba(15, 22, 33, 0.2);
+}
+
+/*###############################################  OVERVIEW MAP  #####################################################*/
+.H_overview {
+  transition: width 0.2s,height 0.2s,margin-top 0.2s, padding 0.2s;
+  width: 0em;
+  height: 0em;
+  overflow: hidden;
+  cursor: default;
+  position: absolute;
+  margin: auto;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  box-shadow: 0em 0 0.4em 0 rgba(15, 22, 33, 0.6);
+}
+
+.H_l_vertical .H_overview_active {
+    margin: auto 5px;
+}
+
+.H_l_horizontal .H_overview_active {
+  margin: 5px auto;
+}
+
+.H_l_center .H_overview {
+  left: -9999px;
+  right: -9999px;
+}
+
+.H_l_middle .H_overview {
+  top: -9999px;
+  bottom: -9999px;
+}
+
+.H_l_right .H_overview {
+  right: 100%;
+}
+
+.H_l_left .H_overview {
+  left: 100%;
+}
+
+.H_l_bottom .H_overview {
+  bottom: 0;
+}
+.H_l_center.H_l_bottom .H_overview {
+  bottom: 100%;
+}
+
+.H_l_top .H_overview {
+  top: 0;
+}
+.H_l_center.H_l_top .H_overview {
+  top: 100%;
+}
+
+.H_overview .H_overview_map {
+  background-color: rgba(256,256,256,0.6);
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  box-shadow: 0em 0 0.4em 0 rgba(15, 22, 33, 0.6);
+}
+
+
+.H_overview_map .H_ui {
+  display: none;
+}
+
+.H_zoom_lasso {
+  position: absolute;
+  display: none;
+  box-shadow: 0em 0 0.4em 0 rgba(15, 22, 33, 0.6);
+  z-index: 100000;
+  background-color: rgba(15, 22, 33, 0.2);
+}