Many modern mobile devices include an accelerometer and a gyroscope specifically designed to capture the device's orientation and motion values. The HTML5 Device Orientation Event Specification defines DOM events that provide information about the orientation and motion of the device. It helps to have a visual representation of these events before using them.
The image above overlays the standard coordinate frame relative to a mobile device in the portrait orientation. The three axis are:
beta
degrees.gamma
degrees.alpha
degreesObtaining data related to device orientation and motion exploits new ways for your users to interact with the map and your application. Here are several examples that take advantage of orientation and motion:
DeviceOrientationEvent Reference
// listen for changes in orientation on the device dojo.connect(window, "deviceorientation", handleOrientationEvent(event)); /** * Handle orientation events */ function handleOrientationEvent(event) { // motion of the device around the x axis var x = event.beta; // motion of the device around the y axis var y = event.gamma; // motion of the device around the z axis var z = event.alpha; // Do something with the map... }
DeviceMotionEvent Reference.
// listen for motion events on the device dojo.connect(window, "devicemotion", handleMotionEvent(event)); /** * Handle motion events */ function handleMotionEvent(event) { // accelerationIncludingGravity is the acceleration of the device, including the effect of gravity var x = event.accelerationIncludingGravity.x; var y = event.accelerationIncludingGravity.y; var z = event.accelerationIncludingGravity.z; // Do something with the map... }