Fix of the weird behavior of the native map component. Closes #92

CitizenApplication/api_keys/maps/ios/Google_maps_iOS_API_Key

@@ -1,3 +1,5 @@
 Google_maps_iOS_API_Key
 
-AIzaSyCxD2jkTLp-2cE8YWtx8leLCFHojWhwzhw
+AIzaSyCxD2jkTLp-2cE8YWtx8leLCFHojWhwzhw
+
+Installation command: cordova plugin add https://github.com/phonegap-googlemaps-plugin/cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID="AIzaSyCTDvPOMux4GiwFYSM_WNBqaivyHD1_7G8" --variable API_KEY_FOR_IOS="AIzaSyCxD2jkTLp-2cE8YWtx8leLCFHojWhwzhw"

CitizenApplication/app/components/native-map/map.html

@@ -3,4 +3,4 @@
   
   This is Map component for the CitizenApplication.
 -->
-<div style="width: 100%; height: 100%; flex: 1 1 auto;"></div>
+<!--div style="width: 100%; height: 100%;"></div-->

CitizenApplication/app/components/native-map/native-map.ts

@@ -13,7 +13,7 @@ import {GoogleMap, GoogleMapsEvent, GoogleMapsMarker, GoogleMapsLatLng, GoogleMa
     selector: 'native-map',
     templateUrl: 'build/components/native-map/map.html'
 })
-export class NativeMap implements OnDestroy {
+export class NativeMap implements OnDestroy, AfterViewInit {
     private map;
     private mapElement;
     private logger: Logger;
@@ -23,11 +23,15 @@ export class NativeMap implements OnDestroy {
         this.logger = new LoggerFactory().getLogger(this.config.misc.log_level, 'MapComponent', this.config.misc.log_pretty_print);
     }
 
+    ngAfterViewInit() {
+        this.render();
+    }
+
     render() {
         // Generate pseudorandom ID of the div, as the Ionic native plugin does not accept the element object,
         // but just the div id.
         this.mapElementId = 'map' + new Date().getTime();
-        this.mapElement = this.element.nativeElement.children[0];
+        this.mapElement = this.element.nativeElement; // .children[0];
         this.mapElement.setAttribute('id', this.mapElementId);
         let map = new GoogleMap(this.mapElementId);
         this.map = map;
@@ -46,6 +50,7 @@ export class NativeMap implements OnDestroy {
             },
         });
         this.centerCamera();
+        this.map.refreshLayout();
         console.log('successfully loaded map');
     }
 
@@ -55,11 +60,13 @@ export class NativeMap implements OnDestroy {
             let latitude = resp.coords.latitude;
             let longitude = resp.coords.longitude;
             this.map.animateCamera({
-                'target': new GoogleMapsLatLng(latitude.toString(), longitude.toString()),
+                'target': new GoogleMapsLatLng(latitude, longitude),
                 'tilt': 10,
                 'zoom': 18,
                 'bearing': 0
             });
+        }).catch((error) => {
+            this.logger.error('error occured while getting the location: ' + error);
         });
     }
 
@@ -83,7 +90,7 @@ export class NativeMap implements OnDestroy {
      * @param busX current x-coord of the bus
      * @param busY current y-ccord of the bus
     */
-    showBus(busX, busY ) {
+    showBus(busX, busY) {
         let busLatLng = new GoogleMapsLatLng(busX, busY);
         this.map.addMarker({
             'position': busLatLng,

CitizenApplication/app/pages/bus-detail/bus-detail.html

@@ -41,12 +41,12 @@
       </div>
     </div>
 
-    <div class="map">
-      <div class="estimation" *ngSwitchWhen="'position'">
+    <div class="map" *ngSwitchWhen="'position'">
+      <div class="estimation">
         {{schedule?.arrivingTime?.toDate() | date:'Hms'}}
         <span *ngIf="realTimeData.delay" class="delay">+{{realTimeData.delay}}</span>
       </div>
-      <native-map *ngSwitchWhen="'position'">
+      <native-map style="width: 100%; height: 100%; flex: 1 1 auto; display: flex;">
       </native-map>
     </div>
 

CitizenApplication/app/pages/bus-detail/bus-detail.ts

@@ -38,13 +38,13 @@ export class BusDetailPage {
   }
   set busViewType(data: string) {
     this._busViewType = data;
-    if (data === 'position') {
+    if (data === 'position') {/*
       // HACK! Quick n' dirty
       setTimeout(() => {
         this.map.render();
         let latLng = new google.maps.LatLng(this.realTimeData.position.coordinates[0], this.realTimeData.position.coordinates[1]);
         // this.map.addBusMarker(latLng, this.bus.numberPlate);
-      }, 1000);
+      }, 1000);*/
     }
   }
 

CitizenApplication/app/pages/map/map.html

@@ -7,5 +7,5 @@
 </ion-navbar>
 
 <ion-content class="map">
-  <native-map></native-map>
+  <native-map style="width: 100%; height: 100%; display: block;"></native-map>
 </ion-content>

CitizenApplication/app/pages/map/map.ts

@@ -23,16 +23,4 @@ export class MapPage {
   constructor(public nav: NavController, private config: ConfigurationService) {
     this.logger = new LoggerFactory().getLogger(config.misc.log_level, 'MapPage', config.misc.log_pretty_print);
   }
-
-  // Page has been fully rendered. We can create the map.
-  // Unfortunately I has not able to find a way how to listen
-  // to the parent's 'onPageDidEnter' event. Tus it has to bee
-  // done here. (skaldo, G2).
-  // The handler fires too early too, for now this is hacked by
-  // timeout.
-  ionViewDidEnter() {
-    setTimeout(() => {
-      this.nativeMap.render();
-    }, 250);
-  }
 }

CitizenApplication/app/pages/stop-detail/stop-detail.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {Component, ElementRef} from '@angular/core';
 import {Page, NavController, NavParams, ActionSheet} from 'ionic-angular';
 import {IStop} from '../../providers/model';
 import {BusDetailPage} from '../bus-detail/bus-detail';
@@ -18,7 +18,7 @@ import {TranslateService} from 'ng2-translate/ng2-translate';
 export class StopDetailPage {
   private stop: IStop;
   private logger: Logger;
-  constructor(public nav: NavController, private navParams: NavParams, private config: ConfigurationService, private translate: TranslateService) {
+  constructor(private element: ElementRef, public nav: NavController, private navParams: NavParams, private config: ConfigurationService, private translate: TranslateService) {
     this.stop = navParams.data;
     this.logger = new LoggerFactory().getLogger(config.misc.log_level, 'StopDetailPage', config.misc.log_pretty_print);
   }
@@ -45,4 +45,12 @@ export class StopDetailPage {
     });
     this.nav.present(actionSheet);
   }
+
+  ionViewWillEnter() {
+    this.element.nativeElement.removeAttribute('hidden');
+  }
+
+  ionViewDidLeave() {
+    this.element.nativeElement.setAttribute('hidden');
+  }
 }

CitizenApplication/app/pages/stop-list/stop-list.html

@@ -9,7 +9,7 @@
   <ion-title>StopList</ion-title>
 </ion-navbar>
 
-<ion-content class="stop-list">
+<ion-content class="stop-list" *ngIf="display">
   <ion-refresher (ionRefresh)="doRefresh($event)">
     <ion-refresher-content pullingText="{{'C.PullToRefresh' | translate}}" refreshingText="{{'C.Refreshing' | translate}}">
     </ion-refresher-content>

CitizenApplication/app/pages/stop-list/stop-list.ts

@@ -23,6 +23,8 @@ import * as moment from 'moment/moment';
   providers: [CitizenDataService],
 })
 export class StopListPage {
+  // Hides the view after it leaves.
+  public display: boolean = true;
   // private searchText: String;
   private stops: Array<ViewStop> = new Array<ViewStop>();
   private logger: Logger;
@@ -74,4 +76,12 @@ export class StopListPage {
     });
     return observable;
   }
+
+  ionViewWillEnter() {
+    this.display = true;
+  }
+
+  ionViewDidLeave() {
+    this.display = false;
+  }
 }