ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Better device orientation example

Browse Source
This commit is contained in:
Frederic Junod
2013-06-07 16:15:59 +02:00
parent 9b00967df0
commit ea8c970d6e
1 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/device-orientation.js
+23 -10
View File
@@ -6,10 +6,6 @@ goog.require('ol.dom.Input');
goog.require('ol.layer.TileLayer'); goog.require('ol.layer.TileLayer');
goog.require('ol.source.OSM'); goog.require('ol.source.OSM');
var view = new ol.View2D({
center: [0, 0],
zoom: 2
});
var map = new ol.Map({ var map = new ol.Map({
layers: [ layers: [
new ol.layer.TileLayer({ new ol.layer.TileLayer({
@@ -18,16 +14,33 @@ var map = new ol.Map({
], ],
renderers: ol.RendererHints.createFromQueryData(), renderers: ol.RendererHints.createFromQueryData(),
target: 'map', target: 'map',
view: view view: new ol.View2D({
center: [0, 0],
zoom: 2
})
}); });
var view = map.getView();
var deviceOrientation = new ol.DeviceOrientation(); var deviceOrientation = new ol.DeviceOrientation();
var track = new ol.dom.Input(document.getElementById('track')); var track = new ol.dom.Input(document.getElementById('track'));
track.bindTo('checked', deviceOrientation, 'tracking'); track.bindTo('checked', deviceOrientation, 'tracking');
deviceOrientation.on('change', function() { deviceOrientation.on('change', function(event) {
document.getElementById('alpha').innerHTML = deviceOrientation.getAlpha(); document.getElementById('alpha').innerHTML = event.target.getAlpha();
document.getElementById('beta').innerHTML = deviceOrientation.getBeta(); document.getElementById('beta').innerHTML = event.target.getBeta();
document.getElementById('gamma').innerHTML = deviceOrientation.getGamma(); document.getElementById('gamma').innerHTML = event.target.getGamma();
document.getElementById('heading').innerHTML = deviceOrientation.getHeading(); 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);
}); });