maplibre-gl 2.1.1 → 2.1.2

package/src/ui/control/attribution_control.test.ts

@@ -1,6 +1,6 @@
 import AttributionControl from './attribution_control';
 import {createMap as globalCreateMap, setWebGlContext, setPerformance, setMatchMedia} from '../../util/test/util';
-import simulate from '../../../test/util/simulate_interaction';
+import simulate from '../../../test/unit/lib/simulate_interaction';
 
 function createMap() {
 
@@ -35,7 +35,7 @@ describe('AttributionControl', () => {
         map.addControl(new AttributionControl());
 
         expect(
-        map.getContainer().querySelectorAll('.maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib')
+            map.getContainer().querySelectorAll('.maplibregl-ctrl-bottom-right .maplibregl-ctrl-attrib')
         ).toHaveLength(1);
     });
 
@@ -43,7 +43,7 @@ describe('AttributionControl', () => {
         map.addControl(new AttributionControl(), 'top-left');
 
         expect(
-        map.getContainer().querySelectorAll('.maplibregl-ctrl-top-left .maplibregl-ctrl-attrib')
+            map.getContainer().querySelectorAll('.maplibregl-ctrl-top-left .maplibregl-ctrl-attrib')
         ).toHaveLength(1);
     });
 
@@ -51,14 +51,15 @@ describe('AttributionControl', () => {
         Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 700, configurable: true});
 
         let attributionControl = new AttributionControl({
-            compact: true
+            compact: true,
+            customAttribution: 'MapLibre'
         });
         map.addControl(attributionControl);
 
         const container = map.getContainer();
 
         expect(
-        container.querySelectorAll('.maplibregl-ctrl-attrib.maplibregl-compact')
+            container.querySelectorAll('.maplibregl-ctrl-attrib.maplibregl-compact')
         ).toHaveLength(1);
         map.removeControl(attributionControl);
 
@@ -69,45 +70,75 @@ describe('AttributionControl', () => {
 
         map.addControl(attributionControl);
         expect(
-        container.querySelectorAll('.maplibregl-ctrl-attrib:not(.maplibregl-compact)')
+            container.querySelectorAll('.maplibregl-ctrl-attrib:not(.maplibregl-compact)')
         ).toHaveLength(1);
     });
 
-    test('appears in compact mode if container is less then 640 pixel wide', () => {
+    test('appears in compact mode if container is less then 640 pixel wide and attributions are not empty', () => {
+        Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 700, configurable: true});
+        const attributionControl = new AttributionControl({
+            customAttribution: 'MapLibre'
+        });
+        map.addControl(attributionControl);
+
+        const container = map.getContainer();
+
+        expect(
+            container.querySelectorAll('.maplibregl-ctrl-attrib:not(.maplibregl-compact)')
+        ).toHaveLength(1);
+
+        Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 600, configurable: true});
+        map.resize();
+
+        expect(
+            container.querySelectorAll('.maplibregl-ctrl-attrib.maplibregl-compact')
+        ).toHaveLength(1);
+
+        expect(
+            container.querySelectorAll('.maplibregl-attrib-empty')
+        ).toHaveLength(0);
+    });
+
+    test('does not appear in compact mode if container is less then 640 pixel wide and attributions are empty', () => {
         Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 700, configurable: true});
         map.addControl(new AttributionControl());
 
         const container = map.getContainer();
 
         expect(
-        container.querySelectorAll('.maplibregl-ctrl-attrib:not(.maplibregl-compact)')
+            container.querySelectorAll('.maplibregl-ctrl-attrib:not(.maplibregl-compact)')
         ).toHaveLength(1);
 
         Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 600, configurable: true});
         map.resize();
 
         expect(
-        container.querySelectorAll('.maplibregl-ctrl-attrib.maplibregl-compact')
+            container.querySelectorAll('.maplibregl-ctrl-attrib.maplibregl-compact')
+        ).toHaveLength(0);
+
+        expect(
+            container.querySelectorAll('.maplibregl-attrib-empty')
         ).toHaveLength(1);
     });
 
     test('compact mode control toggles attribution', () => {
         map.addControl(new AttributionControl({
-            compact: true
+            compact: true,
+            customAttribution: 'MapLibre'
         }));
 
         const container = map.getContainer();
         const toggle = container.querySelector('.maplibregl-ctrl-attrib-button');
 
-        expect(container.querySelectorAll('.maplibregl-compact-show')).toHaveLength(0);
+        expect(container.querySelectorAll('.maplibregl-compact-show')).toHaveLength(1);
 
         simulate.click(toggle);
 
-        expect(container.querySelectorAll('.maplibregl-compact-show')).toHaveLength(1);
+        expect(container.querySelectorAll('.maplibregl-compact-show')).toHaveLength(0);
 
         simulate.click(toggle);
 
-        expect(container.querySelectorAll('.maplibregl-compact-show')).toHaveLength(0);
+        expect(container.querySelectorAll('.maplibregl-compact-show')).toHaveLength(1);
     });
 
     test('dedupes attributions that are substrings of others', done => {
@@ -325,23 +356,27 @@ describe('AttributionControl test regarding the HTML elements details and summar
             expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');
         });
 
-        test('The attribute open="" SHOULD change on resize from size > 640 to <= 640 and and vice versa.', () => {
+        test('The attribute open="" SHOULD exist after resize from size > 640 to <= 640 and and vice versa.', () => {
             Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true});
             const attributionControl = new AttributionControl({
+                customAttribution: 'MapLibre'
             });
             map.addControl(attributionControl);
 
-            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBeNull();
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib.maplibregl-compact')).toHaveLength(1);
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');
 
             Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 641, configurable: true});
             map.resize();
 
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib:not(.maplibregl-compact)')).toHaveLength(1);
             expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');
 
             Object.defineProperty(map.getCanvasContainer(), 'offsetWidth', {value: 640, configurable: true});
             map.resize();
 
-            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBeNull();
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib.maplibregl-compact')).toHaveLength(1);
+            expect(map.getContainer().querySelectorAll('.maplibregl-ctrl-attrib')[0].getAttribute('open')).toBe('');
         });
 
         test('The attribute open="" should NOT change on resize from > 640 to another > 640.', () => {

package/src/ui/control/attribution_control.ts

@@ -5,8 +5,8 @@ import type Map from '../map';
 import type {ControlPosition, IControl} from './control';
 
 type AttributionOptions = {
-  compact?: boolean;
-  customAttribution?: string | Array<string>;
+    compact?: boolean;
+    customAttribution?: string | Array<string>;
 };
 
 /**
@@ -25,6 +25,7 @@ type AttributionOptions = {
 class AttributionControl implements IControl {
     options: AttributionOptions;
     _map: Map;
+    _compact: boolean;
     _container: HTMLElement;
     _innerContainer: HTMLElement;
     _compactButton: HTMLElement;
@@ -39,7 +40,8 @@ class AttributionControl implements IControl {
         bindAll([
             '_toggleAttribution',
             '_updateData',
-            '_updateCompact'
+            '_updateCompact',
+            '_updateCompactMinimize'
         ], this);
     }
 
@@ -49,18 +51,20 @@ class AttributionControl implements IControl {
 
     onAdd(map: Map) {
         this._map = map;
+        this._compact = this.options && this.options.compact;
         this._container = DOM.create('details', 'maplibregl-ctrl maplibregl-ctrl-attrib mapboxgl-ctrl mapboxgl-ctrl-attrib');
         this._compactButton = DOM.create('summary', 'maplibregl-ctrl-attrib-button mapboxgl-ctrl-attrib-button', this._container);
         this._compactButton.addEventListener('click', this._toggleAttribution);
         this._setElementTitle(this._compactButton, 'ToggleAttribution');
         this._innerContainer = DOM.create('div', 'maplibregl-ctrl-attrib-inner mapboxgl-ctrl-attrib-inner', this._container);
 
-        this._updateCompact();
         this._updateAttributions();
+        this._updateCompact();
 
         this._map.on('styledata', this._updateData);
         this._map.on('sourcedata', this._updateData);
         this._map.on('resize', this._updateCompact);
+        this._map.on('drag', this._updateCompactMinimize);
 
         return this._container;
     }
@@ -71,8 +75,10 @@ class AttributionControl implements IControl {
         this._map.off('styledata', this._updateData);
         this._map.off('sourcedata', this._updateData);
         this._map.off('resize', this._updateCompact);
+        this._map.off('drag', this._updateCompactMinimize);
 
         this._map = undefined;
+        this._compact = undefined;
         this._attribHTML = undefined;
     }
 
@@ -83,10 +89,14 @@ class AttributionControl implements IControl {
     }
 
     _toggleAttribution() {
-        if (this._container.classList.contains('maplibregl-compact-show') || this._container.classList.contains('mapboxgl-compact-show')) {
-            this._container.classList.remove('maplibregl-compact-show', 'mapboxgl-compact-show');
-        } else {
-            this._container.classList.add('maplibregl-compact-show', 'mapboxgl-compact-show');
+        if (this._container.classList.contains('maplibregl-compact')) {
+            if (this._container.classList.contains('maplibregl-compact-show')) {
+                this._container.setAttribute('open', '');
+                this._container.classList.remove('maplibregl-compact-show', 'mapboxgl-compact-show');
+            } else {
+                this._container.classList.add('maplibregl-compact-show', 'mapboxgl-compact-show');
+                this._container.removeAttribute('open');
+            }
         }
     }
 
@@ -129,6 +139,9 @@ class AttributionControl implements IControl {
             }
         }
 
+        // remove any entries that are whitespace
+        attributions = attributions.filter(e => String(e).trim());
+
         // remove any entries that are substrings of another entry.
         // first sort by length so that substrings come first
         attributions.sort((a, b) => a.length - b.length);
@@ -151,20 +164,18 @@ class AttributionControl implements IControl {
         } else {
             this._container.classList.add('maplibregl-attrib-empty', 'mapboxgl-attrib-empty');
         }
+        this._updateCompact();
         // remove old DOM node from _editLink
         this._editLink = null;
     }
 
     _updateCompact() {
-        const compact = this.options && this.options.compact;
-        if (this._map.getCanvasContainer().offsetWidth <= 640 || compact) {
-            if (compact === false) {
+        if (this._map.getCanvasContainer().offsetWidth <= 640 || this._compact) {
+            if (this._compact === false) {
                 this._container.setAttribute('open', '');
-            } else {
-                if (!this._container.classList.contains('maplibregl-compact')) {
-                    this._container.removeAttribute('open');
-                    this._container.classList.add('maplibregl-compact', 'mapboxgl-compact');
-                }
+            } else if (!this._container.classList.contains('maplibregl-compact') && !this._container.classList.contains('maplibregl-attrib-empty')) {
+                this._container.setAttribute('open', '');
+                this._container.classList.add('maplibregl-compact', 'mapboxgl-compact', 'maplibregl-compact-show', 'mapboxgl-compact-show');
             }
         } else {
             this._container.setAttribute('open', '');
@@ -174,6 +185,14 @@ class AttributionControl implements IControl {
         }
     }
 
+    _updateCompactMinimize() {
+        if (this._container.classList.contains('maplibregl-compact')) {
+            if (this._container.classList.contains('maplibregl-compact-show')) {
+                this._container.classList.remove('maplibregl-compact-show', 'mapboxgl-compact-show');
+            }
+        }
+    }
+
 }
 
 export default AttributionControl;

package/src/ui/control/control.ts

@@ -45,46 +45,46 @@ import type Map from '../map';
  * };
  */
 export interface IControl {
-  /**
-   * Register a control on the map and give it a chance to register event listeners
-   * and resources. This method is called by {@link Map#addControl}
-   * internally.
-   *
-   * @function
-   * @memberof IControl
-   * @instance
-   * @name onAdd
-   * @param {Map} map the Map this control will be added to
-   * @returns {HTMLElement} The control's container element. This should
-   * be created by the control and returned by onAdd without being attached
-   * to the DOM: the map will insert the control's element into the DOM
-   * as necessary.
-   */
+    /**
+     * Register a control on the map and give it a chance to register event listeners
+     * and resources. This method is called by {@link Map#addControl}
+     * internally.
+     *
+     * @function
+     * @memberof IControl
+     * @instance
+     * @name onAdd
+     * @param {Map} map the Map this control will be added to
+     * @returns {HTMLElement} The control's container element. This should
+     * be created by the control and returned by onAdd without being attached
+     * to the DOM: the map will insert the control's element into the DOM
+     * as necessary.
+     */
     onAdd(map: Map): HTMLElement;
-  /**
-   * Unregister a control on the map and give it a chance to detach event listeners
-   * and resources. This method is called by {@link Map#removeControl}
-   * internally.
-   *
-   * @function
-   * @memberof IControl
-   * @instance
-   * @name onRemove
-   * @param {Map} map the Map this control will be removed from
-   * @returns {undefined} there is no required return value for this method
-   */
+    /**
+     * Unregister a control on the map and give it a chance to detach event listeners
+     * and resources. This method is called by {@link Map#removeControl}
+     * internally.
+     *
+     * @function
+     * @memberof IControl
+     * @instance
+     * @name onRemove
+     * @param {Map} map the Map this control will be removed from
+     * @returns {undefined} there is no required return value for this method
+     */
     onRemove(map: Map): void;
-  /**
-   * Optionally provide a default position for this control. If this method
-   * is implemented and {@link Map#addControl} is called without the `position`
-   * parameter, the value returned by getDefaultPosition will be used as the
-   * control's position.
-   *
-   * @function
-   * @memberof IControl
-   * @instance
-   * @name getDefaultPosition
-   * @returns {ControlPosition} a control position, one of the values valid in addControl.
-   */
-  readonly getDefaultPosition?: () => ControlPosition;
+    /**
+     * Optionally provide a default position for this control. If this method
+     * is implemented and {@link Map#addControl} is called without the `position`
+     * parameter, the value returned by getDefaultPosition will be used as the
+     * control's position.
+     *
+     * @function
+     * @memberof IControl
+     * @instance
+     * @name getDefaultPosition
+     * @returns {ControlPosition} a control position, one of the values valid in addControl.
+     */
+    readonly getDefaultPosition?: () => ControlPosition;
 }

package/src/ui/control/fullscreen_control.ts

@@ -6,7 +6,7 @@ import type Map from '../map';
 import type {IControl} from './control';
 
 type FullscreenOptions = {
-  container?: HTMLElement;
+    container?: HTMLElement;
 };
 
 /**

package/src/ui/control/geolocate_control.test.ts

@@ -222,7 +222,7 @@ describe('GeolocateControl with no options', () => {
             expect(lngLatAsFixed(map.getCenter(), 4)).toEqual({'lat': '10.0000', 'lng': '20.0000'});
             expect(geolocate._userLocationDotMarker._map).toBeTruthy();
             expect(
-            geolocate._userLocationDotMarker._element.classList.contains('maplibregl-user-location-dot-stale')
+                geolocate._userLocationDotMarker._element.classList.contains('maplibregl-user-location-dot-stale')
             ).toBeFalsy();
             map.once('moveend', () => {
                 expect(lngLatAsFixed(map.getCenter(), 4)).toEqual({'lat': '40.0000', 'lng': '50.0000'});

package/src/ui/control/geolocate_control.ts

@@ -10,11 +10,11 @@ import type {FitBoundsOptions} from '../camera';
 import type {IControl} from './control';
 
 type GeolocateOptions = {
-  positionOptions?: PositionOptions;
-  fitBoundsOptions?: FitBoundsOptions;
-  trackUserLocation?: boolean;
-  showAccuracyCircle?: boolean;
-  showUserLocation?: boolean;
+    positionOptions?: PositionOptions;
+    fitBoundsOptions?: FitBoundsOptions;
+    trackUserLocation?: boolean;
+    showAccuracyCircle?: boolean;
+    showUserLocation?: boolean;
 };
 
 const defaultOptions: GeolocateOptions = {
@@ -173,29 +173,29 @@ class GeolocateControl extends Evented implements IControl {
 
     _setErrorState() {
         switch (this._watchState) {
-        case 'WAITING_ACTIVE':
-            this._watchState = 'ACTIVE_ERROR';
-            this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active');
-            this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active-error', 'mapboxgl-ctrl-geolocate-active-error');
-            break;
-        case 'ACTIVE_LOCK':
-            this._watchState = 'ACTIVE_ERROR';
-            this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active');
-            this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active-error', 'mapboxgl-ctrl-geolocate-active-error');
-            this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting');
-            // turn marker grey
-            break;
-        case 'BACKGROUND':
-            this._watchState = 'BACKGROUND_ERROR';
-            this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background', 'mapboxgl-ctrl-geolocate-background');
-            this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background-error', 'mapboxgl-ctrl-geolocate-background-error');
-            this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting');
-            // turn marker grey
-            break;
-        case 'ACTIVE_ERROR':
-            break;
-        default:
-            assert(false, `Unexpected watchState ${this._watchState}`);
+            case 'WAITING_ACTIVE':
+                this._watchState = 'ACTIVE_ERROR';
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active-error', 'mapboxgl-ctrl-geolocate-active-error');
+                break;
+            case 'ACTIVE_LOCK':
+                this._watchState = 'ACTIVE_ERROR';
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active-error', 'mapboxgl-ctrl-geolocate-active-error');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting');
+                // turn marker grey
+                break;
+            case 'BACKGROUND':
+                this._watchState = 'BACKGROUND_ERROR';
+                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background', 'mapboxgl-ctrl-geolocate-background');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background-error', 'mapboxgl-ctrl-geolocate-background-error');
+                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting');
+                // turn marker grey
+                break;
+            case 'ACTIVE_ERROR':
+                break;
+            default:
+                assert(false, `Unexpected watchState ${this._watchState}`);
         }
     }
 
@@ -228,23 +228,23 @@ class GeolocateControl extends Evented implements IControl {
             this._lastKnownPosition = position;
 
             switch (this._watchState) {
-            case 'WAITING_ACTIVE':
-            case 'ACTIVE_LOCK':
-            case 'ACTIVE_ERROR':
-                this._watchState = 'ACTIVE_LOCK';
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting');
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active-error', 'mapboxgl-ctrl-geolocate-active-error');
-                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active');
-                break;
-            case 'BACKGROUND':
-            case 'BACKGROUND_ERROR':
-                this._watchState = 'BACKGROUND';
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting');
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background-error', 'mapboxgl-ctrl-geolocate-background-error');
-                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background', 'mapboxgl-ctrl-geolocate-background');
-                break;
-            default:
-                assert(false, `Unexpected watchState ${this._watchState}`);
+                case 'WAITING_ACTIVE':
+                case 'ACTIVE_LOCK':
+                case 'ACTIVE_ERROR':
+                    this._watchState = 'ACTIVE_LOCK';
+                    this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting');
+                    this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active-error', 'mapboxgl-ctrl-geolocate-active-error');
+                    this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active');
+                    break;
+                case 'BACKGROUND':
+                case 'BACKGROUND_ERROR':
+                    this._watchState = 'BACKGROUND';
+                    this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting');
+                    this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background-error', 'mapboxgl-ctrl-geolocate-background-error');
+                    this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-background', 'mapboxgl-ctrl-geolocate-background');
+                    break;
+                default:
+                    assert(false, `Unexpected watchState ${this._watchState}`);
             }
         }
 
@@ -429,23 +429,23 @@ class GeolocateControl extends Evented implements IControl {
     }
 
     /**
-    * Programmatically request and move the map to the user's location.
-    *
-    * @returns {boolean} Returns `false` if called before control was added to a map, otherwise returns `true`.
-    * @example
-    * // Initialize the geolocate control.
-    * var geolocate = new maplibregl.GeolocateControl({
-    *  positionOptions: {
-    *    enableHighAccuracy: true
-    *  },
-    *  trackUserLocation: true
-    * });
-    * // Add the control to the map.
-    * map.addControl(geolocate);
-    * map.on('load', function() {
-    *   geolocate.trigger();
-    * });
-    */
+     * Programmatically request and move the map to the user's location.
+     *
+     * @returns {boolean} Returns `false` if called before control was added to a map, otherwise returns `true`.
+     * @example
+     * // Initialize the geolocate control.
+     * var geolocate = new maplibregl.GeolocateControl({
+     *  positionOptions: {
+     *    enableHighAccuracy: true
+     *  },
+     *  trackUserLocation: true
+     * });
+     * // Add the control to the map.
+     * map.addControl(geolocate);
+     * map.on('load', function() {
+     *   geolocate.trigger();
+     * });
+     */
     trigger() {
         if (!this._setup) {
             warnOnce('Geolocate control triggered before added to a map');
@@ -454,53 +454,53 @@ class GeolocateControl extends Evented implements IControl {
         if (this.options.trackUserLocation) {
             // update watchState and do any outgoing state cleanup
             switch (this._watchState) {
-            case 'OFF':
+                case 'OFF':
                 // turn on the Geolocate Control
-                this._watchState = 'WAITING_ACTIVE';
-
-                this.fire(new Event('trackuserlocationstart'));
-                break;
-            case 'WAITING_ACTIVE':
-            case 'ACTIVE_LOCK':
-            case 'ACTIVE_ERROR':
-            case 'BACKGROUND_ERROR':
+                    this._watchState = 'WAITING_ACTIVE';
+
+                    this.fire(new Event('trackuserlocationstart'));
+                    break;
+                case 'WAITING_ACTIVE':
+                case 'ACTIVE_LOCK':
+                case 'ACTIVE_ERROR':
+                case 'BACKGROUND_ERROR':
                 // turn off the Geolocate Control
-                numberOfWatches--;
-                noTimeout = false;
-                this._watchState = 'OFF';
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting');
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active');
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active-error', 'mapboxgl-ctrl-geolocate-active-error');
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background', 'mapboxgl-ctrl-geolocate-background');
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background-error', 'mapboxgl-ctrl-geolocate-background-error');
-
-                this.fire(new Event('trackuserlocationend'));
-                break;
-            case 'BACKGROUND':
-                this._watchState = 'ACTIVE_LOCK';
-                this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background', 'mapboxgl-ctrl-geolocate-background');
-                // set camera to last known location
-                if (this._lastKnownPosition) this._updateCamera(this._lastKnownPosition);
+                    numberOfWatches--;
+                    noTimeout = false;
+                    this._watchState = 'OFF';
+                    this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting');
+                    this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active');
+                    this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-active-error', 'mapboxgl-ctrl-geolocate-active-error');
+                    this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background', 'mapboxgl-ctrl-geolocate-background');
+                    this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background-error', 'mapboxgl-ctrl-geolocate-background-error');
 
-                this.fire(new Event('trackuserlocationstart'));
-                break;
-            default:
-                assert(false, `Unexpected watchState ${this._watchState}`);
+                    this.fire(new Event('trackuserlocationend'));
+                    break;
+                case 'BACKGROUND':
+                    this._watchState = 'ACTIVE_LOCK';
+                    this._geolocateButton.classList.remove('maplibregl-ctrl-geolocate-background', 'mapboxgl-ctrl-geolocate-background');
+                    // set camera to last known location
+                    if (this._lastKnownPosition) this._updateCamera(this._lastKnownPosition);
+
+                    this.fire(new Event('trackuserlocationstart'));
+                    break;
+                default:
+                    assert(false, `Unexpected watchState ${this._watchState}`);
             }
 
             // incoming state setup
             switch (this._watchState) {
-            case 'WAITING_ACTIVE':
-                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting');
-                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active');
-                break;
-            case 'ACTIVE_LOCK':
-                this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active');
-                break;
-            case 'OFF':
-                break;
-            default:
-                assert(false, `Unexpected watchState ${this._watchState}`);
+                case 'WAITING_ACTIVE':
+                    this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-waiting', 'mapboxgl-ctrl-geolocate-waiting');
+                    this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active');
+                    break;
+                case 'ACTIVE_LOCK':
+                    this._geolocateButton.classList.add('maplibregl-ctrl-geolocate-active', 'mapboxgl-ctrl-geolocate-active');
+                    break;
+                case 'OFF':
+                    break;
+                default:
+                    assert(false, `Unexpected watchState ${this._watchState}`);
             }
 
             // manage geolocation.watchPosition / geolocation.clearWatch