Show a disabled geolocate button if user or system denies geolocation (…

…#8871)
mapbox · Oct 16, 2019 · 7ce6aa6 · 7ce6aa6
1 parent 61a61a1
commit 7ce6aa6
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 12 deletions.
diff --git a/src/css/mapbox-gl.css b/src/css/mapbox-gl.css
@@ -106,14 +106,14 @@
     padding: 0;
 }
 
-.mapboxgl-ctrl > button:hover {
-    background-color: rgba(0, 0, 0, 0.05);
-}
-
 .mapboxgl-ctrl-group > button:focus {
     box-shadow: 0 0 2px 2px rgba(0, 150, 255, 1);
 }
 
+.mapboxgl-ctrl > button:not(:disabled):hover {
+    background-color: rgba(0, 0, 0, 0.05);
+}
+
 .mapboxgl-ctrl-group > button:focus:focus-visible {
     box-shadow: 0 0 2px 2px rgba(0, 150, 255, 1);
 }
@@ -166,8 +166,8 @@
     height: 100%;
 }
 
-.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate::before:disabled {
-    background-image: svg-load('svg/mapboxgl-ctrl-geolocate.svg', fill=#aaa);
+.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate:disabled::before {
+    background-image: svg-load('svg/mapboxgl-ctrl-geolocate-disabled.svg', fill=#aaa);
 }
 
 .mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate.mapboxgl-ctrl-geolocate-active::before {

diff --git a/src/css/svg/mapboxgl-ctrl-geolocate-disabled.svg b/src/css/svg/mapboxgl-ctrl-geolocate-disabled.svg
diff --git a/src/ui/control/geolocate_control.js b/src/ui/control/geolocate_control.js
@@ -92,10 +92,10 @@ class GeolocateControl extends Evented {
     options: Options;
     _container: HTMLElement;
     _dotElement: HTMLElement;
-    _geolocateButton: HTMLElement;
+    _geolocateButton: HTMLButtonElement;
     _geolocationWatchID: number;
     _timeoutId: ?TimeoutID;
-    _watchState: string;
+    _watchState: 'OFF' | 'ACTIVE_LOCK' | 'WAITING_ACTIVE' | 'ACTIVE_ERROR' | 'BACKGROUND' | 'BACKGROUND_ERROR';
     _lastKnownPosition: any;
     _userLocationDotMarker: Marker;
     _setup: boolean; // set to true once the control has been setup
@@ -263,6 +263,9 @@ class GeolocateControl extends Evented {
                 this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-active-error');
                 this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-background');
                 this._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-background-error');
+                this._geolocateButton.disabled = true;
+                this._geolocateButton.title = 'Location not available';
+                this._geolocateButton.setAttribute('aria-label', 'Location not available');
 
                 if (this._geolocationWatchID !== undefined) {
                     this._clearWatch();
@@ -287,17 +290,19 @@ class GeolocateControl extends Evented {
     }
 
     _setupUI(supported: boolean) {
-        if (supported === false) {
-            warnOnce('Geolocation support is not available, the GeolocateControl will not be visible.');
-            return;
-        }
         this._container.addEventListener('contextmenu', (e: MouseEvent) => e.preventDefault());
         this._geolocateButton = DOM.create('button',
             `${className}-icon ${className}-geolocate`,
             this._container);
         this._geolocateButton.type = 'button';
         this._geolocateButton.title = 'Find my location';
         this._geolocateButton.setAttribute('aria-label', 'Find my location');
+        if (supported === false) {
+            warnOnce('Geolocation support is not available so the GeolocateControl will be disabled.');
+            this._geolocateButton.disabled = true;
+            this._geolocateButton.title = 'Location not available';
+            this._geolocateButton.setAttribute('aria-label', 'Location not available');
+        }
 
         if (this.options.trackUserLocation) {
             this._geolocateButton.setAttribute('aria-pressed', 'false');