IONIC V3 & ANGULAR 5 | GEOLOCATION | ADVANCE

Share the post
Geolocation_using_ionic3_angular5

Geolocation Using Ionic 3 & Angular 5

Today, We will see How to implement Geolocation In ionic 3 & Angular 5? We will see it by example. In this topic, We will cover all the necessary steps required to implement Geolocation in an android application.

1. Generate a new page by using the command :

ionic g page geolocation

you can see here what are the different types of the command used to Generate ionic pages, components & pipes.

2.Import the module in app.module.ts :

import { BrowserModule } from ‘@angular/platform-browser’;

import { ErrorHandler, NgModule } from ‘@angular/core’;

import { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’;

import { MyApp } from ‘./app.component’;

import { HomePage } from ‘../pages/home/home’;

import { TabsPage } from ‘../pages/tabs/tabs’;

import { QrscannerPage } from ‘../pages/qrscanner/qrscanner’;

import { LocalNotificationPage } from ‘../pages/local-notification/local-notification’;

import { GeolocationPage } from ‘../pages/geolocation/geolocation’;

import { ModalPage } from ‘../pages/modal/modal’;

import { LoginPage } from ‘../pages/login/login’;

import { StatusBar } from ‘@ionic-native/status-bar’;

import { SplashScreen } from ‘@ionic-native/splash-screen’;

import { LocalNotifications } from ‘@ionic-native/local-notifications’;

import { RestProvider } from ‘../providers/rest/rest’;

import { HttpClientModule } from “@angular/common/http”;

import { CommonProvider } from ‘../providers/common/common’;

import { QRScanner, QRScannerStatus } from ‘@ionic-native/qr-scanner’;

@NgModule({

  declarations: [

    MyApp,

    HomePage,

    LoginPage,

    TabsPage,

    ModalPage,

    QrscannerPage,

    LocalNotificationPage,

    GeolocationPage

  ],

  imports: [

    BrowserModule,

    HttpClientModule,

    IonicModule.forRoot(MyApp),

  ],

  bootstrap: [IonicApp],

  entryComponents: [

    MyApp,

    HomePage,

    LoginPage,

    TabsPage,

    ModalPage,

    QrscannerPage,

    LocalNotificationPage,

    GeolocationPage

  ],

  providers: [

    StatusBar,

    SplashScreen,

    LocalNotifications,

    { provide: ErrorHandler, useClass: IonicErrorHandler },

    RestProvider,

    CommonProvider,

    QRScanner

  ]

})

export class AppModule { }

3.Update app.component.ts (Optional just to show side menu option for geolocation):

import { Component, ViewChild } from ‘@angular/core’;

import { Nav, Platform } from ‘ionic-angular’;

import { StatusBar } from ‘@ionic-native/status-bar’;

import { SplashScreen } from ‘@ionic-native/splash-screen’;

import { HomePage } from ‘../pages/home/home’;

import { LoginPage } from “../pages/login/login”;

import { TabsPage } from “../pages/tabs/tabs”;

import { QrscannerPage } from ‘../pages/qrscanner/qrscanner’;

import { LocalNotificationPage } from ‘../pages/local-notification/local-notification’;

import { GeolocationPage } from ‘../pages/geolocation/geolocation’;

@Component({

  templateUrl: ‘app.html’

})

export class MyApp {

  @ViewChild(Nav) nav: Nav;

  rootPage: any = LoginPage;

  pages: Array<{ title: string, component: any }>;

  constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen) {

    this.initializeApp();

    // used for an example of ngFor and navigation

    this.pages = [

      { title: ‘Home’, component: HomePage },

      { title: ‘Tabs’, component: TabsPage },

      {

        title: ‘QR Scanner’, component: QrscannerPage

      },

      { title: ‘Local Notification’, component: LocalNotificationPage },

      { title: ‘Geolocation’, component: GeolocationPage }

    ];

  }

  initializeApp() {

    this.platform.ready().then(() => {

      // Okay, so the platform is ready and our plugins are available.

      // Here you can do any higher level native things you might need.

      this.statusBar.styleDefault();

      this.splashScreen.hide();

    });

  }

  openPage(page) {

    // Reset the content nav to have just this page

    // we wouldn’t want the back button to show in this scenario

    this.nav.setRoot(page.component);

  }

}

4.Install plugin & dependency :

ionic cordova plugin add cordova-plugin-geolocation

npm install –save @ionic-native/geolocation@4

5.Write dependency in app.module.ts :

import { BrowserModule } from ‘@angular/platform-browser’;

import { ErrorHandler, NgModule } from ‘@angular/core’;

import { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’;

import { MyApp } from ‘./app.component’;

import { HomePage } from ‘../pages/home/home’;

import { TabsPage } from ‘../pages/tabs/tabs’;

import { QrscannerPage } from ‘../pages/qrscanner/qrscanner’;

import { LocalNotificationPage } from ‘../pages/local-notification/local-notification’;

import { GeolocationPage } from ‘../pages/geolocation/geolocation’;

import { ModalPage } from ‘../pages/modal/modal’;

import { LoginPage } from ‘../pages/login/login’;

import { StatusBar } from ‘@ionic-native/status-bar’;

import { SplashScreen } from ‘@ionic-native/splash-screen’;

import { LocalNotifications } from ‘@ionic-native/local-notifications’;

import { Geolocation } from ‘@ionic-native/geolocation’;

import { RestProvider } from ‘../providers/rest/rest’;

import { HttpClientModule } from “@angular/common/http”;

import { CommonProvider } from ‘../providers/common/common’;

import { QRScanner, QRScannerStatus } from ‘@ionic-native/qr-scanner’;

@NgModule({

declarations: [

MyApp,

HomePage,

LoginPage,

TabsPage,

ModalPage,

QrscannerPage,

LocalNotificationPage,

GeolocationPage

],

imports: [

BrowserModule,

HttpClientModule,

IonicModule.forRoot(MyApp),

],

bootstrap: [IonicApp],

entryComponents: [

MyApp,

HomePage,

LoginPage,

TabsPage,

ModalPage,

QrscannerPage,

LocalNotificationPage,

GeolocationPage

],

providers: [

StatusBar,

SplashScreen,

LocalNotifications,

Geolocation,

{ provide: ErrorHandler, useClass: IonicErrorHandler },

RestProvider,

CommonProvider,

QRScanner

]

})

export class AppModule { }

6.Write below code in geolocation.html

<!–

Generated template for the GeolocationPage page.

See http://ionicframework.com/docs/components/#navigation for more info on

Ionic pages and navigation.

–>

<ion-header>

<ion-navbar>

<ion-title>Get Geolocation</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<div padding>

<button ion-button color=”primary” block (click)=”showGeolocation()”>Show Geolocation</button>

</div>

</ion-content>

7. Write below code in geolocation.ts :

import { Component } from ‘@angular/core’;

import { IonicPage, NavController, NavParams } from ‘ionic-angular’;

import { Geolocation } from ‘@ionic-native/geolocation’;

/**

* Generated class for the GeolocationPage page.

*

* See https://ionicframework.com/docs/components/#navigation for more info on

* Ionic pages and navigation.

*/

@IonicPage()

@Component({

selector: ‘page-geolocation’,

templateUrl: ‘geolocation.html’,

})

export class GeolocationPage {

constructor(public navCtrl: NavController, public navParams: NavParams, private geolocation: Geolocation) {

}

ionViewDidLoad() {

console.log(‘ionViewDidLoad GeolocationPage’);

}

showGeolocation() {

this.geolocation.getCurrentPosition().then((resp) => {

alert(resp);

alert(“Latitude is ” + resp.coords.latitude);

alert(“Longitude is ” + resp.coords.longitude);

}).catch((error) => {

console.log(‘Error getting location’, error);

});

}

}

In the above example, We are using getCurrentPosition() method to get coordinates of the device’s current location. In the successful result of the above method, We will get a response that contains objects of latitude & longitude. As We are now able to get the device’s current location by using these co-ordinates. If you want to learn more about ionic 3 then click here.

Leave a Comment