Compass.js allows you to get compass heading in JavaScript. Today we haven’t any standard way to get compass data, but there are two proprietary APIs and one hack:
navigator.compass
API.webkitCompassHeading
property to deviceorientation
event.deviceorientation
event. Next we use this difference to get compass heading
only by device orientation.This library hides all this magic and APIs from you, autodetects available way and provides clean and simple API for your geolocation web app.
Hide compass for desktop users (without compass, GPS and accelerometers):
Compass.noSupport(function () {
$('.compass').hide();
});
Show instructions for Android users:
Compass.needGPS(function () {
$('.go-outside-message').show(); // Step 1: we need GPS signal
}).needMove(function () {
$('.go-outside-message').hide()
$('.move-and-hold-ahead-message').show(); // Step 2: user must go forward
}).init(function () {
$('.move-and-hold-ahead-message').hide(); // GPS hack is enabled
});
Add compass heading listener:
Compass.watch(function (heading) {
$('.degrees').text(heading);
$('.compass').css('transform', 'rotate(' + (-heading) + 'deg)');
});
Library will detect method asynchronously, so you can’t just read
Compass.method
, because it can be empty yet. It will be better to
use Compass.init
method:
Compass.init(function (method) {
console.log('Compass heading by ' + method);
});
If library is already initialized, callback will be executed instantly, without reinitialization.
You can remove compass listener by Compass.unwatch
method:
var watchID = Compass.watch(function (heading) {
$('.degrees').text(heading);
});
Compass.unwatch(watchID);
For Ruby on Rails you can use gem for Assets Pipeline.
Add compassjs
gem to Gemfile
:
gem "compassjs"
Install gems:
bundle install
Include Compass.js to your application.js.coffee
:
#= require compass
If you don’t use any assets packaging manager (it’s very bad idea), you can use already minified version of the library.
Take it from: ai.github.com/compass.js/compass.js.