diff --git a/examples/device-orientation.js b/examples/device-orientation.js
index 1238730663..8e5b5b7f49 100644
--- a/examples/device-orientation.js
+++ b/examples/device-orientation.js
@@ -6,10 +6,6 @@ goog.require('ol.dom.Input');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.source.OSM');
 
-var view = new ol.View2D({
-  center: [0, 0],
-  zoom: 2
-});
 var map = new ol.Map({
   layers: [
     new ol.layer.TileLayer({
@@ -18,16 +14,33 @@ var map = new ol.Map({
   ],
   renderers: ol.RendererHints.createFromQueryData(),
   target: 'map',
-  view: view
+  view: new ol.View2D({
+    center: [0, 0],
+    zoom: 2
+  })
 });
+var view = map.getView();
 
 var deviceOrientation = new ol.DeviceOrientation();
 var track = new ol.dom.Input(document.getElementById('track'));
 track.bindTo('checked', deviceOrientation, 'tracking');
 
-deviceOrientation.on('change', function() {
-  document.getElementById('alpha').innerHTML = deviceOrientation.getAlpha();
-  document.getElementById('beta').innerHTML = deviceOrientation.getBeta();
-  document.getElementById('gamma').innerHTML = deviceOrientation.getGamma();
-  document.getElementById('heading').innerHTML = deviceOrientation.getHeading();
+deviceOrientation.on('change', function(event) {
+  document.getElementById('alpha').innerHTML = event.target.getAlpha();
+  document.getElementById('beta').innerHTML = event.target.getBeta();
+  document.getElementById('gamma').innerHTML = event.target.getGamma();
+  document.getElementById('heading').innerHTML = event.target.getHeading();
+});
+
+// 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(center);
 });