Step 12.13: Implement location message component

src/app/app.module.ts

@@ -3,6 +3,7 @@ import { ErrorHandler, NgModule } from '@angular/core';
 import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
 import { SplashScreen } from '@ionic-native/splash-screen';
 import { StatusBar } from '@ionic-native/status-bar';
+import { Geolocation } from '@ionic-native/geolocation';
 import { AgmCoreModule } from '@agm/core';
 import { MomentModule } from 'angular2-moment';
 import { ChatsPage } from '../pages/chats/chats';
@@ -54,6 +55,7 @@ import { MyApp } from './app.component';
   providers: [
     StatusBar,
     SplashScreen,
+    Geolocation,
     {provide: ErrorHandler, useClass: IonicErrorHandler},
     PhoneService
   ]

src/pages/messages/location-message.ts

@@ -0,0 +1,76 @@
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { Platform, ViewController } from 'ionic-angular';
+import { Geolocation } from '@ionic-native/geolocation';
+import { Location } from 'api/models';
+import { Observable, Subscription } from 'rxjs';
+
+const DEFAULT_ZOOM = 8;
+const EQUATOR = 40075004;
+const DEFAULT_LAT = 51.678418;
+const DEFAULT_LNG = 7.809007;
+const LOCATION_REFRESH_INTERVAL = 500;
+
+@Component({
+  selector: 'location-message',
+  templateUrl: 'location-message.html'
+})
+export class NewLocationMessageComponent implements OnInit, OnDestroy {
+  lat: number = DEFAULT_LAT;
+  lng: number = DEFAULT_LNG;
+  zoom: number = DEFAULT_ZOOM;
+  accuracy: number = -1;
+  intervalObs: Subscription;
+
+  constructor(private platform: Platform,
+              private viewCtrl: ViewController,
+              private geolocation: Geolocation) {
+  }
+
+  ngOnInit() {
+    // Refresh location at a specific refresh rate
+    this.intervalObs = this.reloadLocation()
+      .flatMapTo(Observable
+        .interval(LOCATION_REFRESH_INTERVAL)
+        .timeInterval())
+      .subscribe(() => {
+        this.reloadLocation();
+      });
+  }
+
+  ngOnDestroy() {
+    // Dispose subscription
+    if (this.intervalObs) {
+      this.intervalObs.unsubscribe();
+    }
+  }
+
+  calculateZoomByAccureacy(accuracy: number): number {
+    // Source: http://stackoverflow.com/a/25143326
+    const deviceHeight = this.platform.height();
+    const deviceWidth = this.platform.width();
+    const screenSize = Math.min(deviceWidth, deviceHeight);
+    const requiredMpp = accuracy / screenSize;
+
+    return ((Math.log(EQUATOR / (256 * requiredMpp))) / Math.log(2)) + 1;
+  }
+
+  reloadLocation() {
+    return Observable.fromPromise(this.geolocation.getCurrentPosition().then((position) => {
+      if (this.lat && this.lng) {
+        // Update view-models to represent the current geo-location
+        this.accuracy = position.coords.accuracy;
+        this.lat = position.coords.latitude;
+        this.lng = position.coords.longitude;
+        this.zoom = this.calculateZoomByAccureacy(this.accuracy);
+      }
+    }));
+  }
+
+  sendLocation() {
+    this.viewCtrl.dismiss(<Location>{
+      lat: this.lat,
+      lng: this.lng,
+      zoom: this.zoom
+    });
+  }
+}