diff --git a/changelog/upgrade-notes.md b/changelog/upgrade-notes.md
index 9bc5b8e35b..08853ed983 100644
--- a/changelog/upgrade-notes.md
+++ b/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
diff --git a/examples/.eslintrc b/examples/.eslintrc
index 064298c27a..1e245fa6b6 100644
--- a/examples/.eslintrc
+++ b/examples/.eslintrc
@@ -6,6 +6,7 @@
"createMapboxStreetsV6Style": false,
"d3": false,
"geojsonvt": false,
+ "GyroNorm": false,
"jsPDF": false,
"jsts": false,
"saveAs": false,
diff --git a/examples/device-orientation.html b/examples/device-orientation.html
index 159591ee42..1b1a3d87c4 100644
--- a/examples/device-orientation.html
+++ b/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
---
-
- α :
- β :
- γ :
- heading :
+
α :
+
β :
+
γ :
diff --git a/examples/device-orientation.js b/examples/device-orientation.js
index c8979d172f..5cdce0a698 100644
--- a/examples/device-orientation.js
+++ b/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));
+ });
});
diff --git a/src/ol/deviceorientation.js b/src/ol/deviceorientation.js
index beb9c61977..b78680658e 100644
--- a/src/ol/deviceorientation.js
+++ b/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.