Compass

Obtains the direction that the device is pointing.

Permissions

Android

app/res/xml/plugins.xml

<plugin name="Compass" value="org.apache.cordova.CompassListener" />

Bada

No permissions are required.

BlackBerry WebWorks

No permissions are required.

iOS

App/Supporting Files/Cordova.plist

<key>Plugins</key>
<dict>
    <key>Compass</key>
    <string>CDVLocation</string>
</dict>

webOS

No permissions are required.

Windows Phone

Properties/WPAppManifest.xml

<Capabilities>
    <Capability Name="ID_CAP_SENSORS" />
</Capabilities>

Reference: Application Manifest for Windows Phone

compass.getCurrentHeading

Get the current compass heading.

navigator.compass.getCurrentHeading(compassSuccess, compassError, compassOptions);

Description

The compass is a sensor that detects the direction or heading that the device is pointed. It measures the heading in degrees from 0 to 359.99.

The compass heading information is returned via a CompassHeading object using the compassSuccess callback function.

Supported Platforms

Android
iPhone
Windows Phone 7 ( Mango ) if available in hardware
Bada 1.2 & 2.x
webOS

Quick Example

function onSuccess(heading) {
    alert('Heading: ' + heading.magneticHeading);
};

function onError(error) {
    alert('CompassError: ' + error.code);
};

navigator.compass.getCurrentHeading(onSuccess, onError);

Full Example

<!DOCTYPE html>
<html>
  <head>
    <title>Compass Example</title>

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

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //
    function onDeviceReady() {
        navigator.compass.getCurrentHeading(onSuccess, onError);
    }

    // onSuccess: Get the current heading
    //
    function onSuccess(heading) {
        alert('Heading: ' + heading.magneticHeading);
    }

    // onError: Failed to get the heading
    //
    function onError(compassError) {
        alert('Compass Error: ' + compassError.code);
    }

    </script>
  </head>
  <body>
    <h1>Example</h1>
    <p>getCurrentHeading</p>
  </body>
</html>

compass.watchHeading

At a regular interval, get the compass heading in degrees.

var watchID = navigator.compass.watchHeading(compassSuccess, compassError, [compassOptions]);

Description

The compass is a sensor that detects the direction or heading that the device is pointed. It measures the heading in degrees from 0 to 359.99.

The compass.watchHeading gets the device's current heading at a regular interval. Each time the heading is retrieved, the headingSuccess callback function is executed. Specify the interval in milliseconds via the frequency parameter in the compassOptions object.

The returned watch ID references references the compass watch interval. The watch ID can be used with compass.clearWatch to stop watching the compass.

Supported Platforms

Android
iPhone
Windows Phone 7 ( Mango ) if available in hardware
Bada 1.2 & 2.x
webOS

Quick Example

function onSuccess(heading) {
    var element = document.getElementById('heading');
    element.innerHTML = 'Heading: ' + heading.magneticHeading;
};

function onError(compassError) {
        alert('Compass error: ' + compassError.code);
};

var options = { frequency: 3000 };  // Update every 3 seconds

var watchID = navigator.compass.watchHeading(onSuccess, onError, options);

Full Example

<!DOCTYPE html>
<html>
  <head>
    <title>Compass Example</title>

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

    // The watch id references the current `watchHeading`
    var watchID = null;

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //
    function onDeviceReady() {
        startWatch();
    }

    // Start watching the compass
    //
    function startWatch() {

        // Update compass every 3 seconds
        var options = { frequency: 3000 };

        watchID = navigator.compass.watchHeading(onSuccess, onError, options);
    }

    // Stop watching the compass
    //
    function stopWatch() {
        if (watchID) {
            navigator.compass.clearWatch(watchID);
            watchID = null;
        }
    }

    // onSuccess: Get the current heading
    //
    function onSuccess(heading) {
        var element = document.getElementById('heading');
        element.innerHTML = 'Heading: ' + heading.magneticHeading;
    }

    // onError: Failed to get the heading
    //
    function onError(compassError) {
        alert('Compass error: ' + compassError.code);
    }

    </script>
  </head>
  <body>
    <div id="heading">Waiting for heading...</div>
    <button onclick="startWatch();">Start Watching</button>
    <button onclick="stopWatch();">Stop Watching</button>
  </body>
</html>

iOS Quirks

In iOS compass.watchHeading can also get the device's current heading when it changes by a specified number of degrees. Each time the heading changes by the specified number of degrees or more, the headingSuccess callback function is called. Specify the degrees of change via the filter parameter in the compassOptions object. Clear the watch as normal by passing the returned watch ID to compass.clearWatch. This functionality replaces the previously separate, iOS only functions, watchHeadingFilter and clearWatchFilter, which were removed in 1.6.

In iOS only one watchHeading can be in effect at one time. If a watchHeading via filter is in effect, calling getCurrentHeading or watchHeading will use the existing filter value for specifying heading changes. On iOS watching heading changes via a filter is more efficient than via time.

compass.clearWatch

Stop watching the compass referenced by the watch ID parameter.

navigator.compass.clearWatch(watchID);

watchID: The ID returned by compass.watchHeading.

Supported Platforms

Android
iPhone
Windows Phone 7 ( Mango ) if available in hardware
Bada 1.2 & 2.x
webOS

Quick Example

var watchID = navigator.compass.watchHeading(onSuccess, onError, options);

// ... later on ...

navigator.compass.clearWatch(watchID);

Full Example

<!DOCTYPE html>
<html>
  <head>
    <title>Compass Example</title>

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

    // The watch id references the current `watchHeading`
    var watchID = null;

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //
    function onDeviceReady() {
        startWatch();
    }

    // Start watching the compass
    //
    function startWatch() {

        // Update compass every 3 seconds
        var options = { frequency: 3000 };

        watchID = navigator.compass.watchHeading(onSuccess, onError, options);
    }

    // Stop watching the compass
    //
    function stopWatch() {
        if (watchID) {
            navigator.compass.clearWatch(watchID);
            watchID = null;
        }
    }

    // onSuccess: Get the current heading
    //
    function onSuccess(heading) {
        var element = document.getElementById('heading');
        element.innerHTML = 'Heading: ' + heading.magneticHeading;
    }

    // onError: Failed to get the heading
    //
    function onError(compassError) {
        alert('Compass error: ' + compassError.code);
    }


    </script>
  </head>
  <body>
    <div id="heading">Waiting for heading...</div>
    <button onclick="startWatch();">Start Watching</button>
    <button onclick="stopWatch();">Stop Watching</button>
  </body>
</html>

compass.watchHeadingFilter

No longer supported as of 1.6, see compass.watchHeading for equivalent functionality.

compass.clearWatchFilter

No longer supported as of 1.6. See compass.clearWatch.

compassSuccess

onSuccess callback function that provides the compass heading information via a compassHeading object.

function(heading) {
    // Do something
}

Parameters

heading: The heading information. (compassHeading)

Example

function onSuccess(heading) {
    alert('Heading: ' + heading.magneticHeading);
};

compassError

onError callback function for compass functions.

Example

function(CompassError) { // Handle the error }

compassOptions

An optional parameter to customize the retrieval of the compass.

Options

frequency: How often to retrieve the compass heading in milliseconds. (Number) (Default: 100)
filter: The change in degrees required to initiate a watchHeading success callback. (Number)

Android Quirks

filter is not supported.

Windows Phone 7 Quirks

filter is not supported.

Bada Quirks

filter is not supported.

compassHeading

A CompassHeading object is returned to the compassSuccess callback function when an error occurs.

Properties

magneticHeading: The heading in degrees from 0 - 359.99 at a single moment in time. (Number)
trueHeading: The heading relative to the geographic North Pole in degrees 0 - 359.99 at a single moment in time. A negative value indicates that the true heading could not be determined. (Number)
headingAccuracy: The deviation in degrees between the reported heading and the true heading. (Number)
timestamp: The time at which this heading was determined. (milliseconds)

Description

The CompassHeading object is returned to the user through the compassSuccess callback function.

Android Quirks

trueHeading is not supported. It will report the same value as magneticHeading
headingAccuracy will always be 0 as there is no difference between the magneticHeading and trueHeading on Android.

iOS Quirks

trueHeading is only returned when location services are running via navigator.geolocation.watchLocation()
For iOS > 4 devices, if the device is rotated and the app supports that orientation, the heading values will be reported back with respect to the current orientation.