In this tutorial, you will learn, how to enable the Location option without leaving the application. This can be done by using the Ionic2 Location Accuracy plugin. You can check out the latest location enable option from the popular applications.

Preview of Google Map Location Enable.

Preview of Ola app Location Enable.

Preview of Location Accuracy Enable plugin using the Android Device(Tested with Moto G4 Plus).

At the end of the tutorial, you can see the iOS preview of the Location Accuracy plugin.

To enable the location, previously we used the switchToLocationSettings() function of the Diagnostic plugin. The switchToLocationSettings() function leaves the application page and opens the settings page to enable the location manually. This will be an annoying process. This can be solved using the Location Accuracy plugin. By using the Location Accuracy plugin, you can ask the user to enable the location without leaving the application page.


Create a new Ionic 2 project using the below command.

ionic start gps blank --v2

Note: The --v2 removed from the newest installation of the Ionic software. However, you can use the --v2, if you are still using the previously installed Ionic.

Now install the Location Accuracy Plugin.

cd gps
ionic plugin add cordova-plugin-request-location-accuracy --save
npm install --save @ionic-native/location-accuracy

Import the  Location Accuracy class to the app.module.ts file.

import { LocationAccuracy } from '@ionic-native/location-accuracy';

Include the Location Accuracy class to the provider using the app.module.ts file.

providers: [LocationAccuracy,
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]

Import the  Location Accuracy class to the home.ts file.

import { LocationAccuracy } from '@ionic-native/location-accuracy';

Create a reference variable using the constructor.

constructor(private locationAccuracy: LocationAccuracy)
{

}

Now create a function inside the HomePage class.

enableLocation()
{
}

Call the Location Accuracy canRequest() and request() function like below.

enableLocation()
{
this.locationAccuracy.canRequest().then((canRequest: boolean) => {

if(canRequest) {
// the accuracy option will be ignored by iOS
this.locationAccuracy.request(this.locationAccuracy.REQUEST_PRIORITY_HIGH_ACCURACY).then(
() => alert('Request successful'),
error => alert('Error requesting location permissions'+JSON.stringify(error))
);
}

});
}

Now create a button in the home.html file and call the click event function.

<button ion-button color="danger" (click)="enableLocation()"> Location </button>

That's all. Every thing is ready. Generate APK and test it with your device.

To generate APK, first, add the Android platform to this project using the below command.

ionic platform add android

Generate the APK using the below command.

ionic build android

That's all. You are done. The APK is generated and test it with your Android Device.

If your Android device is connected to the System/Laptop, you can directly deploy the APK using the below command.

ionic run android

Tested Device:
Moto G4 Plus

Below is the Ionic 2 software information while writing this tutorial.

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.6.0
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 2.1.4
ios-deploy version: Not installed
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.10.0
Xcode version: Xcode 8.2.1

Below is the Ionic 2 Location Accuracy plugins information.

cordova-plugin-request-location-accuracy 2.2.2 "Request Location Accuracy"

You can get the plugin information using the below command.

ionic plugins list

The Location Accuracy plugin does not work as same as like Android in iOS. The iOS device will open the setting option to enable the Location.

Use the below command to preview it in the iOS emulator.

ionic platform add ios
ionic run ios

Preview of the Location Accuracy plugin using the iPhone SE emulator(Xcode).

Home.html source code.

<ion-header>
<ion-navbar>
<ion-title>
Ionic Blank
</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
The world is your oyster.
<p>
If you get lost, the <a href="http://ionicframework.com/docs/v2">docs</a> will be your guide.
</p>

<button ion-button color="danger" (click)="enableLocation()"> Location </button>

</ion-content>

Home.ts source code.
 

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { LocationAccuracy } from '@ionic-native/location-accuracy';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

constructor(private locationAccuracy: LocationAccuracy)
{

}
enableLocation()
{
this.locationAccuracy.canRequest().then((canRequest: boolean) => {

if(canRequest) {
// the accuracy option will be ignored by iOS
this.locationAccuracy.request(this.locationAccuracy.REQUEST_PRIORITY_HIGH_ACCURACY).then(
() => alert('Request successful'),
error => alert('Error requesting location permissions'+JSON.stringify(error))
);
}

});
}

}