Geolocate watch position (#3739)

* add Geolocation PositionOptions as option to Geolocate Control (#3473) * add option to watchPosition to Geolocate Control
mapbox · Dec 6, 2016 · 2d10449 · 2d10449
1 parent 764f80a
commit 2d10449
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 12 deletions.
diff --git a/debug/debug.html b/debug/debug.html
@@ -41,7 +41,12 @@
 });
 
 map.addControl(new mapboxgl.NavigationControl());
-map.addControl(new mapboxgl.GeolocateControl());
+map.addControl(new mapboxgl.GeolocateControl({
+    positionOptions: {
+        enableHighAccuracy: true
+    },
+    watchPosition: true
+}));
 map.addControl(new mapboxgl.ScaleControl());
 
 map.on('load', function() {

diff --git a/dist/mapbox-gl.css b/dist/mapbox-gl.css
@@ -80,7 +80,10 @@
 }
 .mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate  {
     padding: 5px;
-    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAyMCIgdmVyc2lvbj0iMS4xIj48cGF0aCBkPSJNMTAgNEM5IDQgOSA1IDkgNUw5IDUuMUE1IDUgMCAwIDAgNS4xIDlMNSA5QzUgOSA0IDkgNCAxMCA0IDExIDUgMTEgNSAxMUw1LjEgMTFBNSA1IDAgMCAwIDkgMTQuOUw5IDE1QzkgMTUgOSAxNiAxMCAxNiAxMSAxNiAxMSAxNSAxMSAxNUwxMSAxNC45QTUgNSAwIDAgMCAxNC45IDExTDE1IDExQzE1IDExIDE2IDExIDE2IDEwIDE2IDkgMTUgOSAxNSA5TDE0LjkgOUE1IDUgMCAwIDAgMTEgNS4xTDExIDVDMTEgNSAxMSA0IDEwIDR6TTEwIDYuNUEzLjUgMy41IDAgMCAxIDEzLjUgMTAgMy41IDMuNSAwIDAgMSAxMCAxMy41IDMuNSAzLjUgMCAwIDEgNi41IDEwIDMuNSAzLjUgMCAwIDEgMTAgNi41ek0xMCA4LjNBMS44IDEuOCAwIDAgMCA4LjMgMTAgMS44IDEuOCAwIDAgMCAxMCAxMS44IDEuOCAxLjggMCAwIDAgMTEuOCAxMCAxLjggMS44IDAgMCAwIDEwIDguM3oiIGZpbGw9IiMzMzMiLz48L3N2Zz4=");
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns:svg=%22http://www.w3.org/2000/svg%22%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2020%2020%22%20version=%221.1%22%3E%3Cpath%20d=%22M10%204C9%204%209%205%209%205L9%205.1A5%205%200%200%200%205.1%209L5%209C5%209%204%209%204%2010%204%2011%205%2011%205%2011L5.1%2011A5%205%200%200%200%209%2014.9L9%2015C9%2015%209%2016%2010%2016%2011%2016%2011%2015%2011%2015L11%2014.9A5%205%200%200%200%2014.9%2011L15%2011C15%2011%2016%2011%2016%2010%2016%209%2015%209%2015%209L14.9%209A5%205%200%200%200%2011%205.1L11%205C11%205%2011%204%2010%204zM10%206.5A3.5%203.5%200%200%201%2013.5%2010%203.5%203.5%200%200%201%2010%2013.5%203.5%203.5%200%200%201%206.5%2010%203.5%203.5%200%200%201%2010%206.5zM10%208.3A1.8%201.8%200%200%200%208.3%2010%201.8%201.8%200%200%200%2010%2011.8%201.8%201.8%200%200%200%2011.8%2010%201.8%201.8%200%200%200%2010%208.3z%22%20fill=%22#333%22/%3E%3C/svg%3E");
+}
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.watching  {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns:svg=%22http://www.w3.org/2000/svg%22%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2020%2020%22%20version=%221.1%22%3E%3Cpath%20d=%22M10%204C9%204%209%205%209%205L9%205.1A5%205%200%200%200%205.1%209L5%209C5%209%204%209%204%2010%204%2011%205%2011%205%2011L5.1%2011A5%205%200%200%200%209%2014.9L9%2015C9%2015%209%2016%2010%2016%2011%2016%2011%2015%2011%2015L11%2014.9A5%205%200%200%200%2014.9%2011L15%2011C15%2011%2016%2011%2016%2010%2016%209%2015%209%2015%209L14.9%209A5%205%200%200%200%2011%205.1L11%205C11%205%2011%204%2010%204zM10%206.5A3.5%203.5%200%200%201%2013.5%2010%203.5%203.5%200%200%201%2010%2013.5%203.5%203.5%200%200%201%206.5%2010%203.5%203.5%200%200%201%2010%206.5zM10%208.3A1.8%201.8%200%200%200%208.3%2010%201.8%201.8%200%200%200%2010%2011.8%201.8%201.8%200%200%200%2011.8%2010%201.8%201.8%200%200%200%2010%208.3z%22%20fill=%22#00f%22/%3E%3C/svg%3E");
 }
 
 .mapboxgl-ctrl-icon.mapboxgl-ctrl-compass > span.arrow {

diff --git a/js/ui/control/geolocate_control.js b/js/ui/control/geolocate_control.js
@@ -5,7 +5,7 @@ const DOM = require('../../util/dom');
 const window = require('../../util/window');
 const util = require('../../util/util');
 
-const geoOptions = { enableHighAccuracy: false, timeout: 6000 /* 6sec */ };
+const defaultGeoPositionOptions = { enableHighAccuracy: false, timeout: 6000 /* 6sec */ };
 const className = 'mapboxgl-ctrl';
 
 let supportsGeolocation;
@@ -41,13 +41,21 @@ function checkGeolocationSupport(callback) {
  * be visible.
  *
  * @implements {IControl}
+ * @param {Object} [options]
+ * @param {Object} [options.positionOptions={enableHighAccuracy: false, timeout: 6000}] A [PositionOptions](https://developer.mozilla.org/en-US/docs/Web/API/PositionOptions) object.
+ * @param {Object} [options.watchPosition=false] If `true` the map will reposition each time the position of the device changes and the control becomes a toggle.
  * @example
- * map.addControl(new mapboxgl.GeolocateControl());
+ * map.addControl(new mapboxgl.GeolocateControl({
+ *     positionOptions: {
+ *         enableHighAccuracy: true
+ *     }
+ * }));
  */
 class GeolocateControl extends Evented {
 
-    constructor() {
+    constructor(options) {
         super();
+        this.options = options;
         util.bindAll([
             '_onSuccess',
             '_onError',
@@ -99,18 +107,37 @@ class GeolocateControl extends Evented {
             this._container);
         this._geolocateButton.type = 'button';
         this._geolocateButton.setAttribute('aria-label', 'Geolocate');
+        if (this.options.watchPosition) this._geolocateButton.setAttribute('aria-pressed', false);
         this._geolocateButton.addEventListener('click',
             this._onClickGeolocate.bind(this));
     }
 
     _onClickGeolocate() {
-
-        window.navigator.geolocation.getCurrentPosition(
-            this._onSuccess, this._onError, geoOptions);
-
-        // This timeout ensures that we still call finish() even if
-        // the user declines to share their location in Firefox
-        this._timeoutId = setTimeout(this._finish, 10000 /* 10sec */);
+        const positionOptions = util.extend(defaultGeoPositionOptions, this.options && this.options.positionOptions || {});
+
+        // toggle watching the device location
+        if (this.options.watchPosition) {
+            if (this._geolocationWatchID !== undefined) {
+                // clear watchPosition
+                this._geolocateButton.classList.remove('watching');
+                this._geolocateButton.setAttribute('aria-pressed', false);
+                window.navigator.geolocation.clearWatch(this._geolocationWatchID);
+                this._geolocationWatchID = undefined;
+            } else {
+                // enable watchPosition
+                this._geolocateButton.classList.add('watching');
+                this._geolocateButton.setAttribute('aria-pressed', true);
+                this._geolocationWatchID = window.navigator.geolocation.watchPosition(
+                    this._onSuccess, this._onError, positionOptions);
+            }
+        } else {
+            window.navigator.geolocation.getCurrentPosition(
+                this._onSuccess, this._onError, positionOptions);
+
+            // This timeout ensures that we still call finish() even if
+            // the user declines to share their location in Firefox
+            this._timeoutId = setTimeout(this._finish, 10000 /* 10sec */);
+        }
     }
 }