maplibre-gl 3.1.0 → 3.2.0-pre.2

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

@@ -1,4 +1,4 @@
-import AttributionControl from './attribution_control';
+import {AttributionControl} from './attribution_control';
 import {createMap as globalCreateMap, beforeMapTest} from '../../util/test/util';
 import simulate from '../../../test/unit/lib/simulate_interaction';
 import {fakeServer} from 'nise';

package/src/ui/control/attribution_control.ts

@@ -1,28 +1,37 @@
-import DOM from '../../util/dom';
-import {bindAll} from '../../util/util';
+import {DOM} from '../../util/dom';
 
-import type Map from '../map';
+import type {Map} from '../map';
 import type {ControlPosition, IControl} from './control';
-
+import type {MapDataEvent} from '../events';
+import type {StyleSpecification} from '@maplibre/maplibre-gl-style-spec';
+/**
+ * The {@link AttributionControl} options
+ */
 type AttributionOptions = {
+    /**
+     * If `true`, the attribution control will always collapse when moving the map. If `false`,
+     * force the expanded attribution control. The default is a responsive attribution that collapses when the user moves the map on maps less than 640 pixels wide.
+     * **Attribution should not be collapsed if it can comfortably fit on the map. `compact` should only be used to modify default attribution when map size makes it impossible to fit default attribution and when the automatic compact resizing for default settings are not sufficient.**
+     */
     compact?: boolean;
+    /**
+     * Attributions to show in addition to any other attributions.
+     */
     customAttribution?: string | Array<string>;
 };
 
 /**
  * An `AttributionControl` control presents the map's attribution information. By default, the attribution control is expanded (regardless of map width).
- *
- * @implements {IControl}
- * @param {AttributionOptions} [options]
- * @param {boolean} [options.compact] If `true`, the attribution control will always collapse when moving the map. If `false`, force the expanded attribution control. The default is a responsive attribution that collapses when the user moves the map on maps less than 640 pixels wide.  **Attribution should not be collapsed if it can comfortably fit on the map. `compact` should only be used to modify default attribution when map size makes it impossible to fit default attribution and when the automatic compact resizing for default settings are not sufficient.**
- * @param {string | Array<string>} [options.customAttribution] String or strings to show in addition to any other attributions.
+ * @group Markers and Controls
  * @example
- * var map = new maplibregl.Map({attributionControl: false})
+ * ```ts
+ * let map = new maplibregl.Map({attributionControl: false})
  *     .addControl(new maplibregl.AttributionControl({
  *         compact: true
  *     }));
+ * ```
  */
-class AttributionControl implements IControl {
+export class AttributionControl implements IControl {
     options: AttributionOptions;
     _map: Map;
     _compact: boolean;
@@ -34,21 +43,18 @@ class AttributionControl implements IControl {
     styleId: string;
     styleOwner: string;
 
+    /**
+     * @param options - the attribution options
+     */
     constructor(options: AttributionOptions = {}) {
         this.options = options;
-
-        bindAll([
-            '_toggleAttribution',
-            '_updateData',
-            '_updateCompact',
-            '_updateCompactMinimize'
-        ], this);
     }
 
     getDefaultPosition(): ControlPosition {
         return 'bottom-right';
     }
 
+    /** {@inheritDoc IControl.onAdd} */
     onAdd(map: Map) {
         this._map = map;
         this._compact = this.options && this.options.compact;
@@ -70,6 +76,7 @@ class AttributionControl implements IControl {
         return this._container;
     }
 
+    /** {@inheritDoc IControl.onRemove} */
     onRemove() {
         DOM.remove(this._container);
 
@@ -90,7 +97,7 @@ class AttributionControl implements IControl {
         element.setAttribute('aria-label', str);
     }
 
-    _toggleAttribution() {
+    _toggleAttribution = () => {
         if (this._container.classList.contains('maplibregl-compact')) {
             if (this._container.classList.contains('maplibregl-compact-show')) {
                 this._container.setAttribute('open', '');
@@ -100,13 +107,13 @@ class AttributionControl implements IControl {
                 this._container.removeAttribute('open');
             }
         }
-    }
+    };
 
-    _updateData(e: any) {
+    _updateData = (e: MapDataEvent) => {
         if (e && (e.sourceDataType === 'metadata' || e.sourceDataType === 'visibility' || e.dataType === 'style' || e.type === 'terrain')) {
             this._updateAttributions();
         }
-    }
+    };
 
     _updateAttributions() {
         if (!this._map.style) return;
@@ -125,7 +132,7 @@ class AttributionControl implements IControl {
         }
 
         if (this._map.style.stylesheet) {
-            const stylesheet: any = this._map.style.stylesheet;
+            const stylesheet = this._map.style.stylesheet as StyleSpecification & { owner: string; id: string };
             this.styleOwner = stylesheet.owner;
             this.styleId = stylesheet.id;
         }
@@ -171,7 +178,7 @@ class AttributionControl implements IControl {
         this._editLink = null;
     }
 
-    _updateCompact() {
+    _updateCompact = () => {
         if (this._map.getCanvasContainer().offsetWidth <= 640 || this._compact) {
             if (this._compact === false) {
                 this._container.setAttribute('open', '');
@@ -185,16 +192,13 @@ class AttributionControl implements IControl {
                 this._container.classList.remove('maplibregl-compact', 'maplibregl-compact-show');
             }
         }
-    }
+    };
 
-    _updateCompactMinimize() {
+    _updateCompactMinimize = () => {
         if (this._container.classList.contains('maplibregl-compact')) {
             if (this._container.classList.contains('maplibregl-compact-show')) {
                 this._container.classList.remove('maplibregl-compact-show');
             }
         }
-    }
-
+    };
 }
-
-export default AttributionControl;

package/src/ui/control/control.ts

@@ -1,5 +1,11 @@
+import type {Map} from '../map';
+
+/**
+ * A position defintion for the control to be placed, can be in one of the corners of the map.
+ * When two or more controls are places in the same location they are stacked toward the center of the map.
+ */
 export type ControlPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-import type Map from '../map';
+
 /**
  * Interface for interactive controls added to the map. This is a
  * specification for implementers to model: it is not
@@ -10,9 +16,9 @@ import type Map from '../map';
  * default control styling, add the `maplibregl-ctrl` class to your control's
  * node.
  *
- * @interface IControl
  * @example
- * // Control implemented as ES6 class
+ * Control implemented as ES6 class
+ * ```ts
  * class HelloWorldControl {
  *     onAdd(map) {
  *         this._map = map;
@@ -43,6 +49,7 @@ import type Map from '../map';
  *      this._container.parentNode.removeChild(this._container);
  *      this._map = undefined;
  * };
+ * ```
  */
 export interface IControl {
     /**
@@ -50,12 +57,8 @@ export interface IControl {
      * 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
+     * @param map - the Map this control will be added to
+     * @returns 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.
@@ -66,12 +69,7 @@ export interface IControl {
      * 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
+     * @param map - the Map this control will be removed from
      */
     onRemove(map: Map): void;
     /**
@@ -80,11 +78,7 @@ export interface IControl {
      * 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.
+     * @returns a control position, one of the values valid in addControl.
      */
     readonly getDefaultPosition?: () => ControlPosition;
 }

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

@@ -1,5 +1,5 @@
 import {createMap, beforeMapTest} from '../../util/test/util';
-import FullscreenControl from './fullscreen_control';
+import {FullscreenControl} from './fullscreen_control';
 
 beforeEach(() => {
     beforeMapTest();

package/src/ui/control/fullscreen_control.ts

@@ -1,12 +1,18 @@
-import DOM from '../../util/dom';
+import {DOM} from '../../util/dom';
 
 import {warnOnce} from '../../util/util';
 
 import {Event, Evented} from '../../util/evented';
-import type {default as Map, GestureOptions} from '../map';
+import type {Map, GestureOptions} from '../map';
 import type {IControl} from './control';
 
+/**
+ * The {@link FullscreenControl} options
+ */
 type FullscreenOptions = {
+    /**
+     * `container` is the [compatible DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen#Compatible_elements) which should be made full screen. By default, the map container element will be made full screen.
+     */
     container?: HTMLElement;
 };
 
@@ -16,32 +22,22 @@ type FullscreenOptions = {
  * The map's `cooperativeGestures` option is temporarily disabled while the map
  * is in fullscreen mode, and is restored when the map exist fullscreen mode.
  *
- * @implements {IControl}
- * @param {FullscreenOptions} [options]
- * @param {HTMLElement} [options.container] `container` is the [compatible DOM element](https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen#Compatible_elements) which should be made full screen. By default, the map container element will be made full screen.
+ * @group Markers and Controls
+ * @param options - the full screen control options
  *
  * @example
+ * ```ts
  * map.addControl(new maplibregl.FullscreenControl({container: document.querySelector('body')}));
- * @see [View a fullscreen map](https://maplibre.org/maplibre-gl-js-docs/example/fullscreen/)
- */
-
-/**
- * Fired when fullscreen mode has started
+ * ```
+ * @see [View a fullscreen map](https://maplibre.org/maplibre-gl-js/docs/examples/fullscreen/)
  *
- * @event fullscreenstart
- * @memberof FullscreenControl
- * @instance
- */
-
-/**
- * Fired when fullscreen mode has ended
+ * ### Events
+ *
+ * @event `fullscreenstart` - Fired when fullscreen mode has started
  *
- * @event fullscreenend
- * @memberof FullscreenControl
- * @instance
+ * @event `fullscreenend` - Fired when fullscreen mode has ended
  */
-
-class FullscreenControl extends Evented implements IControl {
+export class FullscreenControl extends Evented implements IControl {
     _map: Map;
     _controlContainer: HTMLElement;
     _fullscreen: boolean;
@@ -73,7 +69,8 @@ class FullscreenControl extends Evented implements IControl {
         }
     }
 
-    onAdd(map: Map) {
+    /** {@inheritDoc IControl.onAdd} */
+    onAdd(map: Map): HTMLElement {
         this._map = map;
         if (!this._container) this._container = this._map.getContainer();
         this._controlContainer = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-group');
@@ -81,6 +78,7 @@ class FullscreenControl extends Evented implements IControl {
         return this._controlContainer;
     }
 
+    /** {@inheritDoc IControl.onRemove} */
     onRemove() {
         DOM.remove(this._controlContainer);
         this._map = null;
@@ -185,6 +183,3 @@ class FullscreenControl extends Evented implements IControl {
         this._map.resize();
     }
 }
-
-export default FullscreenControl;
-

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

@@ -1,19 +1,19 @@
 import geolocation from 'mock-geolocation';
-import LngLatBounds from '../../geo/lng_lat_bounds';
+import {LngLatBounds} from '../../geo/lng_lat_bounds';
 import {createMap, beforeMapTest} from '../../util/test/util';
-import GeolocateControl from './geolocate_control';
+import {GeolocateControl} from './geolocate_control';
 jest.mock('../../util/geolocation_support', () => (
     {
         checkGeolocationSupport: jest.fn()
     }
 ));
 import {checkGeolocationSupport} from '../../util/geolocation_support';
-import type LngLat from '../../geo/lng_lat';
+import type {LngLat} from '../../geo/lng_lat';
 
 /**
  * Convert the coordinates of a LngLat object to a fixed number of digits
- * @param lngLat {LngLatLike} the location
- * @param digits {number} digits the number of digits to set
+ * @param lngLat - the location
+ * @param digits - digits the number of digits to set
  * @returns a string representation of the object with the required number of digits
  */
 function lngLatAsFixed(lngLat: LngLat, digits: number): {lat: string; lng: string} {