+
Geolocation tracking with orientation example
+
Example of a geolocated and oriented map.
+
fullscreen, geolocation, orientation, mobile
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/geolocation-orientation.js b/examples/geolocation-orientation.js
new file mode 100644
index 0000000000..f1ef9fb80a
--- /dev/null
+++ b/examples/geolocation-orientation.js
@@ -0,0 +1,222 @@
+goog.require('ol.Geolocation');
+goog.require('ol.Map');
+goog.require('ol.Overlay');
+goog.require('ol.View2D');
+goog.require('ol.geom.LineString');
+goog.require('ol.layer.Tile');
+goog.require('ol.proj');
+goog.require('ol.source.OSM');
+
+// creating the view
+var view = new ol.View2D({
+ center: ol.proj.transform([5.8713, 45.6452], 'EPSG:4326', 'EPSG:3857'),
+ zoom: 19
+});
+
+// creating the map
+var map = new ol.Map({
+ layers: [
+ new ol.layer.Tile({
+ source: new ol.source.OSM()
+ })
+ ],
+ target: 'map',
+ view: view
+});
+
+// Geolocation marker
+var markerEl = document.getElementById('geolocation_marker');
+var marker = new ol.Overlay({
+ positioning: 'center-center',
+ element: markerEl,
+ stopEvent: false
+});
+map.addOverlay(marker);
+
+// LineString to store the different geolocation positions. This LineString
+// is time aware.
+// The Z dimension is actually used to store the rotation (heading).
+var positions = new ol.geom.LineString([], 'XYZM');
+
+// Geolocation Control
+var geolocation = new ol.Geolocation(/** @type {olx.GeolocationOptions} */ ({
+ trackingOptions: {
+ maximumAge: 10000,
+ enableHighAccuracy: true,
+ timeout: 600000
+ }
+}));
+geolocation.bindTo('projection', view);
+
+var deltaMean = 500; // the geolocation sampling period mean in ms
+
+// Listen to position changes
+geolocation.on('change', function(evt) {
+ var position = geolocation.getPosition();
+ var accuracy = geolocation.getAccuracy();
+ var heading = geolocation.getHeading() || 0;
+ var speed = geolocation.getSpeed() || 0;
+ var m = Date.now();
+
+ addPosition(position, heading, m, speed);
+
+ var coords = positions.getCoordinates();
+ var len = coords.length;
+ if (len >= 2) {
+ deltaMean = (coords[len - 1][3] - coords[0][3]) / (len - 1);
+ }
+
+ var html = [
+ 'Position: ' + position[0].toFixed(2) + ', ' + position[1].toFixed(2),
+ 'Accuracy: ' + accuracy,
+ 'Heading: ' + Math.round(radToDeg(heading)) + '°',
+ 'Speed: ' + (speed * 3.6).toFixed(1) + ' km/h',
+ 'Delta: ' + Math.round(deltaMean) + 'ms'
+ ].join('