maplibre-gl 2.0.5 → 2.1.3

package/src/ui/marker.test.ts

@@ -3,7 +3,7 @@ import Marker from './marker';
 import Popup from './popup';
 import LngLat from '../geo/lng_lat';
 import Point from '@mapbox/point-geometry';
-import simulate from '../../test/util/simulate_interaction';
+import simulate from '../../test/unit/lib/simulate_interaction';
 
 function createMap(options = {}) {
     const container = window.document.createElement('div');
@@ -46,16 +46,16 @@ describe('marker', () => {
 
         // initial dimensions of svg element
         expect(
-        defaultMarker.getElement().children[0].getAttribute('height').includes('41')
+            defaultMarker.getElement().children[0].getAttribute('height').includes('41')
         ).toBeTruthy();
         expect(defaultMarker.getElement().children[0].getAttribute('width').includes('27')).toBeTruthy();
 
         // (41 * 0.8) = 32.8, (27 * 0.8) = 21.6
         expect(
-        smallerMarker.getElement().children[0].getAttribute('height').includes('32.8')
+            smallerMarker.getElement().children[0].getAttribute('height').includes('32.8')
         ).toBeTruthy();
         expect(
-        smallerMarker.getElement().children[0].getAttribute('width').includes('21.6')
+            smallerMarker.getElement().children[0].getAttribute('width').includes('21.6')
         ).toBeTruthy();
 
         // (41 * 2) = 82, (27 * 2) = 54
@@ -287,49 +287,49 @@ describe('marker', () => {
 
         // marker should default to above since it has enough space
         expect(
-        marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-bottom')
+            marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-bottom')
         ).toBeTruthy();
 
         // move marker to the top forcing the popup to below
         marker.setLngLat(map.unproject([mapHeight / 2, markerTop]));
         expect(
-        marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-top')
+            marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-top')
         ).toBeTruthy();
 
         // move marker to the right forcing the popup to the left
         marker.setLngLat(map.unproject([mapHeight - markerRight, mapHeight / 2]));
         expect(
-        marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-right')
+            marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-right')
         ).toBeTruthy();
 
         // move marker to the left forcing the popup to the right
         marker.setLngLat(map.unproject([markerRight, mapHeight / 2]));
         expect(
-        marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-left')
+            marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-left')
         ).toBeTruthy();
 
         // move marker to the top left forcing the popup to the bottom right
         marker.setLngLat(map.unproject([markerRight, markerTop]));
         expect(
-        marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-top-left')
+            marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-top-left')
         ).toBeTruthy();
 
         // move marker to the top right forcing the popup to the bottom left
         marker.setLngLat(map.unproject([mapHeight - markerRight, markerTop]));
         expect(
-        marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-top-right')
+            marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-top-right')
         ).toBeTruthy();
 
         // move marker to the bottom left forcing the popup to the top right
         marker.setLngLat(map.unproject([markerRight, mapHeight]));
         expect(
-        marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-bottom-left')
+            marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-bottom-left')
         ).toBeTruthy();
 
         // move marker to the bottom right forcing the popup to the top left
         marker.setLngLat(map.unproject([mapHeight - markerRight, mapHeight]));
         expect(
-        marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-bottom-right')
+            marker.getPopup()._container.classList.contains('maplibregl-popup-anchor-bottom-right')
         ).toBeTruthy();
 
     });

package/src/ui/marker.ts

@@ -13,16 +13,16 @@ import type {MapMouseEvent, MapTouchEvent} from './events';
 import type {PointLike} from './camera';
 
 type MarkerOptions = {
-  element?: HTMLElement;
-  offset?: PointLike;
-  anchor?: PositionAnchor;
-  color?: string;
-  scale?: number;
-  draggable?: boolean;
-  clickTolerance?: number;
-  rotation?: number;
-  rotationAlignment?: string;
-  pitchAlignment?: string;
+    element?: HTMLElement;
+    offset?: PointLike;
+    anchor?: PositionAnchor;
+    color?: string;
+    scale?: number;
+    draggable?: boolean;
+    clickTolerance?: number;
+    rotation?: number;
+    rotationAlignment?: string;
+    pitchAlignment?: string;
 };
 
 /**
@@ -289,29 +289,29 @@ export default class Marker extends Evented {
      * the marker on screen.
      *
      * @returns {LngLat} A {@link LngLat} describing the marker's location.
-    * @example
-    * // Store the marker's longitude and latitude coordinates in a variable
-    * var lngLat = marker.getLngLat();
-    * // Print the marker's longitude and latitude values in the console
-    * console.log('Longitude: ' + lngLat.lng + ', Latitude: ' + lngLat.lat )
-    * @see [Create a draggable Marker](https://maplibre.org/maplibre-gl-js-docs/example/drag-a-marker/)
-    */
+     * @example
+     * // Store the marker's longitude and latitude coordinates in a variable
+     * var lngLat = marker.getLngLat();
+     * // Print the marker's longitude and latitude values in the console
+     * console.log('Longitude: ' + lngLat.lng + ', Latitude: ' + lngLat.lat )
+     * @see [Create a draggable Marker](https://maplibre.org/maplibre-gl-js-docs/example/drag-a-marker/)
+     */
     getLngLat() {
         return this._lngLat;
     }
 
     /**
-    * Set the marker's geographical position and move it.
-    * @param {LngLat} lnglat A {@link LngLat} describing where the marker should be located.
-    * @returns {Marker} `this`
-    * @example
-    * // Create a new marker, set the longitude and latitude, and add it to the map
-    * new maplibregl.Marker()
-    *   .setLngLat([-65.017, -16.457])
-    *   .addTo(map);
-    * @see [Add custom icons with Markers](https://maplibre.org/maplibre-gl-js-docs/example/custom-marker-icons/)
-    * @see [Create a draggable Marker](https://maplibre.org/maplibre-gl-js-docs/example/drag-a-marker/)
-    */
+     * Set the marker's geographical position and move it.
+     * @param {LngLat} lnglat A {@link LngLat} describing where the marker should be located.
+     * @returns {Marker} `this`
+     * @example
+     * // Create a new marker, set the longitude and latitude, and add it to the map
+     * new maplibregl.Marker()
+     *   .setLngLat([-65.017, -16.457])
+     *   .addTo(map);
+     * @see [Add custom icons with Markers](https://maplibre.org/maplibre-gl-js-docs/example/custom-marker-icons/)
+     * @see [Create a draggable Marker](https://maplibre.org/maplibre-gl-js-docs/example/drag-a-marker/)
+     */
     setLngLat(lnglat: LngLatLike) {
         this._lngLat = LngLat.convert(lnglat);
         this._pos = null;
@@ -437,7 +437,7 @@ export default class Marker extends Evented {
     }
 
     _update(e?: {
-      type: 'move' | 'moveend';
+        type: 'move' | 'moveend';
     }) {
         if (!this._map) return;
 
@@ -545,14 +545,14 @@ export default class Marker extends Evented {
         // only fire dragend if it was preceded by at least one drag event
         if (this._state === 'active') {
             /**
-            * Fired when the marker is finished being dragged
-            *
-            * @event dragend
-            * @memberof Marker
-            * @instance
-            * @type {Object}
-            * @property {Marker} marker object that was dragged
-            */
+             * Fired when the marker is finished being dragged
+             *
+             * @event dragend
+             * @memberof Marker
+             * @instance
+             * @type {Object}
+             * @property {Marker} marker object that was dragged
+             */
             this.fire(new Event('dragend'));
         }
 

package/src/ui/popup.test.ts

@@ -2,7 +2,7 @@ import {createMap as globalCreateMap, setPerformance, setWebGlContext} from '../
 import Popup, {Offset} from './popup';
 import LngLat from '../geo/lng_lat';
 import Point from '@mapbox/point-geometry';
-import simulate from '../../test/util/simulate_interaction';
+import simulate from '../../test/unit/lib/simulate_interaction';
 import {PositionAnchor} from './anchor';
 
 const containerWidth = 512;
@@ -91,7 +91,7 @@ describe('popup', () => {
             .addTo(map);
 
         expect(
-        popup.getElement().querySelectorAll('.maplibregl-popup-close-button')
+            popup.getElement().querySelectorAll('.maplibregl-popup-close-button')
         ).toHaveLength(0);
     });
 
@@ -561,7 +561,7 @@ describe('popup', () => {
             .addTo(map);
 
         expect(
-        popup._container.classList.value
+            popup._container.classList.value
         ).toContain('maplibregl-popup-track-pointer');
     });
 
@@ -574,7 +574,7 @@ describe('popup', () => {
         popup.setText('Test');
 
         expect(
-        popup._container.classList.value
+            popup._container.classList.value
         ).toContain('maplibregl-popup-track-pointer');
     });
 
@@ -587,7 +587,7 @@ describe('popup', () => {
         popup.trackPointer();
 
         expect(
-        popup._container.classList.value
+            popup._container.classList.value
         ).toContain('maplibregl-popup-track-pointer');
     });
 
@@ -601,7 +601,7 @@ describe('popup', () => {
 
         expect(popup._pos).toEqual(map.project([0, 0]));
         expect(
-        popup._container.classList.value
+            popup._container.classList.value
         ).not.toContain('maplibregl-popup-track-pointer');
     });
 
@@ -613,7 +613,7 @@ describe('popup', () => {
             .addTo(map);
 
         expect(
-        popup._container.classList.value
+            popup._container.classList.value
         ).not.toContain('maplibregl-popup-track-pointer');
     });
 

package/src/ui/popup.ts

@@ -21,18 +21,18 @@ const defaultOptions = {
 };
 
 export type Offset = number | PointLike | {
-  [_ in PositionAnchor]: PointLike;
+    [_ in PositionAnchor]: PointLike;
 };
 
 export type PopupOptions = {
-  closeButton?: boolean;
-  closeOnClick?: boolean;
-  closeOnMove?: boolean;
-  focusAfterOpen?: boolean;
-  anchor?: PositionAnchor;
-  offset?: Offset;
-  className?: string;
-  maxWidth?: string;
+    closeButton?: boolean;
+    closeOnClick?: boolean;
+    closeOnMove?: boolean;
+    focusAfterOpen?: boolean;
+    anchor?: PositionAnchor;
+    offset?: Offset;
+    className?: string;
+    maxWidth?: string;
 };
 
 const focusQuerySelector = [

package/src/util/actor.test.ts

@@ -1,15 +1,42 @@
 import Actor from './actor';
 import workerFactory from './web_worker';
+import {MessageBus} from '../../test/unit/lib/web_worker_mock';
+
+const originalWorker = global.Worker;
+
+function setTestWorker(MockWorker: { new(...args: any): any}) {
+    (global as any).Worker = function Worker(_: string) {
+        const parentListeners = [];
+        const workerListeners = [];
+        const parentBus = new MessageBus(workerListeners, parentListeners);
+        const workerBus = new MessageBus(parentListeners, workerListeners);
+
+        parentBus.target = workerBus;
+        workerBus.target = parentBus;
+
+        new MockWorker(workerBus);
+
+        return parentBus;
+    };
+}
 
 describe('Actor', () => {
+    afterAll(() => {
+        global.Worker = originalWorker;
+    });
+
     test('forwards responses to correct callback', done => {
-        jest.spyOn(workerFactory, 'Worker').mockImplementation(function Worker(self) {
-            this.self = self;
-            this.actor = new Actor(self, this);
-            this.test = function (mapId, params, callback) {
+        setTestWorker(class MockWorker {
+            self: any;
+            actor: Actor;
+            constructor(self) {
+                this.self = self;
+                this.actor = new Actor(self, this);
+            }
+            test(mapId, params, callback) {
                 setTimeout(callback, 0, null, params);
-            };
-        } as any);
+            }
+        });
 
         const worker = workerFactory();
 
@@ -38,10 +65,14 @@ describe('Actor', () => {
     test('targets worker-initiated messages to correct map instance', done => {
         let workerActor;
 
-        jest.spyOn(workerFactory, 'Worker').mockImplementation(function Worker(self) {
-            this.self = self;
-            this.actor = workerActor = new Actor(self, this);
-        } as any);
+        setTestWorker(class MockWorker {
+            self: any;
+            actor: Actor;
+            constructor(self) {
+                this.self = self;
+                this.actor = workerActor = new Actor(self, this);
+            }
+        });
 
         const worker = workerFactory();
 

package/src/util/actor.ts

@@ -21,15 +21,15 @@ class Actor {
     parent: any;
     mapId: number;
     callbacks: {
-      number: any;
+        number: any;
     };
     name: string;
     tasks: {
-      number: any;
+        number: any;
     };
     taskQueue: Array<number>;
     cancelCallbacks: {
-      number: Cancelable;
+        number: Cancelable;
     };
     invoker: ThrottledInvoker;
     globalScope: any;
@@ -57,11 +57,11 @@ class Actor {
      * @private
      */
     send(
-      type: string,
-      data: unknown,
-      callback?: Function | null,
-      targetMapId?: string | null,
-      mustQueue: boolean = false
+        type: string,
+        data: unknown,
+        callback?: Function | null,
+        targetMapId?: string | null,
+        mustQueue: boolean = false
     ): Cancelable {
         // We're using a string ID instead of numbers because they are being used as object keys
         // anyway, and thus stringified implicitly. We use random IDs because an actor may receive

package/src/util/ajax.test.ts

@@ -3,15 +3,25 @@ import {
     getJSON,
     postData,
     getImage,
-    resetImageRequestQueue
+    resetImageRequestQueue,
+    AJAXError
 } from './ajax';
 import config from './config';
 import webpSupported from './webp_supported';
-import {fakeServer, SinonFakeServer} from 'sinon';
+import {fakeServer, FakeServer} from 'nise';
 import {stubAjaxGetImage} from './test/util';
 
+function readAsText(blob) {
+    return new Promise((resolve, reject) => {
+        const fileReader = new FileReader();
+        fileReader.onload = () => resolve(fileReader.result);
+        fileReader.onerror = () => reject(fileReader.error);
+        fileReader.readAsText(blob);
+    });
+}
+
 describe('ajax', () => {
-    let server: SinonFakeServer;
+    let server: FakeServer;
     beforeEach(() => {
         global.fetch = null;
         server = fakeServer.create();
@@ -22,10 +32,15 @@ describe('ajax', () => {
 
     test('getArrayBuffer, 404', done => {
         server.respondWith(request => {
-            request.respond(404, undefined, undefined);
+            request.respond(404, undefined, '404 Not Found');
         });
-        getArrayBuffer({url:''}, (error) => {
-            expect((error as any).status).toBe(404);
+        getArrayBuffer({url:'http://example.com/test.bin'}, async (error) => {
+            const ajaxError = error as AJAXError;
+            const body = await readAsText(ajaxError.body);
+            expect(ajaxError.status).toBe(404);
+            expect(ajaxError.statusText).toBe('Not Found');
+            expect(ajaxError.url).toBe('http://example.com/test.bin');
+            expect(body).toBe('404 Not Found');
             done();
         });
         server.respond();
@@ -56,22 +71,15 @@ describe('ajax', () => {
 
     test('getJSON, 404', done => {
         server.respondWith(request => {
-            request.respond(404, undefined, undefined);
-        });
-        getJSON({url:''}, (error) => {
-            expect((error as any).status).toBe(404);
-            done();
+            request.respond(404, undefined, '404 Not Found');
         });
-        server.respond();
-    });
-
-    test('getJSON, 401: non-Mapbox domain', done => {
-        server.respondWith(request => {
-            request.respond(401, undefined, undefined);
-        });
-        getJSON({url:''}, (error) => {
-            expect((error as any).status).toBe(401);
-            expect(error.message).toBe('Unauthorized');
+        getJSON({url:'http://example.com/test.json'}, async (error) => {
+            const ajaxError = error as AJAXError;
+            const body = await readAsText(ajaxError.body);
+            expect(ajaxError.status).toBe(404);
+            expect(ajaxError.statusText).toBe('Not Found');
+            expect(ajaxError.url).toBe('http://example.com/test.json');
+            expect(body).toBe('404 Not Found');
             done();
         });
         server.respond();

package/src/util/ajax.ts

@@ -64,37 +64,57 @@ if (typeof Object.freeze == 'function') {
  *
  */
 export type RequestParameters = {
-  url: string;
-  headers?: any;
-  method?: 'GET' | 'POST' | 'PUT';
-  body?: string;
-  type?: 'string' | 'json' | 'arrayBuffer';
-  credentials?: 'same-origin' | 'include';
-  collectResourceTiming?: boolean;
+    url: string;
+    headers?: any;
+    method?: 'GET' | 'POST' | 'PUT';
+    body?: string;
+    type?: 'string' | 'json' | 'arrayBuffer';
+    credentials?: 'same-origin' | 'include';
+    collectResourceTiming?: boolean;
 };
 
 export type ResponseCallback<T> = (
-  error?: Error | null,
-  data?: T | null,
-  cacheControl?: string | null,
-  expires?: string | null
+    error?: Error | null,
+    data?: T | null,
+    cacheControl?: string | null,
+    expires?: string | null
 ) => void;
 
-class AJAXError extends Error {
+/**
+ * An error thrown when a HTTP request results in an error response.
+ * @extends Error
+ * @param {number} status The response's HTTP status code.
+ * @param {string} statusText The response's HTTP status text.
+ * @param {string} url The request's URL.
+ * @param {Blob} body The response's body.
+ */
+export class AJAXError extends Error {
+    /**
+     * The response's HTTP status code.
+     */
     status: number;
+
+    /**
+     * The response's HTTP status text.
+     */
+    statusText: string;
+
+    /**
+     * The request's URL.
+     */
     url: string;
-    constructor(message: string, status: number, url: string) {
-        super(message);
-        this.status = status;
-        this.url = url;
 
-        // work around for https://github.com/Rich-Harris/buble/issues/40
-        this.name = this.constructor.name;
-        this.message = message;
-    }
+    /**
+     * The response's body.
+     */
+    body: Blob;
 
-    toString() {
-        return `${this.name}: ${this.message} (${this.status}): ${this.url}`;
+    constructor(status: number, statusText: string, url: string, body: Blob) {
+        super(`AJAXError: ${statusText} (${status}): ${url}`);
+        this.status = status;
+        this.statusText = statusText;
+        this.url = url;
+        this.body = body;
     }
 }
 
@@ -159,7 +179,7 @@ function makeFetchRequest(requestParameters: RequestParameters, callback: Respon
                 return finishRequest(response, cacheableResponse, requestTime);
 
             } else {
-                return callback(new AJAXError(response.statusText, response.status, requestParameters.url));
+                return response.blob().then(body => callback(new AJAXError(response.status, response.statusText, requestParameters.url, body)));
             }
         }).catch(error => {
             if (error.code === 20) {
@@ -173,8 +193,8 @@ function makeFetchRequest(requestParameters: RequestParameters, callback: Respon
     const finishRequest = (response, cacheableResponse?, requestTime?) => {
         (
             requestParameters.type === 'arrayBuffer' ? response.arrayBuffer() :
-            requestParameters.type === 'json' ? response.json() :
-            response.text()
+                requestParameters.type === 'json' ? response.json() :
+                    response.text()
         ).then(result => {
             if (aborted) return;
             if (cacheableResponse && requestTime) {
@@ -235,7 +255,8 @@ function makeXMLHttpRequest(requestParameters: RequestParameters, callback: Resp
             }
             callback(null, data, xhr.getResponseHeader('Cache-Control'), xhr.getResponseHeader('Expires'));
         } else {
-            callback(new AJAXError(xhr.statusText, xhr.status, requestParameters.url));
+            const body = new Blob([xhr.response], {type: xhr.getResponseHeader('Content-Type')});
+            callback(new AJAXError(xhr.status, xhr.statusText, requestParameters.url, body));
         }
     };
     xhr.send(requestParameters.body);
@@ -277,8 +298,8 @@ export const getJSON = function(requestParameters: RequestParameters, callback:
 };
 
 export const getArrayBuffer = function(
-  requestParameters: RequestParameters,
-  callback: ResponseCallback<ArrayBuffer>
+    requestParameters: RequestParameters,
+    callback: ResponseCallback<ArrayBuffer>
 ): Cancelable {
     return makeRequest(extend(requestParameters, {type: 'arrayBuffer'}), callback);
 };
@@ -339,8 +360,8 @@ export const resetImageRequestQueue = () => {
 resetImageRequestQueue();
 
 export const getImage = function(
-  requestParameters: RequestParameters,
-  callback: Callback<HTMLImageElement | ImageBitmap>
+    requestParameters: RequestParameters,
+    callback: Callback<HTMLImageElement | ImageBitmap>
 ): Cancelable {
     if (webpSupported.supported) {
         if (!requestParameters.headers) {

package/src/util/browser.ts

@@ -1,6 +1,6 @@
 import type {Cancelable} from '../types/cancelable';
 
-const now = performance && performance.now ?
+const now = typeof performance !== 'undefined' && performance && performance.now ?
     performance.now.bind(performance) :
     Date.now.bind(Date);
 

package/src/util/classify_rings.test.ts

@@ -6,7 +6,7 @@ import classifyRings from './classify_rings';
 import Point from '@mapbox/point-geometry';
 
 // Load a fill feature from fixture tile.
-const vt = new VectorTile(new Protobuf(fs.readFileSync(path.resolve(__dirname, '../../test/fixtures/mbsv5-6-18-23.vector.pbf'))));
+const vt = new VectorTile(new Protobuf(fs.readFileSync(path.resolve(__dirname, '../../test/unit/assets/mbsv5-6-18-23.vector.pbf'))));
 const feature = vt.layers.water.feature(0);
 
 describe('classifyRings', () => {

package/src/util/color_ramp.ts

@@ -5,11 +5,11 @@ import assert from 'assert';
 import type {StylePropertyExpression} from '../style-spec/expression/index';
 
 export type ColorRampParams = {
-  expression: StylePropertyExpression;
-  evaluationKey: string;
-  resolution?: number;
-  image?: RGBAImage;
-  clips?: Array<any>;
+    expression: StylePropertyExpression;
+    evaluationKey: string;
+    resolution?: number;
+    image?: RGBAImage;
+    clips?: Array<any>;
 };
 
 /**

package/src/util/config.ts

@@ -1,6 +1,6 @@
 type Config = {
-  MAX_PARALLEL_IMAGE_REQUESTS: number;
-  REGISTERED_PROTOCOLS: {[x: string]: any};
+    MAX_PARALLEL_IMAGE_REQUESTS: number;
+    REGISTERED_PROTOCOLS: {[x: string]: any};
 };
 
 const config: Config = {

package/src/util/dispatcher.ts

@@ -18,7 +18,7 @@ class Dispatcher {
 
     // exposed to allow stubbing in unit tests
     static Actor: {
-      new (...args: any): Actor;
+        new (...args: any): Actor;
     };
 
     constructor(workerPool: WorkerPool, parent: any) {