maplibre-gl 2.0.1 → 2.0.5

package/src/symbol/clip_line.test.ts

@@ -1,4 +1,4 @@
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 import clipLine from './clip_line';
 
 describe('clipLines', () => {

package/src/symbol/clip_line.ts

@@ -1,4 +1,4 @@
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 
 export default clipLine;
 

package/src/symbol/collision_feature.test.ts

@@ -1,6 +1,6 @@
 import CollisionFeature from './collision_feature';
 import Anchor from './anchor';
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 import {CollisionBoxArray} from '../data/array_types';
 
 describe('CollisionFeature', () => {

package/src/symbol/collision_feature.ts

@@ -1,5 +1,5 @@
 import type {CollisionBoxArray} from '../data/array_types';
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 import type Anchor from './anchor';
 
 /**

package/src/symbol/collision_index.ts

@@ -1,4 +1,4 @@
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 import clipLine from './clip_line';
 import PathInterpolator from './path_interpolator';
 

package/src/symbol/get_anchors.test.ts

@@ -1,4 +1,4 @@
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 import {getAnchors, getCenterAnchor} from './get_anchors';
 import {PositionedIcon, Shaping} from './shaping';
 

package/src/symbol/get_anchors.ts

@@ -3,7 +3,7 @@ import {number as interpolate} from '../style-spec/util/interpolate';
 import Anchor from '../symbol/anchor';
 import checkMaxAngle from './check_max_angle';
 
-import type Point from '../util/point';
+import type Point from '@mapbox/point-geometry';
 import type {Shaping, PositionedIcon} from './shaping';
 
 export {getAnchors, getCenterAnchor};

package/src/symbol/mergelines.test.ts

@@ -1,5 +1,5 @@
 import mergeLines from './mergelines';
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 
 function makeFeatures(lines) {
     const features = [];

package/src/symbol/path_interpolator.test.ts

@@ -1,4 +1,4 @@
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 import PathInterpolator from './path_interpolator';
 
 describe('PathInterpolator', () => {

package/src/symbol/path_interpolator.ts

@@ -1,5 +1,5 @@
 import {clamp} from '../util/util';
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 import assert from 'assert';
 
 class PathInterpolator {

package/src/symbol/placement.ts

@@ -7,7 +7,7 @@ import {getAnchorAlignment, WritingMode} from './shaping';
 import {mat4} from 'gl-matrix';
 import assert from 'assert';
 import pixelsToTileUnits from '../source/pixels_to_tile_units';
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 import type Transform from '../geo/transform';
 import type StyleLayer from '../style/style_layer';
 import {PossiblyEvaluated} from '../style/properties';

package/src/symbol/projection.ts

@@ -1,4 +1,4 @@
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 
 import {mat4, vec4} from 'gl-matrix';
 import * as symbolSize from './symbol_size';

package/src/symbol/quads.ts

@@ -1,4 +1,4 @@
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 
 import {GLYPH_PBF_BORDER} from '../style/parse_glyph_pbf';
 

package/src/symbol/symbol_layout.ts

@@ -28,7 +28,7 @@ import type {ImagePosition} from '../render/image_atlas';
 import type {GlyphPosition} from '../render/glyph_atlas';
 import type {PossiblyEvaluatedPropertyValue} from '../style/properties';
 
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 import murmur3 from 'murmurhash-js';
 
 // The symbol layout process needs `text-size` evaluated at up to five different zoom levels, and

package/src/ui/camera.test.ts

@@ -1777,14 +1777,6 @@ describe('#cameraForBounds', () => {
         expect(fixedLngLat(transform.center, 4)).toEqual({lng: -100.5, lat: 44.4717});
     });
 
-    test('offset as object', () => {
-        const camera = createCamera();
-        const bb = [[-133, 16], [-68, 50]];
-        const transform = camera.cameraForBounds(bb, {offset: {x: 0, y: 100}});
-
-        expect(fixedLngLat(transform.center, 4)).toEqual({lng: -100.5, lat: 44.4717});
-    });
-
     test('offset and padding', () => {
         const camera = createCamera();
         const bb = [[-133, 16], [-68, 50]];

package/src/ui/camera.ts

@@ -3,7 +3,7 @@ import {number as interpolate} from '../style-spec/util/interpolate';
 import browser from '../util/browser';
 import LngLat from '../geo/lng_lat';
 import LngLatBounds from '../geo/lng_lat_bounds';
-import Point, {PointLike} from '../util/point';
+import Point from '@mapbox/point-geometry';
 import {Event, Evented} from '../util/evented';
 import assert from 'assert';
 import {Debug} from '../util/debug';
@@ -14,6 +14,16 @@ import type {LngLatBoundsLike} from '../geo/lng_lat_bounds';
 import type {TaskID} from '../util/task_queue';
 import type {PaddingOptions} from '../geo/edge_insets';
 
+/**
+ * A [Point](https://github.com/mapbox/point-geometry) or an array of two numbers representing `x` and `y` screen coordinates in pixels.
+ *
+ * @typedef {(Point | [number, number])} PointLike
+ * @example
+ * var p1 = new Point(-77, 38); // a PointLike which is a Point
+ * var p2 = [-77, 38]; // a PointLike which is an array of two numbers
+ */
+export type PointLike = Point | [number, number];
+
 export type RequireAtLeastOne<T> = { [K in keyof T]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<keyof T, K>>>; }[keyof T];
 
 /**
@@ -599,7 +609,7 @@ abstract class Camera extends Evented {
      * @memberof Map#
      * @param bounds Center these bounds in the viewport and use the highest
      *      zoom level up to and including `Map#getMaxZoom()` that fits them in the viewport.
-     * @param {Object} [options] Options supports all properties from {@link AnimationOptions} and {@link CameraOptions} in addition to the fields below.
+     * @param {FitBoundsOptions} [options] Options supports all properties from {@link AnimationOptions} and {@link CameraOptions} in addition to the fields below.
      * @param {number | PaddingOptions} [options.padding] The amount of padding in pixels to add to the given bounds.
      * @param {boolean} [options.linear=false] If `true`, the map transitions using
      *     {@link Map#easeTo}. If `false`, the map transitions using {@link Map#flyTo}. See
@@ -955,7 +965,7 @@ abstract class Camera extends Evented {
      * unless 'options' includes `essential: true`.
      *
      * @memberof Map#
-     * @param {Object} options Options describing the destination and animation of the transition.
+     * @param {FlyToOptions} options Options describing the destination and animation of the transition.
      *     Accepts {@link CameraOptions}, {@link AnimationOptions},
      *     and the following additional options.
      * @param {number} [options.curve=1.42] The zooming "curve" that will occur along the

package/src/ui/control/navigation_control.ts

@@ -1,4 +1,4 @@
-import Point from '../../util/point';
+import Point from '@mapbox/point-geometry';
 
 import DOM from '../../util/dom';
 import {extend, bindAll} from '../../util/util';

package/src/ui/events.ts

@@ -1,7 +1,7 @@
 import {Event} from '../util/evented';
 
 import DOM from '../util/dom';
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 import {extend} from '../util/util';
 
 import type Map from './map';

package/src/ui/handler/box_zoom.ts

@@ -3,7 +3,7 @@ import DOM from '../../util/dom';
 import {Event} from '../../util/evented';
 
 import type Map from '../map';
-import type Point from '../../util/point';
+import type Point from '@mapbox/point-geometry';
 
 /**
  * The `BoxZoomHandler` allows the user to zoom the map to fit within a bounding box.

package/src/ui/handler/click_zoom.ts

@@ -1,4 +1,4 @@
-import type Point from '../../util/point';
+import type Point from '@mapbox/point-geometry';
 import type Map from '../map';
 
 export default class ClickZoomHandler {

package/src/ui/handler/handler_util.ts

@@ -1,5 +1,5 @@
 import assert from 'assert';
-import Point from '../../util/point';
+import Point from '@mapbox/point-geometry';
 
 export function indexTouches(touches: Array<Touch>, points: Array<Point>) {
     assert(touches.length === points.length);

package/src/ui/handler/map_event.ts

@@ -1,7 +1,7 @@
 import {MapMouseEvent, MapTouchEvent, MapWheelEvent} from '../events';
 import {Handler} from '../handler_manager';
 import type Map from '../map';
-import type Point from '../../util/point';
+import type Point from '@mapbox/point-geometry';
 
 export class MapEventHandler implements Handler {
 

package/src/ui/handler/mouse.ts

@@ -1,5 +1,5 @@
 import DOM from '../../util/dom';
-import type Point from '../../util/point';
+import type Point from '@mapbox/point-geometry';
 
 const LEFT_BUTTON = 0;
 const RIGHT_BUTTON = 2;

package/src/ui/handler/scroll_zoom.ts

@@ -8,7 +8,7 @@ import LngLat from '../../geo/lng_lat';
 
 import type Map from '../map';
 import type HandlerManager from '../handler_manager';
-import type Point from '../../util/point';
+import type Point from '@mapbox/point-geometry';
 
 // deltaY value for mouse scroll wheel identification
 const wheelZoomDelta = 4.000244140625;

package/src/ui/handler/tap_drag_zoom.ts

@@ -1,5 +1,5 @@
 import {TapRecognizer, MAX_TAP_INTERVAL} from './tap_recognizer';
-import type Point from '../../util/point';
+import type Point from '@mapbox/point-geometry';
 
 export default class TapDragZoomHandler {
 

package/src/ui/handler/tap_recognizer.ts

@@ -1,4 +1,4 @@
-import Point from '../../util/point';
+import Point from '@mapbox/point-geometry';
 import {indexTouches} from './handler_util';
 
 function getCentroid(points: Array<Point>) {

package/src/ui/handler/tap_zoom.ts

@@ -1,5 +1,5 @@
 import {TapRecognizer} from './tap_recognizer';
-import type Point from '../../util/point';
+import type Point from '@mapbox/point-geometry';
 import type Map from '../map';
 
 export default class TapZoomHandler {

package/src/ui/handler/touch_pan.ts

@@ -1,4 +1,4 @@
-import Point from '../../util/point';
+import Point from '@mapbox/point-geometry';
 import {indexTouches} from './handler_util';
 
 export default class TouchPanHandler {

package/src/ui/handler/touch_zoom_rotate.ts

@@ -1,4 +1,4 @@
-import Point from '../../util/point';
+import Point from '@mapbox/point-geometry';
 import DOM from '../../util/dom';
 
 class TwoTouchHandler {

package/src/ui/handler_inertia.ts

@@ -1,7 +1,7 @@
 import browser from '../util/browser';
 import type Map from './map';
 import {bezier, clamp, extend} from '../util/util';
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 import type {DragPanOptions} from './handler/shim/drag_pan';
 
 const defaultInertiaOptions = {

package/src/ui/handler_manager.ts

@@ -17,7 +17,7 @@ import DragPanHandler from './handler/shim/drag_pan';
 import DragRotateHandler from './handler/shim/drag_rotate';
 import TouchZoomRotateHandler from './handler/shim/touch_zoom_rotate';
 import {bindAll, extend} from '../util/util';
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 import assert from 'assert';
 
 export type InputEvent = MouseEvent | TouchEvent | KeyboardEvent | WheelEvent;

package/src/ui/map.ts

@@ -12,7 +12,7 @@ import HandlerManager from './handler_manager';
 import Camera from './camera';
 import LngLat from '../geo/lng_lat';
 import LngLatBounds from '../geo/lng_lat_bounds';
-import Point, {PointLike} from '../util/point';
+import Point from '@mapbox/point-geometry';
 import AttributionControl from './control/attribution_control';
 import LogoControl from './control/logo_control';
 import {supported} from '@mapbox/mapbox-gl-supported';
@@ -33,7 +33,7 @@ import type {StyleOptions, StyleSetterOptions} from '../style/style';
 import type {MapEvent, MapDataEvent} from './events';
 import type {CustomLayerInterface} from '../style/style_layer/custom_style_layer';
 import type {StyleImageInterface, StyleImageMetadata} from '../style/style_image';
-
+import type {PointLike} from './camera';
 import type ScrollZoomHandler from './handler/scroll_zoom';
 import type BoxZoomHandler from './handler/box_zoom';
 import type {TouchPitchHandler} from './handler/touch_zoom_rotate';
@@ -828,11 +828,11 @@ class Map extends Camera {
     }
 
     /**
-     * Returns a {@link Point} representing pixel coordinates, relative to the map's `container`,
+     * Returns a [Point](https://github.com/mapbox/point-geometry) representing pixel coordinates, relative to the map's `container`,
      * that correspond to the specified geographical location.
      *
      * @param {LngLatLike} lnglat The geographical location to project.
-     * @returns {Point} The {@link Point} corresponding to `lnglat`, relative to the map's `container`.
+     * @returns {Point} The [Point](https://github.com/mapbox/point-geometry) corresponding to `lnglat`, relative to the map's `container`.
      * @example
      * var coordinate = [-122.420679, 37.772537];
      * var point = map.project(coordinate);

package/src/ui/marker.test.ts

@@ -2,7 +2,7 @@ import {createMap as globalCreateMap, setPerformance, setWebGlContext} from '../
 import Marker from './marker';
 import Popup from './popup';
 import LngLat from '../geo/lng_lat';
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 import simulate from '../../test/util/simulate_interaction';
 
 function createMap(options = {}) {

package/src/ui/marker.ts

@@ -1,6 +1,6 @@
 import DOM from '../util/dom';
 import LngLat from '../geo/lng_lat';
-import Point, {PointLike} from '../util/point';
+import Point from '@mapbox/point-geometry';
 import smartWrap from '../util/smart_wrap';
 import {bindAll, extend} from '../util/util';
 import {anchorTranslate, applyAnchorClass} from './anchor';
@@ -10,6 +10,7 @@ import type Map from './map';
 import Popup, {Offset} from './popup';
 import type {LngLatLike} from '../geo/lng_lat';
 import type {MapMouseEvent, MapTouchEvent} from './events';
+import type {PointLike} from './camera';
 
 type MarkerOptions = {
   element?: HTMLElement;

package/src/ui/popup.test.ts

@@ -1,7 +1,7 @@
 import {createMap as globalCreateMap, setPerformance, setWebGlContext} from '../util/test/util';
 import Popup, {Offset} from './popup';
 import LngLat from '../geo/lng_lat';
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 import simulate from '../../test/util/simulate_interaction';
 import {PositionAnchor} from './anchor';
 

package/src/ui/popup.ts

@@ -3,14 +3,14 @@ import {Event, Evented} from '../util/evented';
 import {MapMouseEvent} from '../ui/events';
 import DOM from '../util/dom';
 import LngLat from '../geo/lng_lat';
-import Point, {PointLike} from '../util/point';
+import Point from '@mapbox/point-geometry';
 import smartWrap from '../util/smart_wrap';
 import {anchorTranslate, applyAnchorClass} from './anchor';
 
 import type {PositionAnchor} from './anchor';
-
 import type Map from './map';
 import type {LngLatLike} from '../geo/lng_lat';
+import type {PointLike} from './camera';
 
 const defaultOptions = {
     closeButton: true,

package/src/util/ajax.test.ts

@@ -0,0 +1,206 @@
+import {
+    getArrayBuffer,
+    getJSON,
+    postData,
+    getImage,
+    resetImageRequestQueue
+} from './ajax';
+import config from './config';
+import webpSupported from './webp_supported';
+import {fakeServer, SinonFakeServer} from 'sinon';
+import {stubAjaxGetImage} from './test/util';
+
+describe('ajax', () => {
+    let server: SinonFakeServer;
+    beforeEach(() => {
+        global.fetch = null;
+        server = fakeServer.create();
+    });
+    afterEach(() => {
+        server.restore();
+    });
+
+    test('getArrayBuffer, 404', done => {
+        server.respondWith(request => {
+            request.respond(404, undefined, undefined);
+        });
+        getArrayBuffer({url:''}, (error) => {
+            expect((error as any).status).toBe(404);
+            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, undefined);
+        });
+        getJSON({url:''}, (error) => {
+            expect((error as any).status).toBe(404);
+            done();
+        });
+        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');
+            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();
+    });
+
+});

package/src/util/classify_rings.test.ts

@@ -3,7 +3,7 @@ import path from 'path';
 import Protobuf from 'pbf';
 import {VectorTile} from '@mapbox/vector-tile';
 import classifyRings from './classify_rings';
-import Point from './point';
+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'))));

package/src/util/classify_rings.ts

@@ -2,7 +2,7 @@ import quickselect from 'quickselect';
 
 import {calculateSignedArea} from './util';
 
-import type Point from './point';
+import type Point from '@mapbox/point-geometry';
 
 // classifies an array of rings into polygons with outer rings and holes
 export default function classifyRings(rings: Array<Array<Point>>, maxRings: number) {

package/src/util/dom.ts

@@ -1,4 +1,4 @@
-import Point from './point';
+import Point from '@mapbox/point-geometry';
 
 import assert from 'assert';
 

package/src/util/find_pole_of_inaccessibility.test.ts

@@ -1,4 +1,4 @@
-import Point from './point';
+import Point from '@mapbox/point-geometry';
 import findPoleOfInaccessibility from './find_pole_of_inaccessibility';
 
 test('polygon_poi', () => {

package/src/util/find_pole_of_inaccessibility.ts

@@ -1,6 +1,6 @@
 import Queue from 'tinyqueue';
 
-import Point from './point';
+import Point from '@mapbox/point-geometry';
 import {distToSegmentSquared} from './intersection_tests';
 
 /**