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

33
examples/device-orientation.js
View File

@@ -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);
});