maplibre-gl 3.1.0 → 3.2.0-pre.2

package/src/ui/control/navigation_control.ts

@@ -1,16 +1,28 @@
 import Point from '@mapbox/point-geometry';
 
-import DOM from '../../util/dom';
-import {extend, bindAll} from '../../util/util';
+import {DOM} from '../../util/dom';
+import {extend} from '../../util/util';
 import {generateMousePitchHandler, generateMouseRotationHandler, MousePitchHandler, MouseRotateHandler} from '../handler/mouse';
 import {generateOneFingerTouchPitchHandler, generateOneFingerTouchRotationHandler, OneFingerTouchPitchHandler, OneFingerTouchRotateHandler} from '../handler/one_finger_touch_drag';
 
-import type Map from '../map';
+import type {Map} from '../map';
 import type {IControl} from './control';
 
+/**
+ * The {@link NavigationControl} options object
+ */
 type NavigationOptions = {
+    /**
+     * If `true` the compass button is included.
+     */
     showCompass?: boolean;
+    /**
+     * If `true` the zoom-in and zoom-out buttons are included.
+     */
     showZoom?: boolean;
+    /**
+     * If `true` the pitch is visualized by rotating X-axis of compass.
+     */
     visualizePitch?: boolean;
 };
 
@@ -23,18 +35,17 @@ const defaultOptions: NavigationOptions = {
 /**
  * A `NavigationControl` control contains zoom buttons and a compass.
  *
- * @implements {IControl}
- * @param {NavigationOptions} [options]
- * @param {boolean} [options.showCompass=true] If `true` the compass button is included.
- * @param {boolean} [options.showZoom=true] If `true` the zoom-in and zoom-out buttons are included.
- * @param {boolean} [options.visualizePitch=false] If `true` the pitch is visualized by rotating X-axis of compass.
+ * @group Markers and Controls
+ *
  * @example
- * var nav = new maplibregl.NavigationControl();
+ * ```ts
+ * let nav = new maplibregl.NavigationControl();
  * map.addControl(nav, 'top-left');
- * @see [Display map navigation controls](https://maplibre.org/maplibre-gl-js-docs/example/navigation/)
- * @see [Add a third party vector tile source](https://maplibre.org/maplibre-gl-js-docs/example/third-party/)
+ * ```
+ * @see [Display map navigation controls](https://maplibre.org/maplibre-gl-js/docs/examples/navigation/)
+ * @see [Add a third party vector tile source](https://maplibre.org/maplibre-gl-js/docs/examples/third-party/)
  */
-class NavigationControl implements IControl {
+export class NavigationControl implements IControl {
     _map: Map;
     options: NavigationOptions;
     _container: HTMLElement;
@@ -44,6 +55,9 @@ class NavigationControl implements IControl {
     _compassIcon: HTMLElement;
     _handler: MouseRotateWrapper;
 
+    /**
+     * @param options - the control's options
+     */
     constructor(options?: NavigationOptions) {
         this.options = extend({}, defaultOptions, options);
 
@@ -51,19 +65,12 @@ class NavigationControl implements IControl {
         this._container.addEventListener('contextmenu', (e) => e.preventDefault());
 
         if (this.options.showZoom) {
-            bindAll([
-                '_setButtonTitle',
-                '_updateZoomButtons'
-            ], this);
             this._zoomInButton = this._createButton('maplibregl-ctrl-zoom-in', (e) => this._map.zoomIn({}, {originalEvent: e}));
             DOM.create('span', 'maplibregl-ctrl-icon', this._zoomInButton).setAttribute('aria-hidden', 'true');
             this._zoomOutButton = this._createButton('maplibregl-ctrl-zoom-out', (e) => this._map.zoomOut({}, {originalEvent: e}));
             DOM.create('span', 'maplibregl-ctrl-icon', this._zoomOutButton).setAttribute('aria-hidden', 'true');
         }
         if (this.options.showCompass) {
-            bindAll([
-                '_rotateCompassArrow'
-            ], this);
             this._compass = this._createButton('maplibregl-ctrl-compass', (e) => {
                 if (this.options.visualizePitch) {
                     this._map.resetNorthPitch({}, {originalEvent: e});
@@ -76,7 +83,7 @@ class NavigationControl implements IControl {
         }
     }
 
-    _updateZoomButtons() {
+    _updateZoomButtons = () => {
         const zoom = this._map.getZoom();
         const isMax = zoom === this._map.getMaxZoom();
         const isMin = zoom === this._map.getMinZoom();
@@ -84,15 +91,15 @@ class NavigationControl implements IControl {
         this._zoomOutButton.disabled = isMin;
         this._zoomInButton.setAttribute('aria-disabled', isMax.toString());
         this._zoomOutButton.setAttribute('aria-disabled', isMin.toString());
-    }
+    };
 
-    _rotateCompassArrow() {
+    _rotateCompassArrow = () => {
         const rotate = this.options.visualizePitch ?
             `scale(${1 / Math.pow(Math.cos(this._map.transform.pitch * (Math.PI / 180)), 0.5)}) rotateX(${this._map.transform.pitch}deg) rotateZ(${this._map.transform.angle * (180 / Math.PI)}deg)` :
             `rotate(${this._map.transform.angle * (180 / Math.PI)}deg)`;
 
         this._compassIcon.style.transform = rotate;
-    }
+    };
 
     onAdd(map: Map) {
         this._map = map;
@@ -138,11 +145,11 @@ class NavigationControl implements IControl {
         return a;
     }
 
-    _setButtonTitle(button: HTMLButtonElement, title: string) {
+    _setButtonTitle = (button: HTMLButtonElement, title: string) => {
         const str = this._map._getUIString(`NavigationControl.${title}`);
         button.title = str;
         button.setAttribute('aria-label', str);
-    }
+    };
 }
 
 class MouseRotateWrapper {
@@ -171,7 +178,6 @@ class MouseRotateWrapper {
             this.touchPitch = generateOneFingerTouchPitchHandler({clickTolerance: mapPitchTolerance, enable: true});
         }
 
-        bindAll(['mousedown', 'mousemove', 'mouseup', 'touchstart', 'touchmove', 'touchend', 'reset'], this);
         DOM.addEventListener(element, 'mousedown', this.mousedown);
         DOM.addEventListener(element, 'touchstart', this.touchstart, {passive: false});
         DOM.addEventListener(element, 'touchcancel', this.reset);
@@ -227,23 +233,23 @@ class MouseRotateWrapper {
         DOM.removeEventListener(window, 'touchend', this.touchend);
     }
 
-    mousedown(e: MouseEvent) {
+    mousedown = (e: MouseEvent) => {
         this.startMouse(extend({}, e, {ctrlKey: true, preventDefault: () => e.preventDefault()}), DOM.mousePos(this.element, e));
         DOM.addEventListener(window, 'mousemove', this.mousemove);
         DOM.addEventListener(window, 'mouseup', this.mouseup);
-    }
+    };
 
-    mousemove(e: MouseEvent) {
+    mousemove = (e: MouseEvent) => {
         this.moveMouse(e, DOM.mousePos(this.element, e));
-    }
+    };
 
-    mouseup(e: MouseEvent) {
+    mouseup = (e: MouseEvent) => {
         this.mouseRotate.dragEnd(e);
         if (this.mousePitch) this.mousePitch.dragEnd(e);
         this.offTemp();
-    }
+    };
 
-    touchstart(e: TouchEvent) {
+    touchstart = (e: TouchEvent) => {
         if (e.targetTouches.length !== 1) {
             this.reset();
         } else {
@@ -252,18 +258,18 @@ class MouseRotateWrapper {
             DOM.addEventListener(window, 'touchmove', this.touchmove, {passive: false});
             DOM.addEventListener(window, 'touchend', this.touchend);
         }
-    }
+    };
 
-    touchmove(e: TouchEvent) {
+    touchmove = (e: TouchEvent) => {
         if (e.targetTouches.length !== 1) {
             this.reset();
         } else {
             this._lastPos = DOM.touchPos(this.element, e.targetTouches)[0];
             this.moveTouch(e, this._lastPos);
         }
-    }
+    };
 
-    touchend(e: TouchEvent) {
+    touchend = (e: TouchEvent) => {
         if (e.targetTouches.length === 0 &&
             this._startPos &&
             this._lastPos &&
@@ -273,9 +279,9 @@ class MouseRotateWrapper {
         delete this._startPos;
         delete this._lastPos;
         this.offTemp();
-    }
+    };
 
-    reset() {
+    reset = () => {
         this.mouseRotate.reset();
         if (this.mousePitch) this.mousePitch.reset();
         this.touchRotate.reset();
@@ -283,7 +289,5 @@ class MouseRotateWrapper {
         delete this._startPos;
         delete this._lastPos;
         this.offTemp();
-    }
+    };
 }
-
-export default NavigationControl;

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

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

package/src/ui/control/scale_control.ts

@@ -1,13 +1,27 @@
-import DOM from '../../util/dom';
-import {extend, bindAll} from '../../util/util';
+import {DOM} from '../../util/dom';
+import {extend} from '../../util/util';
 
-import type Map from '../map';
+import type {Map} from '../map';
 import type {ControlPosition, IControl} from './control';
 
+/**
+ * The unit type for length to use for the {@link ScaleControl}
+ */
 export type Unit = 'imperial' | 'metric' | 'nautical';
 
+/**
+ * The {@link ScaleControl} options object
+ */
 type ScaleOptions = {
+    /**
+     * The maximum length of the scale control in pixels.
+     * @defaultValue 100
+     */
     maxWidth?: number;
+    /**
+     * Unit of the distance (`'imperial'`, `'metric'` or `'nautical'`).
+     * @defaultValue 'metric'
+     */
     unit?: Unit;
 };
 
@@ -19,41 +33,37 @@ const defaultOptions: ScaleOptions = {
 /**
  * A `ScaleControl` control displays the ratio of a distance on the map to the corresponding distance on the ground.
  *
- * @implements {IControl}
- * @param {ScaleOptions} [options]
- * @param {number} [options.maxWidth='100'] The maximum length of the scale control in pixels.
- * @param {string} [options.unit='metric'] Unit of the distance (`'imperial'`, `'metric'` or `'nautical'`).
+ * @group Markers and Controls
+ *
  * @example
- * var scale = new maplibregl.ScaleControl({
+ * ```ts
+ * let scale = new maplibregl.ScaleControl({
  *     maxWidth: 80,
  *     unit: 'imperial'
  * });
  * map.addControl(scale);
  *
  * scale.setUnit('metric');
+ * ```
  */
-class ScaleControl implements IControl {
+export class ScaleControl implements IControl {
     _map: Map;
     _container: HTMLElement;
     options: ScaleOptions;
 
     constructor(options: ScaleOptions) {
         this.options = extend({}, defaultOptions, options);
-
-        bindAll([
-            '_onMove',
-            'setUnit'
-        ], this);
     }
 
     getDefaultPosition(): ControlPosition {
         return 'bottom-left';
     }
 
-    _onMove() {
+    _onMove = () => {
         updateScale(this._map, this._container, this.options);
-    }
+    };
 
+    /** {@inheritDoc IControl.onAdd} */
     onAdd(map: Map) {
         this._map = map;
         this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-scale', map.getContainer());
@@ -64,6 +74,7 @@ class ScaleControl implements IControl {
         return this._container;
     }
 
+    /** {@inheritDoc IControl.onRemove} */
     onRemove() {
         DOM.remove(this._container);
         this._map.off('move', this._onMove);
@@ -73,16 +84,14 @@ class ScaleControl implements IControl {
     /**
      * Set the scale's unit of the distance
      *
-     * @param unit Unit of the distance (`'imperial'`, `'metric'` or `'nautical'`).
+     * @param unit - Unit of the distance (`'imperial'`, `'metric'` or `'nautical'`).
      */
-    setUnit(unit: Unit) {
+    setUnit = (unit: Unit) => {
         this.options.unit = unit;
         updateScale(this._map, this._container, this.options);
-    }
+    };
 }
 
-export default ScaleControl;
-
 function updateScale(map, container, options) {
     // A horizontal scale is imagined to be present at center of the map
     // container with maximum length (Default) as 100px.

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

@@ -1,4 +1,4 @@
-import TerrainControl from './terrain_control';
+import {TerrainControl} from './terrain_control';
 import {createMap as globalCreateMap, beforeMapTest} from '../../util/test/util';
 
 function createMap() {

package/src/ui/control/terrain_control.ts

@@ -1,24 +1,23 @@
-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 {IControl} from './control';
 import type {TerrainSpecification} from '@maplibre/maplibre-gl-style-spec';
 
 /**
  * A `TerrainControl` control contains a button for turning the terrain on and off.
  *
- * @implements {IControl}
- * @param {TerrainSpecification} [options]
- * @param {string} [options.source] The ID of the raster-dem source to use.
- * @param {number} [options.exaggeration]
+ * @group Markers and Controls
+ *
  * @example
- * var map = new maplibregl.Map({TerrainControl: false})
+ * ```ts
+ * let map = new maplibregl.Map({TerrainControl: false})
  *     .addControl(new maplibregl.TerrainControl({
  *         source: "terrain"
  *     }));
+ * ```
  */
-export default class TerrainControl implements IControl {
+export class TerrainControl implements IControl {
     options: TerrainSpecification;
     _map: Map;
     _container: HTMLElement;
@@ -26,13 +25,9 @@ export default class TerrainControl implements IControl {
 
     constructor(options: TerrainSpecification) {
         this.options = options;
-
-        bindAll([
-            '_toggleTerrain',
-            '_updateTerrainIcon',
-        ], this);
     }
 
+    /** {@inheritDoc IControl.onAdd} */
     onAdd(map: Map) {
         this._map = map;
         this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-group');
@@ -46,22 +41,23 @@ export default class TerrainControl implements IControl {
         return this._container;
     }
 
+    /** {@inheritDoc IControl.onRemove} */
     onRemove() {
         DOM.remove(this._container);
         this._map.off('terrain', this._updateTerrainIcon);
         this._map = undefined;
     }
 
-    _toggleTerrain() {
+    _toggleTerrain = () => {
         if (this._map.getTerrain()) {
             this._map.setTerrain(null);
         } else {
             this._map.setTerrain(this.options);
         }
         this._updateTerrainIcon();
-    }
+    };
 
-    _updateTerrainIcon() {
+    _updateTerrainIcon = () => {
         this._terrainButton.classList.remove('maplibregl-ctrl-terrain');
         this._terrainButton.classList.remove('maplibregl-ctrl-terrain-enabled');
         if (this._map.terrain) {
@@ -71,5 +67,5 @@ export default class TerrainControl implements IControl {
             this._terrainButton.classList.add('maplibregl-ctrl-terrain');
             this._terrainButton.title = this._map._getUIString('TerrainControl.enableTerrain');
         }
-    }
+    };
 }

package/src/ui/default_locale.ts

@@ -1,4 +1,4 @@
-const defaultLocale = {
+export const defaultLocale = {
     'AttributionControl.ToggleAttribution': 'Toggle attribution',
     'AttributionControl.MapFeedback': 'Map feedback',
     'FullscreenControl.Enter': 'Enter fullscreen',
@@ -17,5 +17,3 @@ const defaultLocale = {
     'TerrainControl.enableTerrain': 'Enable terrain',
     'TerrainControl.disableTerrain': 'Disable terrain'
 };
-
-export default defaultLocale;