ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Update geolocation example to display all the properties

Browse Source
This commit is contained in:
Frederic Junod
2013-07-01 15:46:19 +02:00
parent f2ce4db85a
commit e1f8863bd2
2 changed files with 21 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
examples/geolocation.html
View File

@@ -46,11 +46,19 @@
<div class="span12"> <div class="span12">
<h4 id="title">Geolocation example</h4> <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> <p id="shortdesc">Example of a geolocation map.</p>
<div id="docs"> <div id="docs">
<p>See the <a href="geolocation.js" target="_blank">geolocation.js source</a> to see how this is done.</p> <p>See the <a href="geolocation.js" target="_blank">geolocation.js source</a> to see how this is done.</p>
</div> </div>
<button id="locate"><i class="icon-screenshot"></i> locate</button>
<div id="tags">geolocation, openstreetmap</div> <div id="tags">geolocation, openstreetmap</div>
</div> </div>
<div class="span4 pull-right"> <div class="span4 pull-right">

17
examples/geolocation.js
View File

@@ -3,6 +3,7 @@ goog.require('ol.Map');
goog.require('ol.Overlay'); goog.require('ol.Overlay');
goog.require('ol.RendererHints'); goog.require('ol.RendererHints');
goog.require('ol.View2D'); goog.require('ol.View2D');
goog.require('ol.dom.Input');
goog.require('ol.layer.TileLayer'); goog.require('ol.layer.TileLayer');
goog.require('ol.source.OSM'); goog.require('ol.source.OSM');
@@ -24,6 +25,17 @@ var map = new ol.Map({
var geolocation = new ol.Geolocation(); var geolocation = new ol.Geolocation();
geolocation.bindTo('projection', map.getView()); 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({ var marker = new ol.Overlay({
map: map, map: map,
element: /** @type {Element} */ ($('<i/>').addClass('icon-flag').get(0)) element: /** @type {Element} */ ($('<i/>').addClass('icon-flag').get(0))
@@ -41,8 +53,3 @@ geolocation.on('error', function(error) {
info.innerHTML = error.message; info.innerHTML = error.message;
info.style.display = ''; info.style.display = '';
}); });
$('#locate').click(function() {
geolocation.setTracking(true);
});