layout, title
| layout |
title |
| tutorial_frame |
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>
<script type='text/javascript'>
const trd = [63.41, 10.41];
L.TiltHandler = L.Handler.extend({
addHooks() {
L.DomEvent.on(window, 'deviceorientation', this._tilt, this);
},
removeHooks() {
L.DomEvent.off(window, 'deviceorientation', this._tilt, this);
},
_tilt(ev) {
// Treat Gamma angle as horizontal pan (1 degree = 1 pixel) and Beta angle as vertical pan
const offset = L.point(ev.gamma, ev.beta);
let info;
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);
const map = L.map('map', {
center: [0, 0],
zoom: 1,
tilt: true
});
const osm = L.tileLayer('
https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '©
OpenStreetMap'
}).addTo(map);
</script>
