Many new computers, and especially mobile phones and tablets, provide hardware support to track their orientation. The HTML 5 specification defines the DeviceOrientation API to expose this information. Just as with the Geolocation API, OpenLayers provides the ol.DeviceOrientation class to make it easier to work with this API in a stable, cross-browser compatible way.

Device orientation refers to the orientation of the mobile device relative to a common starting point. A device's orientation is then reported as angles of rotation from this common reference orientation. For mobile devices, the reference orientation is defined as the phone lying face up on a table with the top of the phone pointing north. For computers, it is the same, except the screen is open at 90 degrees. This represents the zero state, and all angles are reported relative to this state.

Device orientation is reported as three angles—alpha, beta, and gamma—relative to the starting orientation along the three planar axes X, Y, and Z. The X axis runs from the left edge to the right edge through the middle of the device. Similarly, the Y axis runs from the bottom to the top of the device through the middle. The Z axis runs from the back to the front through the middle. In the starting position, the X axis points to the right, the Y axis points away from you, and the Z axis points straight up from the device lying flat, as shown in the following screenshot:

In practice, this allows us to respond to the user turning and tilting the device. The most useful property is the value of alpha, which lets us figure out where the compass heading the device is pointing at. Let's see this in action!