maplibre-gl 2.0.4 → 2.1.2

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

@@ -0,0 +1,214 @@
+import {
+    getArrayBuffer,
+    getJSON,
+    postData,
+    getImage,
+    resetImageRequestQueue,
+    AJAXError
+} from './ajax';
+import config from './config';
+import webpSupported from './webp_supported';
+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: FakeServer;
+    beforeEach(() => {
+        global.fetch = null;
+        server = fakeServer.create();
+    });
+    afterEach(() => {
+        server.restore();
+    });
+
+    test('getArrayBuffer, 404', done => {
+        server.respondWith(request => {
+            request.respond(404, undefined, '404 Not Found');
+        });
+        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();
+    });
+
+    test('getJSON', done => {
+        server.respondWith(request => {
+            request.respond(200, {'Content-Type': 'application/json'}, '{"foo": "bar"}');
+        });
+        getJSON({url:''}, (error, body) => {
+            expect(error).toBeFalsy();
+            expect(body).toEqual({foo: 'bar'});
+            done();
+        });
+        server.respond();
+    });
+
+    test('getJSON, invalid syntax', done => {
+        server.respondWith(request => {
+            request.respond(200, {'Content-Type': 'application/json'}, 'how do i even');
+        });
+        getJSON({url:''}, (error) => {
+            expect(error).toBeTruthy();
+            done();
+        });
+        server.respond();
+    });
+
+    test('getJSON, 404', done => {
+        server.respondWith(request => {
+            request.respond(404, undefined, '404 Not Found');
+        });
+        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();
+    });
+
+    test('postData, 204(no content): no error', done => {
+        server.respondWith(request => {
+            request.respond(204, undefined, undefined);
+        });
+        postData({url:'api.mapbox.com'}, (error) => {
+            expect(error).toBeNull();
+            done();
+        });
+        server.respond();
+    });
+
+    test('getImage respects maxParallelImageRequests', done => {
+        server.respondWith(request => request.respond(200, {'Content-Type': 'image/png'}, ''));
+
+        const maxRequests = config.MAX_PARALLEL_IMAGE_REQUESTS;
+
+        function callback(err) {
+            if (err) return;
+            // last request is only added after we got a response from one of the previous ones
+            expect(server.requests).toHaveLength(maxRequests + 1);
+            done();
+        }
+
+        for (let i = 0; i < maxRequests + 1; i++) {
+            getImage({url: ''}, callback);
+        }
+        expect(server.requests).toHaveLength(maxRequests);
+
+        server.requests[0].respond(undefined, undefined, undefined);
+    });
+
+    test('getImage cancelling frees up request for maxParallelImageRequests', done => {
+        resetImageRequestQueue();
+
+        server.respondWith(request => request.respond(200, {'Content-Type': 'image/png'}, ''));
+
+        const maxRequests = config.MAX_PARALLEL_IMAGE_REQUESTS;
+
+        for (let i = 0; i < maxRequests + 1; i++) {
+            getImage({url: ''}, () => done('test failed: getImage callback was called')).cancel();
+        }
+        expect(server.requests).toHaveLength(maxRequests + 1);
+        done();
+    });
+
+    test('getImage requests that were once queued are still abortable', done => {
+        resetImageRequestQueue();
+
+        const maxRequests = config.MAX_PARALLEL_IMAGE_REQUESTS;
+
+        const requests = [];
+        for (let i = 0; i < maxRequests; i++) {
+            requests.push(getImage({url: ''}, () => {}));
+        }
+
+        // the limit of allowed requests is reached
+        expect(server.requests).toHaveLength(maxRequests);
+
+        const queuedURL = 'this-is-the-queued-request';
+        const queued = getImage({url: queuedURL}, () => done('test failed: getImage callback was called'));
+
+        // the new requests is queued because the limit is reached
+        expect(server.requests).toHaveLength(maxRequests);
+
+        // cancel the first request to let the queued request start
+        requests[0].cancel();
+        expect(server.requests).toHaveLength(maxRequests + 1);
+
+        // abort the previously queued request and confirm that it is aborted
+        const queuedRequest = server.requests[server.requests.length - 1];
+        expect(queuedRequest.url).toBe(queuedURL);
+        expect((queuedRequest as any).aborted).toBeUndefined();
+        queued.cancel();
+        expect((queuedRequest as any).aborted).toBe(true);
+
+        done();
+    });
+
+    test('getImage sends accept/webp when supported', done => {
+        resetImageRequestQueue();
+
+        server.respondWith((request) => {
+            expect(request.requestHeaders.accept.includes('image/webp')).toBeTruthy();
+            request.respond(200, {'Content-Type': 'image/webp'}, '');
+        });
+
+        // mock webp support
+        webpSupported.supported = true;
+
+        getImage({url: ''}, () => { done(); });
+
+        server.respond();
+    });
+
+    test('getImage uses ImageBitmap when supported', done => {
+        resetImageRequestQueue();
+
+        server.respondWith(request => request.respond(200, {'Content-Type': 'image/png'}, ''));
+
+        stubAjaxGetImage(() => Promise.resolve(new ImageBitmap()));
+
+        getImage({url: ''}, (err, img) => {
+            if (err) done(err);
+            expect(img).toBeInstanceOf(ImageBitmap);
+            done();
+        });
+
+        server.respond();
+    });
+
+    test('getImage uses HTMLImageElement when ImageBitmap is not supported', done => {
+        resetImageRequestQueue();
+
+        server.respondWith(request => request.respond(200, {'Content-Type': 'image/png'}, ''));
+
+        stubAjaxGetImage(undefined);
+
+        getImage({url: ''}, (err, img) => {
+            if (err) done(`get image failed with error ${err.message}`);
+            expect(img).toBeInstanceOf(HTMLImageElement);
+            done();
+        });
+
+        server.respond();
+    });
+
+});