A web-standards based Compass

A fully web standards compliant JavaScript 3D Compass application.


A web browser with the following web standards support:


As of 23-Jul 2012 only Opera Mobile 12 for Android has the necessary web standards support required to run this application. You can view the shiny effects in Google Chrome for Mac but the lack of a device orientation ‘alpha’ value means that the compass cannot be calibrated correctly.

Even if this worked in other browsers there is also the issue that each browser maker has implemented Device Orientation Event data completely differently to each other, making it nigh on impossible to make 3-axis orientation-based web applications such as Marine Compass work in all browsers. Hopefully this will change soon. The implementation of Marine Compass is based on the device orientation data returned by Opera Mobile 12, which I consider is the closest to the web standard as it is currently defined.


Simply clone this repo as follows:

git clone git@github.com:richtr/Marine-Compass.git

Load ‘index.html’ and enjoy!


An online demo is available here. Fork me on GitHub

Have something to add? Tweet me.