Permalink
Browse files

Step 12.13: Implement location message component

  • Loading branch information...
dotansimha authored and darkbasic committed Jan 24, 2017
1 parent 88b5fb0 commit 15f02f3b92fd860e0db4c4d0a308534be7697853
Showing with 78 additions and 0 deletions.
  1. +2 −0 src/app/app.module.ts
  2. +76 −0 src/pages/messages/location-message.ts
View
@@ -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
]
@@ -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
});
}
}

0 comments on commit 15f02f3

Please sign in to comment.