Device Orientation

This example uses OpenLayers v4.0.1. The latest is v.

#### Device Orientation

track changes

α : `` β : `` γ : `` heading : ``

Listen to DeviceOrientation events.

This example shows how to track changes in device orientation.

Related API documentation:

- ol.DeviceOrientation
,
- ol.Map
,
- ol.View
,
- ol.control
,
- ol.layer.Tile
,
- ol.proj
,
- ol.source.OSM

Copy Edit
Device Orientation Listen to DeviceOrientation events. 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() { 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)); }); <div id="map" class="map"></div> <label> track changes <input id="track" type="checkbox"/> </label> <p> α : <code id="alpha"></code>&nbsp;&nbsp; β : <code id="beta"></code>&nbsp;&nbsp; γ : <code id="gamma"></code>&nbsp;&nbsp; heading : <code id="heading"></code> </p>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Device Orientation</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.0.1/build/ol.js"></script>
      </head>
      <body>
        <div id="map" class="map"></div>
        <label>
          track changes
          <input id="track" type="checkbox"/>
        </label>
        <p>
          α : <code id="alpha"></code>&nbsp;&nbsp;
          β : <code id="beta"></code>&nbsp;&nbsp;
          γ : <code id="gamma"></code>&nbsp;&nbsp;
          heading : <code id="heading"></code>
        </p>
        <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() {
            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>