From e1f8863bd282401f8e8b31d5c98a8125a14adf19 Mon Sep 17 00:00:00 2001
From: Frederic Junod <frederic.junod@camptocamp.com>
Date: Mon, 1 Jul 2013 15:46:19 +0200
Subject: [PATCH] Update geolocation example to display all the properties

---
 examples/geolocation.html | 10 +++++++++-
 examples/geolocation.js   | 17 ++++++++++++-----
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/examples/geolocation.html b/examples/geolocation.html
index 03c1ffda36..9485fca5b2 100644
--- 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
index 5ce7510bf1..99b4fcfcdb 100644
--- 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);
-});