diff --git a/examples/geolocation.html b/examples/geolocation.html
index 8b5ec77a5d..7fecca68de 100644
--- a/examples/geolocation.html
+++ b/examples/geolocation.html
@@ -8,15 +8,6 @@
-
Geolocation example
@@ -63,7 +54,6 @@
-
diff --git a/examples/geolocation.js b/examples/geolocation.js
index 8989dee7f7..675ffcccd6 100644
--- a/examples/geolocation.js
+++ b/examples/geolocation.js
@@ -2,11 +2,13 @@
// FIXME this circle will need to compensate for the pointResolution of the
// FIXME EPSG:3857 projection
+goog.require('ol.Feature');
+goog.require('ol.FeatureOverlay');
goog.require('ol.Geolocation');
goog.require('ol.Map');
-goog.require('ol.Overlay');
goog.require('ol.View2D');
goog.require('ol.dom.Input');
+goog.require('ol.geom.Point');
goog.require('ol.layer.Tile');
goog.require('ol.source.OSM');
@@ -22,7 +24,7 @@ var map = new ol.Map({
source: new ol.source.OSM()
})
],
- renderer: exampleNS.getRendererFromQueryString(),
+ renderer: 'canvas',
target: 'map',
view: view
});
@@ -41,22 +43,23 @@ geolocation.on('propertychange', function() {
$('#speed').text(geolocation.getSpeed() + ' [m/s]');
});
-var marker = new ol.Overlay({
- element: /** @type {Element} */ ($('').addClass('icon-flag').get(0)),
- positioning: 'bottom-left',
- stopEvent: false
-});
-map.addOverlay(marker);
-// bind the marker position to the device location.
-marker.bindTo('position', geolocation);
-
-geolocation.on('change:accuracy', function() {
- $(marker.getElement()).tooltip({
- title: this.getAccuracy() + 'm from this point'
- });
-});
geolocation.on('error', function(error) {
var info = document.getElementById('info');
info.innerHTML = error.message;
info.style.display = '';
});
+
+
+var accuracyFeature = new ol.Feature();
+accuracyFeature.bindTo('geometry', geolocation, 'accuracyGeometry');
+
+var positionFeature = new ol.Feature();
+positionFeature.bindTo('geometry', geolocation, 'position')
+ .transform(function() {}, function(coordinates) {
+ return coordinates ? new ol.geom.Point(coordinates) : null;
+ });
+
+var featuresOverlay = new ol.FeatureOverlay({
+ map: map,
+ features: [accuracyFeature, positionFeature]
+});