Deprecate ol.DeviceOrientation

changelog/upgrade-notes.md

@@ -31,6 +31,12 @@ tile.setLoader(function() {
 );
 ```
 
+#### Deprecation of `ol.DeviceOrientation`
+
+`ol.DeviceOrientation` is deprecated and will be removed in the next major version.
+The device-orientation example has been updated to use the (gyronorm.js)[https://github.com/dorukeker/gyronorm.js] library.
+
+
 ### v4.3.0
 
 #### `ol.source.VectorTile` no longer requires a `tileGrid` option

examples/.eslintrc

@@ -6,6 +6,7 @@
     "createMapboxStreetsV6Style": false,
     "d3": false,
     "geojsonvt": false,
+    "GyroNorm": false,
     "jsPDF": false,
     "jsts": false,
     "saveAs": false,

examples/device-orientation.html

@@ -4,16 +4,15 @@ title: Device Orientation
 shortdesc: Listen to DeviceOrientation events.
 docs: >
   This example shows how to track changes in device orientation.
-tags: "orientation, openstreetmap"
+  [gyronorm.js](https://github.com/dorukeker/gyronorm.js) library is used to access and
+  normalize the events from the browser.
+tags: "device, orientation, gyronorm"
+resources:
+  - https://cdn.rawgit.com/dorukeker/gyronorm.js/v2.0.6/dist/gyronorm.complete.min.js
 ---
 <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>
+  <div>α : <code id="alpha"></code></div>
+  <div>β : <code id="beta"></code></div>
+  <div>γ : <code id="gamma"></code></div>
 </p>

examples/device-orientation.js

@@ -1,8 +1,9 @@
-goog.require('ol.DeviceOrientation');
+// NOCOMPILE
 goog.require('ol.Map');
 goog.require('ol.View');
 goog.require('ol.control');
 goog.require('ol.layer.Tile');
+goog.require('ol.math');
 goog.require('ol.proj');
 goog.require('ol.source.OSM');
 
@@ -28,32 +29,28 @@ var map = new ol.Map({
   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));
+
+var gn = new GyroNorm();
+
+gn.init().then(function() {
+  gn.start(function(event) {
+    var center = view.getCenter();
+    var resolution = view.getResolution();
+    var alpha = ol.math.toRadians(event.do.beta);
+    var beta = ol.math.toRadians(event.do.beta);
+    var gamma = ol.math.toRadians(event.do.gamma);
+
+    el('alpha').innerText = alpha + ' [rad]';
+    el('beta').innerText = beta + ' [rad]';
+    el('gamma').innerText = gamma + ' [rad]';
+
+    center[0] -= resolution * gamma * 25;
+    center[1] += resolution * beta * 25;
+
+    view.setCenter(view.constrainCenter(center));
+  });
 });

src/ol/deviceorientation.js

@@ -57,6 +57,8 @@ goog.require('ol.math');
  *
  * @see {@link http://www.w3.org/TR/orientation-event/}
  *
+ * @deprecated This class is deprecated and will removed in the next major release.
+ *
  * @constructor
  * @extends {ol.Object}
  * @param {olx.DeviceOrientationOptions=} opt_options Options.