The Ionic 2 framework offers Geolocation plugin to get the latitude and longitude. The Geolocation plugin will throw an error if the location is not enabled.

You can use the Diagnostic plugin to check whether the GPS(Geolocation) is enabled or not on the device. The diagnostic plugin is used to check many properties such as wifi, camera etc.

In this tutorial, you will learn, how to use the Ionic 2 native Diagnostic plugin to check whether the location service is enabled or not.

Here we are going to test this feature using 

1. Genymotion(Android Emulator)
2. Xcode Emulator(iOS)

 
Create a new Ionic 2 project using the below command.

ionic start gps blank --v2

Install the Diagnostic plugin

ionic plugin add cordova.plugins.diagnostic
npm install --save @ionic-native/diagnostic

Now import the diagnostic plugin to app.module.ts file.

import { Diagnostic } from '@ionic-native/diagnostic';

Include the Diagnostic class to the provider using

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

Import the Diagnostic, Platform classes to the home.ts file using

import { Diagnostic } from '@ionic-native/diagnostic';
import { Platform } from 'ionic-angular';

Now create a reference in the constructor

constructor(private diagnostic: Diagnostic,
public platform: Platform) {


}

Now place the below code inside the HomePage class

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

this.diagnostic.isLocationEnabled().then(
(isAvailable) => {
console.log('Is available? ' + isAvailable);
alert('Is available? ' + isAvailable);
}).catch( (e) => {
console.log(e);
alert(JSON.stringify(e));
});


});
}

Create a button on the home.html file and create a click event.

<button ion-button (click)="checkLocation()">
Is Location Available?
</button>

The full source code
home.html

<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 (click)="checkLocation()">
Is Location Available?
</button>
</ion-content>


home.ts

import { Component } from '@angular/core';
import { Diagnostic } from '@ionic-native/diagnostic';
import { Platform } from 'ionic-angular';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {

constructor(private diagnostic: Diagnostic,
public platform: Platform) {


}


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

this.diagnostic.isLocationEnabled().then(
(isAvailable) => {
console.log('Is available? ' + isAvailable);
alert('Is available? ' + isAvailable);
}).catch( (e) => {
console.log(e);
alert(JSON.stringify(e));
});


});
}

}


The above example loads the Diagnostic plugin when the device platform is ready. And gives the location availability in the alert box using the alert function. if you click the button, it will notify us about location availability when the device platform is ready.

In Mac, the iOS platform is added by default to the Ionic 2 project. To run this Ionic 2 project on the iOS emulator use below command.

ionic run ios

You can enable or disable the location service on the emulator.

Go to settings

Click the Privacy.

Enable or disable Location service.

Use the below command to add the Android platform

ionic platform add android

To run on the Genymotion emulator

ionic run android

You can enable or disable location service on the Genymotion emulator.

Go to settings.

Click the location


Supported platforms

Android
iOS


Tested Device:

iPhone SE emulator
Google Nexus 5 Emulator

Below is the Ionic2 information while writing this tutorial.

Cordova CLI: 6.5.0 
Ionic Framework Version: 3.2.1
Ionic CLI Version: 2.2.1
Ionic App Lib Version: 2.2.0
Ionic App Scripts Version: 1.3.7
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