Merge pull request openlayers#848 from fredj/geolocation-example

Update geolocation example to display all the properties
KoAi · Jul 1, 2013 · a071c35 · a071c35
2 parents 6ae4b28 + e1f8863
commit a071c35
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 6 deletions.
diff --git a/examples/geolocation.html b/examples/geolocation.html
@@ -46,11 +46,19 @@
 
         <div class="span12">
           <h4 id="title">Geolocation example</h4>
+          <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>
+
           <p id="shortdesc">Example of a geolocation map.</p>
           <div id="docs">
             <p>See the <a href="geolocation.js" target="_blank">geolocation.js source</a> to see how this is done.</p>
           </div>
-          <button id="locate"><i class="icon-screenshot"></i> locate</button>
           <div id="tags">geolocation, openstreetmap</div>
         </div>
         <div class="span4 pull-right">

diff --git a/examples/geolocation.js b/examples/geolocation.js
@@ -3,6 +3,7 @@ goog.require('ol.Map');
 goog.require('ol.Overlay');
 goog.require('ol.RendererHints');
 goog.require('ol.View2D');
+goog.require('ol.dom.Input');
 goog.require('ol.layer.TileLayer');
 goog.require('ol.source.OSM');
 
@@ -24,6 +25,17 @@ var map = new ol.Map({
 var geolocation = new ol.Geolocation();
 geolocation.bindTo('projection', map.getView());
 
+var track = new ol.dom.Input(document.getElementById('track'));
+track.bindTo('checked', geolocation, 'tracking');
+
+geolocation.on('change', function() {
+  $('#accuracy').text(geolocation.getAccuracy() + ' [m]');
+  $('#altitude').text(geolocation.getAltitude() + ' [m]');
+  $('#altitudeAccuracy').text(geolocation.getAltitudeAccuracy() + ' [m]');
+  $('#heading').text(geolocation.getHeading() + ' [rad]');
+  $('#speed').text(geolocation.getSpeed() + ' [m/s]');
+});
+
 var marker = new ol.Overlay({
   map: map,
   element: /** @type {Element} */ ($('<i/>').addClass('icon-flag').get(0))
@@ -41,8 +53,3 @@ geolocation.on('error', function(error) {
   info.innerHTML = error.message;
   info.style.display = '';
 });
-
-
-$('#locate').click(function() {
-  geolocation.setTracking(true);
-});