The measurement of the geographical location of an object, such as a mobile phone, or an Internet-connected PC is its Geolocation. Basically, it involves the generation of a set of geographical coordinates and is closely related to the use of positioning systems, but its usefulness is enhanced by the use of these coordinates to determine a meaningful location, such as a street address.
Geolocation feature is used for getting device's real-time latitude and longitude with respect to its current position.
Step 1 – Install Geolocation Plugin
Open command prompt window and type the following code to install this plugin:
C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-geolocation
Step 2 - Adding Buttons
In this article you will be able to know how to get current position and how it changes with the change in location. First you need to create buttons that will call these functions.
<button id = "currentPosition">CURRENT POSITION</button>
<button id = "changePosition">WATCH POSITION</button>
Step 3 - Adding Event Listeners
Now when the device is ready, you have to add event listeners. Add the following code to onDeviceReady function in index.js file.
document.getElementById("currentPosition").addEventListener("click", currentPosition);
document.getElementById("changePosition").addEventListener("click", changePosition);
Step 3 - Creating Functions
The two functions have to be created for two event listeners.
One will be used for getting the current position and the other for changed position.
function currentPosition() {
var options = {
enableHighAccuracy: true,
maximumAge: 3600000
}
var watchID = navigator.geolocation.getCurrentPosition(onSuccess, onError, options);
function onSuccess(position) {
alert('Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude + '\n' +
'Altitude: ' + position.coords.altitude + '\n' +
'Accuracy: ' + position.coords.accuracy + '\n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' +
'Heading: ' + position.coords.heading + '\n' +
'Speed: ' + position.coords.speed + '\n' +
'Timestamp: ' + position.timestamp + '\n');
};
function onError(error) {
alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
}
}
function changePosition() {
var options = {
maximumAge: 3600000,
timeout: 3000,
enableHighAccuracy: true,
}
var watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);
function onSuccess(position) {
alert('Latitude: ' + position.coords.latitude + '\n' +
'Longitude: ' + position.coords.longitude + '\n' +
'Altitude: ' + position.coords.altitude + '\n' +
'Accuracy: ' + position.coords.accuracy + '\n' +
'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '\n' +
'Heading: ' + position.coords.heading + '\n' +
'Speed: ' + position.coords.speed + '\n' +
'Timestamp: ' + position.timestamp + '\n');
};
function onError(error) {
alert('code: ' + error.code + '\n' +'message: ' + error.message + '\n');
}
}
In example above we are using two methods − CurrentPosition and changePosition. Both the functions are using three parameters. when we click on CURRENT POSITION button, the alert will show geolocation values.
And when we click WATCH POSITION button, the same alert will be fired in every three seconds. This way we can track movement changes of the user's device.
NOTE:
This plugin uses GPS. Sometimes it can't return the values on time and the request will give time out error. That is why we specified enableHighAccuracy: true and maximumAge: 3600000.
This means that if request isn't completed on time, we will use the last known value instead.
In our example we are setting maximumAge to 3600000 milliseconds.
Also Read our previous posts:
Cordova – Displaying Device Info
Leave Comment