position accuracy :
altitude :
altitude accuracy :
heading :
speed :
Example of a geolocation map.
<!DOCTYPE html> <html> <head> <title>Geolocation example</title> <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link rel="stylesheet" href="http://openlayers.org/en/3.8.1/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/3.8.1/build/ol.js"></script> </head> <body> <div class="container-fluid"> <div class="row-fluid"> <div class="span12"> <div id="map" class="map"></div> <div class="span4 pull-right"> <div id="info" class="alert alert-error" style="display: none;"></div> </div> <label class="checkbox" for="track"> <input id="track" type="checkbox"/>track position </label> <p>position accuracy : <code id="accuracy"></code></p> <p>altitude : <code id="altitude"></code></p> <p>altitude accuracy : <code id="altitudeAccuracy"></code></p> <p>heading : <code id="heading"></code></p> <p>speed : <code id="speed"></code></p> </div> </div> </div> <script> var view = new ol.View({ center: [0, 0], zoom: 2 }); var map = new ol.Map({ layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], target: 'map', controls: ol.control.defaults({ attributionOptions: /** @type {olx.control.AttributionOptions} */ ({ collapsible: false }) }), view: view }); var geolocation = new ol.Geolocation({ projection: view.getProjection() }); function el(id) { return document.getElementById(id); } el('track').addEventListener('change', function() { geolocation.setTracking(this.checked); }); // update the HTML page when the position changes. geolocation.on('change', function() { el('accuracy').innerText = geolocation.getAccuracy() + ' [m]'; el('altitude').innerText = geolocation.getAltitude() + ' [m]'; el('altitudeAccuracy').innerText = geolocation.getAltitudeAccuracy() + ' [m]'; el('heading').innerText = geolocation.getHeading() + ' [rad]'; el('speed').innerText = geolocation.getSpeed() + ' [m/s]'; }); // handle geolocation error. geolocation.on('error', function(error) { var info = document.getElementById('info'); info.innerHTML = error.message; info.style.display = ''; }); var accuracyFeature = new ol.Feature(); geolocation.on('change:accuracyGeometry', function() { accuracyFeature.setGeometry(geolocation.getAccuracyGeometry()); }); var positionFeature = new ol.Feature(); positionFeature.setStyle(new ol.style.Style({ image: new ol.style.Circle({ radius: 6, fill: new ol.style.Fill({ color: '#3399CC' }), stroke: new ol.style.Stroke({ color: '#fff', width: 2 }) }) })); geolocation.on('change:position', function() { var coordinates = geolocation.getPosition(); positionFeature.setGeometry(coordinates ? new ol.geom.Point(coordinates) : null); }); var featuresOverlay = new ol.layer.Vector({ map: map, source: new ol.source.Vector({ features: [accuracyFeature, positionFeature] }) }); </script> </body> </html>