maplibre-gl 2.0.2 → 2.1.0

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';
@@ -101,6 +101,7 @@ export type MapOptions = {
   localIdeographFontFamily?: string;
   style: StyleSpecification | string;
   pitchWithRotate?: boolean;
+  pixelRatio?: number;
 };
 
 // See article here: https://medium.com/terria/typescript-transforming-optional-properties-to-required-properties-that-may-be-undefined-7482cb4e1585
@@ -235,6 +236,7 @@ const defaultOptions = {
  * @param {number} [options.fadeDuration=300] Controls the duration of the fade-in/fade-out animation for label collisions, in milliseconds. This setting affects all symbol layers. This setting does not affect the duration of runtime styling transitions or raster tile cross-fading.
  * @param {boolean} [options.crossSourceCollisions=true] If `true`, symbols from multiple sources can collide with each other during collision detection. If `false`, collision detection is run separately for the symbols in each source.
  * @param {Object} [options.locale=null] 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).
+ * @param {number} [options.pixelRatio] The pixel ratio. The canvas' `width` attribute will be `container.clientWidth * pixelRatio` and its `height` attribute will be `container.clientHeight * pixelRatio`. Defaults to `devicePixelRatio` if not specified.
  * @example
  * var map = new maplibregl.Map({
  *   container: 'map',
@@ -298,6 +300,7 @@ class Map extends Camera {
     _locale: any;
     _removed: boolean;
     _clickTolerance: number;
+    _pixelRatio: number;
 
     /**
      * The map's {@link ScrollZoomHandler}, which implements zooming in and out with a scroll wheel or trackpad.
@@ -389,6 +392,7 @@ class Map extends Camera {
         this._mapId = uniqueId();
         this._locale = extend({}, defaultLocale, options.locale);
         this._clickTolerance = options.clickTolerance;
+        this._pixelRatio = options.pixelRatio ?? devicePixelRatio;
 
         this._requestManager = new RequestManager(options.transformRequest);
 
@@ -584,9 +588,9 @@ class Map extends Camera {
         const width = dimensions[0];
         const height = dimensions[1];
 
-        this._resizeCanvas(width, height);
+        this._resizeCanvas(width, height, this.getPixelRatio());
         this.transform.resize(width, height);
-        this.painter.resize(width, height);
+        this.painter.resize(width, height, this.getPixelRatio());
 
         const fireMoving = !this._moving;
         if (fireMoving) {
@@ -602,6 +606,29 @@ class Map extends Camera {
         return this;
     }
 
+    /**
+     * Returns the map's pixel ratio.
+     * @returns {number} The pixel ratio.
+     */
+    getPixelRatio() {
+        return this._pixelRatio;
+    }
+
+    /**
+     * Sets the map's pixel ratio. This allows to override `devicePixelRatio`.
+     * After this call, the canvas' `width` attribute will be `container.clientWidth * pixelRatio`
+     * and its height attribute will be `container.clientHeight * pixelRatio`.
+     * @param pixelRatio {number} The pixel ratio.
+     */
+    setPixelRatio(pixelRatio: number) {
+        const [width, height] = this._containerDimensions();
+
+        this._pixelRatio = pixelRatio;
+
+        this._resizeCanvas(width, height, pixelRatio);
+        this.painter.resize(width, height, pixelRatio);
+    }
+
     /**
      * Returns the map's geographical bounds. When the bearing or pitch is non-zero, the visible region is not
      * an axis-aligned rectangle, and the result is the smallest bounds that encompasses the visible region.
@@ -828,11 +855,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);
@@ -2349,7 +2376,7 @@ class Map extends Camera {
         this._canvas.setAttribute('role', 'region');
 
         const dimensions = this._containerDimensions();
-        this._resizeCanvas(dimensions[0], dimensions[1]);
+        this._resizeCanvas(dimensions[0], dimensions[1], this.getPixelRatio());
 
         const controlContainer = this._controlContainer = DOM.create('div', 'maplibregl-control-container mapboxgl-control-container', container);
         const positions = this._controlPositions = {};
@@ -2360,9 +2387,7 @@ class Map extends Camera {
         this._container.addEventListener('scroll', this._onMapScroll, false);
     }
 
-    _resizeCanvas(width: number, height: number) {
-        const pixelRatio = devicePixelRatio || 1;
-
+    _resizeCanvas(width: number, height: number, pixelRatio: number) {
         // Request the required canvas size taking the pixelratio into account.
         this._canvas.width = pixelRatio * width;
         this._canvas.height = pixelRatio * height;

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';
 
 /**

package/src/util/intersection_tests.ts

@@ -1,6 +1,6 @@
 import {isCounterClockwise} from './util';
 
-import Point from './point';
+import Point from '@mapbox/point-geometry';
 
 export {polygonIntersectsBufferedPoint, polygonIntersectsMultiPolygon, polygonIntersectsBufferedMultiLine, polygonIntersectsPolygon, distToSegmentSquared, polygonIntersectsBox};
 

package/src/util/smart_wrap.ts

@@ -1,6 +1,6 @@
 import LngLat from '../geo/lng_lat';
 
-import type Point from './point';
+import type Point from '@mapbox/point-geometry';
 import type Transform from '../geo/transform';
 
 /**

package/src/util/test/util.ts

@@ -99,3 +99,17 @@ export function getMockDispatcher() {
 
     return mockDispatcher;
 }
+
+export function stubAjaxGetImage(createImageBitmap) {
+    global.createImageBitmap = createImageBitmap;
+
+    global.URL.revokeObjectURL = () => {};
+    global.URL.createObjectURL = (_) => { return null; };
+
+    // eslint-disable-next-line accessor-pairs
+    Object.defineProperty(global.Image.prototype, 'src', {
+        set(_) {
+            this.onload();
+        }
+    });
+}

package/src/util/util.test.ts

@@ -1,5 +1,5 @@
 import {easeCubicInOut, keysDifference, extend, pick, uniqueId, bindAll, asyncAll, clamp, wrap, bezier, mapObject, filterObject, deepEqual, clone, arraysIntersect, isCounterClockwise, isClosedPolygon, parseCacheControl, nextPowerOfTwo, isPowerOfTwo} from './util';
-import Point from './point';
+import Point from '@mapbox/point-geometry';
 
 describe('util', () => {
     expect(easeCubicInOut(0)).toBe(0);

package/src/util/util.ts

@@ -1,6 +1,6 @@
 import UnitBezier from '@mapbox/unitbezier';
 
-import Point from './point';
+import Point from '@mapbox/point-geometry';
 
 import type {Callback} from '../types/callback';