The smartphones have a built in small component called magnetometer, which can measure the Earth’s magnetic field. The information is then combined with an accelerometer that fetches information regarding the phone’s position in space. The information provided by these devices means that the compass app can display cardinal directions without any regard of the phone orientation.

The compass determines the north and south directions due to the magnet’s interaction in the device with the magnetic field of the Earth.

It may be possible that compass does not work on some devices as accelerometer and magnetic sensor are almost similar, so most devices don't have magnetic sensor that is needed for compass to work.

Compass is used to show directions relative to geographic north cardinal point.

Step 1 - Installing Device Orientation plugin

You have to install the device-orientation plugin by typing & running the following code in the command prompt window.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-device-orientation

Step 2 - Add Buttons

If you followed our previous post you will possibly notice that this plugin is almost similar to acceleration plugin. We will follow the same concept in this tutorial. In this also you will create two buttons in index.html

<button id = "currentOrientation">GET ORIENTATION</button>

<button id = "changeOrientation">WATCH ORIENTATION</button>

 Step 3 - Adding Event Listeners

Now we will add event listeners inside onDeviceReady function in index.js.

document.getElementById("currentOrientation").addEventListener("click", currentOrientation);
document.getElementById("changeOrientation").addEventListener("click", changeOrientation);

 Step 4 - Create Functions

You have to create two functions, one to get the current acceleration and the other to see changes in orientation. You can see that we are using frequency option again because we want to monitor changes for every three seconds.

function currentOrientation(){

   navigator.compass.getCurrentHeading(compassSuccess, compassError);

   function compassSuccess(heading) {

      alert('Heading: ' + heading.magneticHeading);

   };

   function compassError(error) {

      alert('CompassError: ' + error.code);

   };  

}

function changeOrientation(){

   var compassOptions = {

      frequency: 3000

   }

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

   function compassSuccess(heading) {

      alert('Heading: ' + heading.magneticHeading);

      setTimeout(function() {

         navigator.compass.clearWatch(watchID);

      }, 10000);

   };

   function compassError(error) {

      alert('CompassError: ' + error.code);

   };                                                   

}

If your device doesn't have it, you will get the following error. we will also show you error code this time.