maplibre-gl 2.0.4 → 2.1.2

package/src/ui/camera.ts

@@ -14,6 +14,14 @@ import type {LngLatBoundsLike} from '../geo/lng_lat_bounds';
 import type {TaskID} from '../util/task_queue';
 import type {PaddingOptions} from '../geo/edge_insets';
 
+/**
+ * A [Point](https://github.com/mapbox/point-geometry) or an array of two numbers representing `x` and `y` screen coordinates in pixels.
+ *
+ * @typedef {(Point | [number, number])} PointLike
+ * @example
+ * var p1 = new Point(-77, 38); // a PointLike which is a Point
+ * var p2 = [-77, 38]; // a PointLike which is an array of two numbers
+ */
 export type PointLike = Point | [number, number];
 
 export type RequireAtLeastOne<T> = { [K in keyof T]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<keyof T, K>>>; }[keyof T];
@@ -50,8 +58,8 @@ export type RequireAtLeastOne<T> = { [K in keyof T]-?: Required<Pick<T, K>> & Pa
  * @see [Display buildings in 3D](https://maplibre.org/maplibre-gl-js-docs/example/3d-buildings/)
  */
 export type CameraOptions = CenterZoomBearing & {
-  pitch?: number;
-  around?: LngLatLike;
+    pitch?: number;
+    around?: LngLatLike;
 };
 
 export type CenterZoomBearing = {
@@ -107,11 +115,11 @@ export type FitBoundsOptions = FlyToOptions & {
  *   [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion).
  */
 export type AnimationOptions = {
-  duration?: number;
-  easing?: (_: number) => number;
-  offset?: PointLike;
-  animate?: boolean;
-  essential?: boolean;
+    duration?: number;
+    easing?: (_: number) => number;
+    offset?: PointLike;
+    animate?: boolean;
+    essential?: boolean;
 };
 
 abstract class Camera extends Evented {
@@ -125,8 +133,8 @@ abstract class Camera extends Evented {
     _bearingSnap: number;
     _easeStart: number;
     _easeOptions: {
-      duration?: number;
-      easing?: (_: number) => number;
+        duration?: number;
+        easing?: (_: number) => number;
     };
     _easeId: string | void;
 
@@ -138,7 +146,7 @@ abstract class Camera extends Evented {
     abstract _cancelRenderFrame(_: TaskID): void;
 
     constructor(transform: Transform, options: {
-      bearingSnap: number;
+        bearingSnap: number;
     }) {
         super();
         this._moving = false;
@@ -613,7 +621,7 @@ abstract class Camera extends Evented {
      * @fires movestart
      * @fires moveend
      * @returns {Map} `this`
-	 * @example
+     * @example
      * var bbox = [[-79, 43], [-73, 45]];
      * map.fitBounds(bbox, {
      *   padding: {top: 10, bottom:25, left: 15, right: 5}
@@ -648,7 +656,7 @@ abstract class Camera extends Evented {
      * @fires movestart
      * @fires moveend
      * @returns {Map} `this`
-	 * @example
+     * @example
      * var p0 = [220, 400];
      * var p1 = [500, 900];
      * map.fitScreenCoordinates(p0, p1, map.getBearing(), {
@@ -794,8 +802,8 @@ abstract class Camera extends Evented {
      * @see [Navigate the map with game-like controls](https://maplibre.org/maplibre-gl-js-docs/example/game-controls/)
      */
     easeTo(options: EaseToOptions & {
-      easeId?: string;
-      noMoveStart?: boolean;
+        easeId?: string;
+        noMoveStart?: boolean;
     }, eventData?: any) {
         this._stop(false, options.easeId);
 
@@ -1201,12 +1209,12 @@ abstract class Camera extends Evented {
     }
 
     _ease(frame: (_: number) => void,
-          finish: () => void,
-          options: {
+        finish: () => void,
+        options: {
             animate?: boolean;
             duration?: number;
             easing?: (_: number) => number;
-          }) {
+        }) {
         if (options.animate === false || options.duration === 0) {
             frame(1);
             finish();
@@ -1248,7 +1256,7 @@ abstract class Camera extends Evented {
         const delta = center.lng - tr.center.lng;
         center.lng +=
             delta > 180 ? -360 :
-            delta < -180 ? 360 : 0;
+                delta < -180 ? 360 : 0;
     }
 }
 

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'});