Merge branch...

Merge branch '40-map-performance-improvement-map-angle-doesn-t-change-when-selected-3d' into 'master'

Resolve "Map performance improvement, map angle doesn't change when selected 3D"

Closes #40

See merge request 92khra1mst/hft_awado_app!26

src/app/home/home.page.html

@@ -7,20 +7,14 @@
       Home
     </ion-title>
     <ion-item class="checkbox-wrapper">
-      <!--ion-checkbox class="checkbox" [(ngModel)]="is3DChecked" (click)="toggle3DMaps()"></ion-checkbox-->
       <ion-label class="text" (click)="enable3DMaps()">3D</ion-label>
     </ion-item>
   </ion-toolbar>
 </ion-header>
 
 <ion-content>
-
-
-  <div #mapElement2d style="width: 100%; height: 100%" id="mapContainer" *ngIf="!is3DChecked"></div>
-  <div #mapElement3d style="width: 100%; height: 100%" id="mapContainer" *ngIf="is3DChecked"></div>
-  <!--div #mapElement style="width: 100%; height: 100%" id="mapContainer"></div-->
+  <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>

src/app/home/home.page.ts

@@ -18,32 +18,18 @@ declare var H: any;
 export class HomePage {
   private platform: any;
   private map: any;
+  private defaultLayers: any;
+
   bikes = [];
-  streets = [];
   bikeApi: Observable<any>;
 
-
   private currentLocation = { lat: 0, lng: 0 };
-
-  public is3DChecked = false;
   public isDetailsVisible = false;
-  public selectedBike ={id: 0};
-  public isBikeReserved= false;
-
-  public tempArr = [1, 2];
-  public locationArr = [{ lat: 48.778409, lng: 9.179252 },
-  { lat: 48.780926, lng: 9.173456 },
-  { lat: 48.775174, lng: 9.175459 },
-  { lat: 48.793704, lng: 9.191112 }]
-  public arrayLanLon = { lat: 0, lng: 0 };
-  @ViewChild("mapElement2d", { static: false })
-  public mapElement2d: ElementRef;
-
-  @ViewChild("mapElement3d", { static: false })
-  public mapElement3d: ElementRef;
-
-
+  public selectedBike = { id: 0 };
+  public isBikeReserved = false;
 
+  @ViewChild("mapElement", { static: false })
+  public mapElement: ElementRef;
 
   constructor(private geolocation: Geolocation,
     public restService: RestService,
@@ -62,7 +48,7 @@ export class HomePage {
 
   ngAfterViewInit() {
     setTimeout(() => {
-      this.loadmap("2D");
+      this.loadmap();
     }, 700);
 
     window.addEventListener('resize', () => this.map.getViewPort().resize());
@@ -73,45 +59,38 @@ export class HomePage {
       maximumAge: 1000, timeout: 4000,
       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.storage.get('token').then((token) => {
-        let url = 'http://193.196.52.237:8081/bikes' + '?lat=' + this.currentLocation.lat + '&lng=' + this.currentLocation.lng;
+        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('my data: ', resp);
+          console.log("bikes response", resp);
           this.bikes = resp;
           for (let i = 0; i < this.bikes.length; i++) {
-            var beforeDotStr = ''+this.bikes[i].distance;
-            var beforeDot = beforeDotStr.split('.')[0];
-            var afterDotArr = beforeDotStr.split('.')[1].split('');
-            var afterDot = afterDotArr[0] + afterDotArr[1];
-            this.bikes[i].distance = beforeDot + '.' + afterDot; 
+            this.bikes[i].distance = this.bikes[i].distance.toFixed(2);;
             this.reverseGeocode(this.platform, this.bikes[i].lat, this.bikes[i].lon, i);
           }
         }, (error) => console.log(error));
       });
     }, er => {
-      alert('Can not retrieve Location')
+      alert('Can not retrieve location');
     }).catch((error) => {
-      alert('Error getting location - ' + JSON.stringify(error))
+      alert('Error getting location - ' + JSON.stringify(error));
     });
   }
 
-  loadmap(style) {
+  loadmap() {
     // Obtain the default map types from the platform object
-    var mapStyle = "raster";
-    var mapElement = "mapElement2d";
-    if (style === "3D") {
-      mapStyle = "vector";
-      mapElement = "mapElement3d";
-    }
-    var defaultLayers = this.platform.createDefaultLayers();
+    this.defaultLayers = this.platform.createDefaultLayers();
     this.map = new H.Map(
-      this[mapElement].nativeElement,
-      defaultLayers[mapStyle].normal.map,
+      this.mapElement.nativeElement,
+      this.defaultLayers.raster.normal.map,
       {
         zoom: 17,
         pixelRatio: window.devicePixelRatio || 1
@@ -119,40 +98,46 @@ export class HomePage {
     );
 
     var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(this.map));
-    var ui = H.ui.UI.createDefault(this.map, defaultLayers);
+    var ui = H.ui.UI.createDefault(this.map, this.defaultLayers);
     ui.removeControl("mapsettings");
-    // create custom one
-    var ms = new H.ui.MapSettingsControl({
-      baseLayers: [{
-        label: "3D", layer: defaultLayers.vector.normal.map
+    // 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: 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
+      layers: [
+        {
+          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');
+    ui.addControl("custom-mapsettings", customMapSettings);
+    var mapSettings = ui.getControl('custom-mapsettings');
     var zoom = ui.getControl('zoom');
-
     mapSettings.setAlignment('top-right');
     zoom.setAlignment('right-top');
-    if (style === "3D") {
+
+    this.map.addEventListener('baselayerchange', (data) => {
+      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 });
       }
+    });
     this.getLocation(this.map);
 
-
     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'];
     for (let i = 0; i < this.bikes.length; i++) {
       if (this.bikes[i].batteryPercentage < 100 && this.bikes[i].batteryPercentage >= 75) {
@@ -169,9 +154,9 @@ export class HomePage {
 
     }
   }
+
   getCurrentPosition() {
     this.getLocation(this.map.setZoom(17));
-    
   }
 
   getLocation(map) {
@@ -179,11 +164,10 @@ export class HomePage {
       {
         maximumAge: 1000, timeout: 2000,
         enableHighAccuracy: true
-        
       }
     ).then((resp) => {
-      let lat = resp.coords.latitude
-      let lng = resp.coords.longitude
+      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);
@@ -195,44 +179,26 @@ export class HomePage {
   }
 
   moveMapToGiven(map, lat, lng) {
-
     var icon = new H.map.Icon('../../../assets/images/current_location.png');
     // 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:
     map.addObject(marker);
     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);
   }
 
-  toggle3DMaps() {
-    console.log(this.is3DChecked);
-    if (!this.is3DChecked) {
-      setTimeout(() => {
-        this.loadmap("3D");
-      }, 1000);
-    }
-  }
-
   enable3DMaps() {
-    this.is3DChecked = true;
-    setTimeout(() => {
-      this.loadmap("3D");
-    }, 100);
+    this.map.setBaseLayer(this.defaultLayers.vector.normal.map);
   }
 
-
   reverseGeocode(platform, lat, lng, index) {
     var prox = lat + ',' + lng + ',56';
     var geocoder = platform.getGeocodingService(),
@@ -258,13 +224,11 @@ export class HomePage {
     });
   }
 
-
   showBikeDetails(bike) {
-
-    this.selectedBike=bike;
-    this.selectedBike.id=bike.id;
+    this.selectedBike = bike;
     this.isDetailsVisible = true;
   }
+
   reserveBike() {
     //this.selectedBike=bikeS;
     this.storage.get('token').then((token) => {
@@ -273,17 +237,13 @@ export class HomePage {
       this.bikeApi = this.httpClient.get(url, { headers });
       this.bikeApi.subscribe((resp) => {
         console.log('my data: ', resp);
-        this.isBikeReserved=true;
+        this.isBikeReserved = true;
         this.toastService.showToast("Reservation Successful!");
       }, (error) => {
         console.log(error)
         this.toastService.showToast("Only one bike may be reserved or rented at a time")
       });
     });
- 
-
   }
 
-  
-
 }