[mapbox-gl] Update mapbox-gl to v1.6.0 (#40851)

types/mapbox-gl/index.d.ts

@@ -1,4 +1,4 @@
-// Type definitions for Mapbox GL JS 1.5
+// Type definitions for Mapbox GL JS 1.6
 // Project: https://github.com/mapbox/mapbox-gl-js
 // Definitions by: Dominik Bruderer <https://github.com/dobrud>
 //                 Patrick Reames <https://github.com/patrickr>
@@ -39,7 +39,7 @@ declare namespace mapboxgl {
      */
     export function clearStorage(callback?: (err?: Error) => void): void;
 
-    export function setRTLTextPlugin(pluginURL: string, callback: (error: Error) => void): void;
+    export function setRTLTextPlugin(pluginURL: string, callback: (error: Error) => void, deferred?: boolean): void;
     export function getRTLTextPluginStatus(): PluginStatus;
 
     type PluginStatus = 'unavailable' | 'loading' | 'loaded' | 'error';
@@ -405,6 +405,14 @@ declare namespace mapboxgl {
         /** If true, enable keyboard shortcuts (see KeyboardHandler). */
         keyboard?: boolean;
 
+        /** A patch to apply to the default localization table for UI strings, e.g. control tooltips.
+         * The `locale` object maps namespaced UI string IDs to translated strings in the target language;
+         * see `src/ui/default_locale.js` for an example with all supported string IDs.
+         * The object may specify all UI strings (thereby adding support for a new translation) or
+         * only a subset of strings (thereby patching the default translation table).
+        */
+        locale?: { [key: string]: string };
+
         /**
          * If specified, defines a CSS font-family for locally overriding generation of glyphs in the
          * 'CJK Unified Ideographs' and 'Hangul Syllables' ranges. In these ranges, font settings from
@@ -425,9 +433,15 @@ declare namespace mapboxgl {
         /** If set, the map is constrained to the given bounds. */
         maxBounds?: LngLatBoundsLike;
 
+        /** Maximum pitch of the map */
+        maxPitch?: number,
+
         /** Maximum zoom of the map */
         maxZoom?: number;
 
+        /** Minimum pitch of the map */
+        minPitch?: number,
+
         /** Minimum zoom of the map */
         minZoom?: number;
 
@@ -756,6 +770,41 @@ declare namespace mapboxgl {
         getMaxWidth(): string;
 
         setMaxWidth(maxWidth: string): this;
+
+        /**
+         * Adds a CSS class to the popup container element.
+         *
+         * @param {string} className Non-empty string with CSS class name to add to popup container
+         *
+         * @example
+         * let popup = new mapboxgl.Popup()
+         * popup.addClassName('some-class')
+         */
+        addClassName(className: string): void;
+
+        /**
+         * Removes a CSS class from the popup container element.
+         *
+         * @param {string} className Non-empty string with CSS class name to remove from popup container
+         *
+         * @example
+         * let popup = new mapboxgl.Popup()
+         * popup.removeClassName('some-class')
+         */
+        removeClassName(className: string): void;
+
+        /**
+         * Add or remove the given CSS class on the popup container, depending on whether the container currently has that class.
+         *
+         * @param {string} className Non-empty string with CSS class name to add/remove
+         *
+         * @returns {boolean} if the class was removed return false, if class was added, then return true
+         *
+         * @example
+         * let popup = new mapboxgl.Popup()
+         * popup.toggleClassName('toggleClass')
+         */
+        toggleClassName(className: string): void;
     }
 
     export interface PopupOptions {
@@ -1008,6 +1057,9 @@ declare namespace mapboxgl {
 
         setSouthWest(sw: LngLatLike): this;
 
+        /** Check if the point is within the bounding box. */
+        contains(lnglat: LngLatLike): boolean;
+
         /** Extend the bounds to include a given LngLat or LngLatBounds. */
         extend(obj: mapboxgl.LngLat | mapboxgl.LngLatBounds): this;
 
@@ -1170,16 +1222,45 @@ declare namespace mapboxgl {
         isDraggable(): boolean;
     }
 
+    type Alignment = 'map' | 'viewport' | 'auto';
+
     export interface MarkerOptions {
+        /** DOM element to use as a marker. The default is a light blue, droplet-shaped SVG marker */
         element?: HTMLElement;
 
+        /** The offset in pixels as a PointLike object to apply relative to the element's center. Negatives indicate left and up. */
         offset?: PointLike;
 
+        /** A string indicating the part of the Marker that should be positioned closest to the coordinate set via Marker.setLngLat.
+         * Options are `'center'`, `'top'`, `'bottom'`, `'left'`, `'right'`, `'top-left'`, `'top-right'`, `'bottom-left'`, and `'bottom-right'`.
+         * The default value os `'center'`
+        */
         anchor?: Anchor;
 
+        /** The color to use for the default marker if options.element is not provided. The default is light blue (#3FB1CE). */
         color?: string
 
+        /** A boolean indicating whether or not a marker is able to be dragged to a new position on the map. The default value is false */
         draggable?: boolean;
+
+        /** The rotation angle of the marker in degrees, relative to its `rotationAlignment` setting. A positive value will rotate the marker clockwise.
+         * The default value is 0.
+        */
+        rotation?: number,
+
+        /** `map` aligns the `Marker`'s rotation relative to the map, maintaining a bearing as the map rotates.
+         * `viewport` aligns the `Marker`'s rotation relative to the viewport, agnostic to map rotations.
+         * `auto` is equivalent to `viewport`.
+         * The default value is `auto`
+        */
+        rotationAlignment?: Alignment,
+
+        /** `map` aligns the `Marker` to the plane of the map.
+         * `viewport` aligns the `Marker` to the plane of the viewport.
+         * `auto` automatically matches the value of `rotationAlignment`.
+         * The default value is `auto`.
+         */
+        pitchAlignment?: Alignment
     }
 
     /**
@@ -1324,6 +1405,11 @@ declare namespace mapboxgl {
         offset?: PointLike;
         /** When set to false, no animation happens */
         animate?: boolean;
+
+        /** If `true`, then the animation is considered essential and will not be affected by `prefers-reduced-motion`.
+         * Otherwise, the transition will happen instantly if the user has enabled the `reduced motion` accesibility feature in their operating system.
+         */
+        essential?: boolean;
     }
 
     /**

types/mapbox-gl/mapbox-gl-tests.ts

@@ -18,12 +18,12 @@ mapboxgl.baseApiUrl = 'https://example.com';
 mapboxgl.workerCount = 3;
 
 /**
- * Set max amount of parallel images requests 
+ * Set max amount of parallel images requests
  */
 mapboxgl.maxParallelImageRequests = 10;
 
 /**
- * Clears browser storage used by this library 
+ * Clears browser storage used by this library
  */
 mapboxgl.clearStorage(() => {});
 
@@ -32,6 +32,10 @@ mapboxgl.clearStorage(() => {});
  */
 expectType<mapboxgl.PluginStatus>(mapboxgl.getRTLTextPluginStatus());
 
+/**
+ * Set RTL Text Plugin
+ */
+expectType<void>(mapboxgl.setRTLTextPlugin('http://github.com', e => {}, false));
 
 /**
  * Display a Map
@@ -42,7 +46,9 @@ let map = new mapboxgl.Map({
 	center: [-50, 50],
 	zoom: 10,
 	minZoom: 1,
-	maxZoom: 2,
+    maxZoom: 2,
+    minPitch: 0,
+    maxPitch: 60,
 	interactive: true,
 	attributionControl: true,
 	customAttribution: '© YourCo',
@@ -52,7 +58,11 @@ let map = new mapboxgl.Map({
 	boxZoom: true,
 	dragRotate: false,
 	dragPan: true,
-	antialias: true,
+    antialias: true,
+    locale: {
+        'FullscreenControl.Enter': 'Розгорнути на весь екран',
+        'FullscreenControl.Exit': 'Вийти з повоноеранного режиму'
+    }
 });
 
 /**
@@ -374,6 +384,9 @@ const popup = new mapboxgl.Popup(popupOptions)
 	.addTo(map);
 popup.getMaxWidth();
 popup.getElement();  // $ExpectType HTMLElement
+popup.addClassName('class1');
+popup.removeClassName('class2');
+popup.toggleClassName('class3');
 
 /**
  * Add an image
@@ -600,7 +613,16 @@ map = new mapboxgl.Map({
 /**
  * Marker
  */
-let marker = new mapboxgl.Marker(undefined, {offset: [10, 0]})
+let marker = new mapboxgl.Marker(undefined, {
+        element: undefined,
+        offset: [10, 0],
+        anchor: 'bottom-right',
+        color: 'green',
+        draggable: false,
+        rotation: 15,
+        rotationAlignment: 'map',
+        pitchAlignment: 'viewport'
+    })
 	.setLngLat([-50,50])
 	.addTo(map);
 
@@ -612,6 +634,8 @@ marker.remove();
 let bool:boolean;
 let bounds = new mapboxgl.LngLatBounds();
 bool = bounds.isEmpty();
+expectType<boolean>(bounds.contains([37, 50]));
+
 /*
  * AttributionControl
  */
@@ -718,7 +742,9 @@ let padding: mapboxgl.PaddingOptions = {
 	left: 0,
 	right: 0,
 };
-let animOpts: mapboxgl.AnimationOptions;
+let animOpts: mapboxgl.AnimationOptions = {
+    essential: true
+};
 let cameraOpts: mapboxgl.CameraOptions = {
 	around: lnglatlike,
 	center: lnglatlike,