O'Reilly logo

OpenLayers 3 : Beginner's Guide by Erik Hazzard, Paul Spencer, Thomas Gratier

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – a sense of direction

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:

  1. 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>
  2. 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 ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required