Use accuracyGeometry in geolocation example

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} */ ($('<i/>').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]
+});