α :
β :
γ :
heading :
Listen to DeviceOrientation events.
This example shows how to track changes in device orientation.
<!DOCTYPE html> <html> <head> <title>Device-Orientation example</title> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://openlayers.org/en/3.8.1/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/3.8.1/build/ol.js"></script> </head> <body> <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <div id="map" class="map"></div> <div class="span12"> <h4 id="title">Device orientation example</h4> <label class="checkbox" for="track"> <input id="track" type="checkbox"/>track changes </label> <p>α : <code id="alpha"></code></p> <p>β : <code id="beta"></code></p> <p>γ : <code id="gamma"></code></p> <p>heading : <code id="heading"></code></p> </div> </div> </div> </div> <script> var projection = ol.proj.get('EPSG:3857'); var view = new ol.View({ center: [0, 0], projection: projection, extent: projection.getExtent(), zoom: 2 }); var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], target: 'map', controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ collapsible: false }) }), view: view }); var deviceOrientation = new ol.DeviceOrientation(); function el(id) { return document.getElementById(id); } el('track').addEventListener('change', function() { deviceOrientation.setTracking(this.checked); }); deviceOrientation.on('change', function(event) { el('alpha').innerText = deviceOrientation.getAlpha() + ' [rad]'; el('beta').innerText = deviceOrientation.getBeta() + ' [rad]'; el('gamma').innerText = deviceOrientation.getGamma() + ' [rad]'; el('heading').innerText = deviceOrientation.getHeading() + ' [rad]'; }); // tilt the map deviceOrientation.on(['change:beta', 'change:gamma'], function(event) { var center = view.getCenter(); var resolution = view.getResolution(); var beta = event.target.getBeta() || 0; var gamma = event.target.getGamma() || 0; center[0] -= resolution * gamma * 25; center[1] += resolution * beta * 25; view.setCenter(view.constrainCenter(center)); }); </script> </body> </html>