ARTICLE

Geolocation in PhoneGap

Posted by Richa Garg Articles | Windows Phone July 30, 2012
In this article I explain how to use the Geolocation in Apache Cordova/PhoneGap, also the various methods and parameters of Geolocation of Cordova.
Reader Level:

Introduction

The geolocation object can provides access to the device's GPS sensor. It provides the location information such as latitude and longitude. The common source of location information is the GPS (that is, Global Positioning System) and the location inferred from the network signals, such as IP address, WiFi etc. There are various methods that we use for Geolocation; they are described in the following.

1 ) geolocation.getCurrentPosition

This method can be used to return the device's current position as a position object. This method take three parameters:

geolocationSuccess: When the location of the geolocation position is available then it calls the user's callback function, that means if the location is found or available then their is a success, it take one parameter that returns the geolocation position returned by the device.

geolocationError:  When the location is not available then the user callback function that shows the error for geolocation functions takes one parameter that returns the error that is returned by the device.

geolocationOption:  It is an optional parameter to customize the retreval of the geolocation position.

The geolocation.getCurrentPosition is an asynchronous function that supports the platform such as Android, BlackBerry WebWorks (OS 5.0 and higher), iOS, Window Phone 7 (Mango), Bada 1.2 & 2.x and webOS. The syntax is:

navigator.geolocation.getCurrentPosition( geolocationSuccess, [geolocationError],[ geolocationOption]);

Example

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title>Cordova WP7</title>

    <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title"

        charset="utf-8" />

    <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>

    <script type="text/javascript">

        // Wait for Cordova to load 

        document.addEventListener("deviceready", onDeviceReady, false);

        // Cordova is ready      

        function onDeviceReady() {

            navigator.geolocation.getCurrentPosition(onSuccess, onError);

        }

        // onSuccess Geolocation      

        function onSuccess(position) {

            var element = document.getElementById('geolocation');

            element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +

                            'Longitude: ' + position.coords.longitude + '<br />' +

                            'Altitude: ' + position.coords.altitude + '<br />' +

                            'Accuracy: ' + position.coords.accuracy + '<br />' +

                            'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' +

                            'Heading: ' + position.coords.heading + '<br />' +

                            'Speed: ' + position.coords.speed + '<br />' +

                            'Timestamp: ' + position.timestamp + '<br />';

        }

        // onError Callback receives a PositionError object     

        function onError(error) {

            alert('code: ' + error.code + '\n' +

              'message: ' + error.message + '\n');

        }

    </script>

</head>

<body>

    <p id="geolocation">

        Finding geolocation...</p>

</body>

</html>

In this example I use the same properties like:

latitude : Used to give the latitude information in decimal degrees (numbers).
longitude : Longitude information in decimal degrees.
altitude : It denotes the height of the position in meters.
accuracy : Accuracy level of the latitude and longitude cordinates in meters.
altitudeAccuracy : Accuracy level of the altitude coordinate in meters.
heading : It denotes the direction of travel, specified in degrees counting clockwise relative to north.
speed : It denotes the current speed of the device that is specified in meters per second.

The output of the above code is:

phonegap1.gif

2) geolocation.watchPosition

This method watches for the changes to the device's current position; it returns the string that is a watch id that references the watch position interval. It is an asynchronous function that supports
the platform such as Android, BlackBerry WebWorks (OS 5.0 and higher) ,iOS, Window Phone 7(Mango), Bada 1.2 & 2.x and webOS. It also has the three parameters geolocationSuccess, geolocationError and geolocationOption. The syntax is:

var watchId= navigator.geolocation.watchPosition( geolocationSuccess,[geolocationError],[geolocationOptions]);

Example
 

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title>Cordova WP7</title>

    <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title"

        charset="utf-8" />

    <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>

    <script type="text/javascript">

        // Wait for Cordova to load     

        document.addEventListener("deviceready", onDeviceReady, false);

        var watchID = null;

        // Cordova is ready

        function onDeviceReady() {

            // Throw an error if no update is received every 30 seconds

            var options = { timeout: 30000 };

            watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);

        }

        // onSuccess Geolocation

        function onSuccess(position) {

            var element = document.getElementById('geolocation');

            element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +

                            'Longitude: ' + position.coords.longitude + '<br />' +

                            '<hr />' + element.innerHTML;

        }

        // onError Callback receives a PositionError object

        function onError(error) {

            alert('code: ' + error.code + '\n' +

              'message: ' + error.message + '\n');

        }

    </script>

  </head>

  <body>

    <p id="geolocation">Watching geolocation...</p>

  </body>

</html>

The output of this is:

phonegap2.gif

3) geolocation.clearWatch

This method is used so that it stops watching for changes to the device's location referenced by the watchID parameter. This method takes a parameter that is watchId that is the id of the watchposition interval to clear. The supported platforms are Android, BlackBerry WebWorks (OS 5.0 and higher), iOS, Windows Phone 7 (Mango), Bada 1.2 & 2.x and webOS. It also has the three parameters geolocationSuccess, geolocationError and geolocationOption. The syntax is:

navigator.geolocation.clearWatch(watchId);

Example
 

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

    <title>Cordova WP7</title>

    <link rel="stylesheet" href="master.css" type="text/css" media="screen" title="no title"

        charset="utf-8" />

    <script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>

    <script type="text/javascript">

        // Wait for Cordova to load      

        document.addEventListener("deviceready", onDeviceReady, false);

        var watchID = null;

        // Cordova is ready

        function onDeviceReady() {

            // Get the most accurate position updates available on the

            // device.

            var options = { enableHighAccuracy: true };

            watchID = navigator.geolocation.watchPosition(onSuccess, onError, options);

        }

        // onSuccess Geolocation       

        function onSuccess(position) {

            var element = document.getElementById('geolocation');

            element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' +

                            'Longitude: ' + position.coords.longitude + '<br />' +

                            '<hr />' + element.innerHTML;

        }

        // clear the watch that was started earlier      

        function clearWatch() {

            if (watchID != null) {

                navigator.geolocation.clearWatch(watchID);

                watchID = null;

            }

        }

        // onError Callback receives a PositionError object    

        function onError(error) {

            alert('code: ' + error.code + '\n' +

            'message: ' + error.message + '\n');

        }

    </script>

  </head>

  <body>

    <p id="geolocation">Watching geolocation...</p>

    <button onclick="clearWatch();">Clear Watch</button>    

  </body>

</html>

The Output is as

phonegap3.gif


Summary  :  In this article I explained the geolocation of Apache Cordova/PhoneGap.

COMMENT USING

Trending up