1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
|
---
layout: tutorial_frame
title: Tilt handler
---
<style>
#info {
position:absolute;
top:0;
right:0;
width: 20em;
height: 7.5em;
background: rgba(255,255,255,.5);
z-index:500;
font: 12px Sans;
}
.crsMarker {
border-top: 2px green solid;
border-left: 2px green solid;
}
</style>
<div id='info' style=''></div>
<script type='text/javascript'>
var trd = [63.41, 10.41];
L.TiltHandler = L.Handler.extend({
addHooks: function() {
L.DomEvent.on(window, 'deviceorientation', this._tilt, this);
},
removeHooks: function() {
L.DomEvent.off(window, 'deviceorientation', this._tilt, this);
},
_tilt: function(ev) {
// Treat Gamma angle as horizontal pan (1 degree = 1 pixel) and Beta angle as vertical pan
var info;
var offset = L.point(ev.gamma, ev.beta)
if (offset) {
this._map.panBy(offset);
info = ev.gamma + ',' + ev.beta;
} else {
info = 'Device orientation not detected'
}
document.getElementById('info').innerHTML = info
}
});
L.Map.addInitHook('addHandler', 'tilt', L.TiltHandler);
var map = L.map('map', {
center: [0, 0],
zoom: 1,
tilt: true
});
var positron = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="https://carto.com/attribution">CARTO</a>'
}).addTo(map);
</script>
|
