---
title: "Cordova – Using Compass for Device Orientation"
description: "The smartphones have a built in small component called magnetometer, which can measure the Earth’s magnetic field. The information is then combined wi"
author: "Anonymous User"
published: 2017-04-22
updated: 2018-03-19
canonical: https://www.mindstick.com/blog/11362/cordova-using-compass-for-device-orientation
category: "apache cordova"
tags: ["mobile development", "apache", "cordova"]
reading_time: 3 minutes
---
# Cordova – Using Compass for Device Orientation
The smartphones have a built in small [component](https://www.mindstick.com/articles/12262/learn-how-to-make-a-component-in-magento-2) called **magnetometer**, which can measure the Earth’s [magnetic field](https://www.mindstick.com/news/1622/astronomers-made-a-discovery-of-a-supermassive-black-hole-with-a-flipped-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](https://www.mindstick.com/interview/2604/what-is-orientation).
The compass determines the [north and south](https://answers.mindstick.com/qa/43101/david-walker-effectively-compared-the-state-of-the-black-person-in-both-the-north-and-south-what-were-the) directions due to the magnet’s [interaction](https://yourviews.mindstick.com/view/80771/technology-is-destroying-human-interaction-how) 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](https://answers.mindstick.com/qa/51716/how-to-make-bootable-pendrive-using-cmd-windows-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
```
```
**Step 3 - Adding [Event Listeners](https://www.mindstick.com/forum/159117/how-do-you-handle-events-using-jquery-and-attach-event-listeners-to-elements)**
Now we will [add event](https://answers.mindstick.com/qa/93763/how-to-add-event-handlers-on-html-elements-by-javascript) 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](https://www.mindstick.com/forum/156103/what-will-be-your-approach-if-your-seo-method-doesn-t-work) device doesn't have it, you will get the following error. we will also show you [error code](https://www.mindstick.com/blog/114552/how-to-fix-mozilla-firefox-error-code-2324) this time.
\
---
Original Source: https://www.mindstick.com/blog/11362/cordova-using-compass-for-device-orientation
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.