How to enable GPS in Ionic without leaving the application, a great user experience is the key to success.
A user-friendly application doesn’t get created in one day; rather, it is developed gradually by taking care of even the smaller things.
In this Ionic GPS tutorial, we will help you learn how to turn on your device’s GPS (Global Positioning System) and that too, even without leaving the existing application.
Ideally, it becomes a little annoying when you have to follow the complete process when you have to pull out of the current app and head over to settings to switch on the GPS.
Nonetheless, we will make your life facile by creating a small feature in which you can switch on GPS in Ionic without leaving the app using Ionic native and Cordova plugins.
Install Ionic App
Verily, it is advisable to install the Ionic CLI tool for Ionic development:
npm install -g @ionic/cli
Type suggested command in the terminal to manifest a new Ionic Angular application:
ionic start ionic-demo-app blank --type=angular
Head over to application’s root:
cd ionic-demo-app
Remove Type Errors
You have to remove strict type errors make sure to set “strictTemplates”: false
in angularCompilerOptions in tsconfig.json file.
Install Ionic Native and Cordova Plugins
In this second step, you have to add android permission, location accuracy, and geolocation packages. Wherefore, execute all the recommended commands from terminal:
The Android permissions plugins is developed to enhance support for new permissions checking mechanism.
ionic cordova plugin add cordova-plugin-android-permissions
npm install @ionic-native/android-permissions
This is an exclusive plugin for Android and iOS for enabling the request of Location services by manifest a native dialog through the app, bypassing the requirement for the user to move away from your app to modify the location settings manually.
ionic cordova plugin add cordova-plugin-request-location-accuracy
npm install @ionic-native/location-accuracy
This plugin offers information regarding the device’s location, for instance, latitude and longitude. Conventional location information sources involve GPS and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs.
ionic cordova plugin add cordova-plugin-geolocation
npm install @ionic-native/geolocation
Update Ionic Native and Cordova Plugins in Main Module
In this third step, you require to import LocationAccuracy, Geolocation over and above that the AndroidPermissions, additionally register these three packages consecutively inside the providers’ array.
Open and update app.module.ts file:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
// Import torch plugin
import { LocationAccuracy } from '@ionic-native/location-accuracy/ngx';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [
LocationAccuracy,
Geolocation,
AndroidPermissions,
{
provide: RouteReuseStrategy,
useClass: IonicRouteStrategy
}
],
bootstrap: [AppComponent],
})
export class AppModule {}
Enable GPS in Ionic 6 App
To turn on mobile device GPS, you have to create a button on clicking it checkPermission function wil trigger, and display longitude, latitude, location accuracy, and time stamp.
Update home.page.html component file:
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
Turn on GPS in Ionic
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-button color="danger" (click)="checkPermission()">
Enable GPS Locaction
</ion-button>
<ion-row>
<ion-col>Longtitude</ion-col>
<ion-col> {{locationCordinates.longitude}}</ion-col>
</ion-row>
<ion-row>
<ion-col>Latitude</ion-col>
<ion-col>{{locationCordinates.latitude}}</ion-col>
</ion-row>
<ion-row>
<ion-col>Location accuracy</ion-col>
<ion-col>{{locationCordinates.accuracy}}</ion-col>
</ion-row>
<ion-row>
<ion-col>Timestamp</ion-col>
<ion-col>{{locationCordinates.timestamp | date:'medium'}}</ion-col>
</ion-row>
</ion-content>
The checkPermission() method asks for location permission in android and enables the GPS; also, locationAccPermission helps enable the GPS else to throw an error. Likewise, enable GPS to look for latitude, longitude, accuracy, and timestamp.
Update home.page.ts component file:
import { Component } from '@angular/core';
import { LocationAccuracy } from '@ionic-native/location-accuracy/ngx';
import { Geolocation } from '@ionic-native/geolocation/ngx';
import { AndroidPermissions } from '@ionic-native/android-permissions/ngx';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
})
export class HomePage {
locationCordinates: any;
timestamp: any;
constructor(
private locationAccuracy: LocationAccuracy,
private geolocation: Geolocation,
private androidPermissions: AndroidPermissions
) {
this.locationCordinates = {
latitude: "",
longitude: "",
accuracy: "",
timestamp: ""
}
this.timestamp = Date.now();
}
checkPermission() {
this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.ACCESS_COARSE_LOCATION).then(
result => {
if (result.hasPermission) {
this.enableGPS();
} else {
this.locationAccPermission();
}
},
error => {
alert(error);
}
);
}
locationAccPermission() {
this.locationAccuracy.canRequest().then((canRequest: boolean) => {
if (canRequest) {
} else {
this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.ACCESS_COARSE_LOCATION)
.then(
() => {
this.enableGPS();
},
error => {
alert(error)
}
);
}
});
}
enableGPS() {
this.locationAccuracy.request(this.locationAccuracy.REQUEST_PRIORITY_HIGH_ACCURACY).then(
() => {
this.currentLocPosition()
},
error => alert(JSON.stringify(error))
);
}
currentLocPosition() {
this.geolocation.getCurrentPosition().then((response) => {
this.locationCordinates.latitude = response.coords.latitude;
this.locationCordinates.longitude = response.coords.longitude;
this.locationCordinates.accuracy = response.coords.accuracy;
this.locationCordinates.timestamp = response.timestamp;
}).catch((error) => {
alert('Error: ' + error);
});
}
}
Test Ionic GPS App
In the last eventual step, you have to run the following commands to test the application:
# iOS
ionic cordova platform add ios
# Android
ionic cordova platform add android
# Windows
ionic cordova platform add windows
In the next step create the build in ionic:
# iOS
ionic cordova build ios
# Android
ionic cordova build android
# Windows
ionic cordova build windows
Lastly, you can run app to test the feature:
# iOS
ionic cordova run ios -l
# Android
ionic cordova run android -l
# Windows
ionic cordova run windows -l
Conclusion
Throughout this Ionic GPS example, you have learned how to enable GPS in Ionic app without moving away from the current application.