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.