In this example, we'll display an icon at the user's location, use values from the DeviceOrientation API to create a simple compass, and by rotating it, show which way is north. Perform the following steps to achieve what's been set out in this paragraph:
Open the previous example in your text editor, and change the icon we are using from a flag to an arrow. We'll use an arrow pointing up for north. Here's the code to accomplish this:
<div id="location" class="marker icon-arrow-up"></div>
Now, add the following code at the end of the script tag, right after our Geolocation code:
var deviceOrientation = new ol.DeviceOrientation({ tracking: true }); deviceOrientation.on('change:heading', onChangeHeading); function onChangeHeading(event) { var heading = event.target.getHeading(); var el = document.getElementById('location'); el.style['-webkit-transform'] = 'rotate('+heading+'rad)'; el.style['transform'] = 'rotate('+heading+'rad)'; })...