maplibre-gl 3.3.1 → 3.4.1

package/src/render/glyph_manager.ts

@@ -180,6 +180,10 @@ export class GlyphManager {
             return;
         }
 
+        // Client-generated glyphs are rendered at 2x texture scale,
+        // because CJK glyphs are more detailed than others.
+        const textureScale = 2;
+
         let tinySDF = entry.tinySDF;
         if (!tinySDF) {
             let fontWeight = '400';
@@ -191,9 +195,9 @@ export class GlyphManager {
                 fontWeight = '200';
             }
             tinySDF = entry.tinySDF = new GlyphManager.TinySDF({
-                fontSize: 24,
-                buffer: 3,
-                radius: 8,
+                fontSize: 24 * textureScale,
+                buffer: 3 * textureScale,
+                radius: 8 * textureScale,
                 cutoff: 0.25,
                 fontFamily,
                 fontWeight
@@ -215,17 +219,20 @@ export class GlyphManager {
          * To approximately align TinySDF glyphs with server-provided glyphs, we use this baseline adjustment
          * factor calibrated to be in between DIN Pro and Arial Unicode (but closer to Arial Unicode)
          */
-        const topAdjustment = 27;
+        const topAdjustment = 27.5;
+
+        const leftAdjustment = 0.5;
 
         return {
             id,
-            bitmap: new AlphaImage({width: char.width || 30, height: char.height || 30}, char.data),
+            bitmap: new AlphaImage({width: char.width || 30 * textureScale, height: char.height || 30 * textureScale}, char.data),
             metrics: {
-                width: char.glyphWidth || 24,
-                height: char.glyphHeight || 24,
-                left: char.glyphLeft || 0,
-                top: char.glyphTop - topAdjustment || -8,
-                advance: char.glyphAdvance || 24
+                width: char.glyphWidth / textureScale || 24,
+                height: char.glyphHeight / textureScale || 24,
+                left: (char.glyphLeft / textureScale + leftAdjustment) || 0,
+                top: char.glyphTop / textureScale - topAdjustment || -8,
+                advance: char.glyphAdvance / textureScale || 24,
+                isDoubleResolution: true
             }
         };
     }

package/src/source/image_source.test.ts

@@ -2,7 +2,7 @@ import {ImageSource} from './image_source';
 import {Evented} from '../util/evented';
 import {Transform} from '../geo/transform';
 import {extend} from '../util/util';
-import {fakeXhr} from 'nise';
+import {type FakeServer, fakeServer} from 'nise';
 import {RequestManager} from '../util/request_manager';
 import {Dispatcher} from '../util/dispatcher';
 import {stubAjaxGetImage} from '../util/test/util';
@@ -44,20 +44,15 @@ class StubMap extends Evented {
 }
 
 describe('ImageSource', () => {
-    const requests = [];
-    fakeXhr.useFakeXMLHttpRequest().onCreate = (req) => { requests.push(req); };
     stubAjaxGetImage(undefined);
+    let server: FakeServer;
+
     beforeEach(() => {
         global.fetch = null;
+        server = fakeServer.create();
+        server.respondWith(new ArrayBuffer(1));
     });
 
-    const respond = () => {
-        const req = requests.shift();
-        req.setStatus(200);
-        req.response = new ArrayBuffer(1);
-        req.onload();
-    };
-
     test('constructor', () => {
         const source = createSource({url: '/image.png'});
 
@@ -72,7 +67,7 @@ describe('ImageSource', () => {
             expect(e.dataType).toBe('source');
         });
         source.onAdd(new StubMap() as any);
-        respond();
+        server.respond();
         expect(source.image).toBeTruthy();
     });
 
@@ -81,7 +76,7 @@ describe('ImageSource', () => {
         const map = new StubMap() as any;
         const spy = jest.spyOn(map._requestManager, 'transformRequest');
         source.onAdd(map);
-        respond();
+        server.respond();
         expect(spy).toHaveBeenCalledTimes(1);
         expect(spy.mock.calls[0][0]).toBe('/image.png');
         expect(spy.mock.calls[0][1]).toBe('Image');
@@ -92,12 +87,12 @@ describe('ImageSource', () => {
         const map = new StubMap() as any;
         const spy = jest.spyOn(map._requestManager, 'transformRequest');
         source.onAdd(map);
-        respond();
+        server.respond();
         expect(spy).toHaveBeenCalledTimes(1);
         expect(spy.mock.calls[0][0]).toBe('/image.png');
         expect(spy.mock.calls[0][1]).toBe('Image');
         source.updateImage({url: '/image2.png'});
-        respond();
+        server.respond();
         expect(spy).toHaveBeenCalledTimes(2);
         expect(spy.mock.calls[1][0]).toBe('/image2.png');
         expect(spy.mock.calls[1][1]).toBe('Image');
@@ -107,7 +102,7 @@ describe('ImageSource', () => {
         const source = createSource({url: '/image.png'});
         const map = new StubMap() as any;
         source.onAdd(map);
-        respond();
+        server.respond();
         const beforeSerialized = source.serialize();
         expect(beforeSerialized.coordinates).toEqual([[0, 0], [1, 0], [1, 1], [0, 1]]);
         source.setCoordinates([[0, 0], [-1, 0], [-1, -1], [0, -1]]);
@@ -119,14 +114,14 @@ describe('ImageSource', () => {
         const source = createSource({url: '/image.png'});
         const map = new StubMap() as any;
         source.onAdd(map);
-        respond();
+        server.respond();
         const beforeSerialized = source.serialize();
         expect(beforeSerialized.coordinates).toEqual([[0, 0], [1, 0], [1, 1], [0, 1]]);
         source.updateImage({
             url: '/image2.png',
             coordinates: [[0, 0], [-1, 0], [-1, -1], [0, -1]]
         });
-        respond();
+        server.respond();
         const afterSerialized = source.serialize();
         expect(afterSerialized.coordinates).toEqual([[0, 0], [-1, 0], [-1, -1], [0, -1]]);
     });
@@ -140,7 +135,7 @@ describe('ImageSource', () => {
             }
         });
         source.onAdd(new StubMap() as any);
-        respond();
+        server.respond();
     });
 
     test('fires data event when metadata is loaded', done => {
@@ -151,7 +146,7 @@ describe('ImageSource', () => {
             }
         });
         source.onAdd(new StubMap() as any);
-        respond();
+        server.respond();
     });
 
     test('fires idle event on prepare call when there is at least one not loaded tile', done => {
@@ -164,7 +159,7 @@ describe('ImageSource', () => {
             }
         });
         source.onAdd(new StubMap() as any);
-        respond();
+        server.respond();
 
         source.tiles[String(tile.tileID.wrap)] = tile;
         source.image = new ImageBitmap();
@@ -190,10 +185,9 @@ describe('ImageSource', () => {
 
         source.onAdd(map);
 
-        requests.shift();
         expect(source.image).toBeUndefined();
         source.updateImage({url: '/image2.png'});
-        respond();
+        server.respond();
         expect(source.image).toBeTruthy();
     });
 
@@ -203,8 +197,7 @@ describe('ImageSource', () => {
 
         source.onAdd(map);
 
-        const request = requests.shift() as any;
-        const spy = jest.spyOn(request, 'abort');
+        const spy = jest.spyOn(server.requests[0] as any, 'abort');
 
         source.updateImage({url: '/image2.png'});
         expect(spy).toHaveBeenCalled();

package/src/source/raster_dem_tile_source.ts

@@ -1,6 +1,6 @@
 import {ImageRequest} from '../util/image_request';
 import {ResourceType} from '../util/request_manager';
-import {extend, isImageBitmap} from '../util/util';
+import {extend, isImageBitmap, readImageUsingVideoFrame} from '../util/util';
 import {Evented} from '../util/evented';
 import {browser} from '../util/browser';
 import {offscreenCanvasSupported} from '../util/offscreen_canvas_supported';
@@ -8,6 +8,7 @@ import {OverscaledTileID} from './tile_id';
 import {RasterTileSource} from './raster_tile_source';
 // ensure DEMData is registered for worker transfer on main thread:
 import '../data/dem_data';
+import type {DEMEncoding} from '../data/dem_data';
 
 import type {Source} from './source';
 import type {Dispatcher} from '../util/dispatcher';
@@ -15,6 +16,8 @@ import type {Tile} from './tile';
 import type {Callback} from '../types/callback';
 import type {RasterDEMSourceSpecification} from '@maplibre/maplibre-gl-style-spec';
 import type {ExpiryData} from '../util/ajax';
+import {isOffscreenCanvasDistorted} from '../util/offscreen_canvas_distorted';
+import {RGBAImage} from '../util/image';
 
 /**
  * A source containing raster DEM tiles (See the [Style Specification](https://maplibre.org/maplibre-style-spec/) for detailed documentation of options.)
@@ -33,7 +36,11 @@ import type {ExpiryData} from '../util/ajax';
  * @see [3D Terrain](https://maplibre.org/maplibre-gl-js/docs/examples/3d-terrain/)
  */
 export class RasterDEMTileSource extends RasterTileSource implements Source {
-    encoding: 'mapbox' | 'terrarium';
+    encoding: DEMEncoding;
+    redFactor?: number;
+    greenFactor?: number;
+    blueFactor?: number;
+    baseShift?: number;
 
     constructor(id: string, options: RasterDEMSourceSpecification, dispatcher: Dispatcher, eventedParent: Evented) {
         super(id, options, dispatcher, eventedParent);
@@ -41,14 +48,17 @@ export class RasterDEMTileSource extends RasterTileSource implements Source {
         this.maxzoom = 22;
         this._options = extend({type: 'raster-dem'}, options);
         this.encoding = options.encoding || 'mapbox';
+        this.redFactor = options.redFactor;
+        this.greenFactor = options.greenFactor;
+        this.blueFactor = options.blueFactor;
+        this.baseShift = options.baseShift;
     }
 
     loadTile(tile: Tile, callback: Callback<void>) {
         const url = tile.tileID.canonical.url(this.tiles, this.map.getPixelRatio(), this.scheme);
-        tile.request = ImageRequest.getImage(this.map._requestManager.transformRequest(url, ResourceType.Tile), imageLoaded.bind(this), this.map._refreshExpiredTiles);
-
+        const request = this.map._requestManager.transformRequest(url, ResourceType.Tile);
         tile.neighboringTiles = this._getNeighboringTiles(tile.tileID);
-        function imageLoaded(err: Error, img: (HTMLImageElement | ImageBitmap) & ExpiryData) {
+        tile.request = ImageRequest.getImage(request, async (err: Error, img: (HTMLImageElement | ImageBitmap), expiry: ExpiryData) => {
             delete tile.request;
             if (tile.aborted) {
                 tile.state = 'unloaded';
@@ -57,24 +67,39 @@ export class RasterDEMTileSource extends RasterTileSource implements Source {
                 tile.state = 'errored';
                 callback(err);
             } else if (img) {
-                if (this.map._refreshExpiredTiles) tile.setExpiryData(img);
-                delete img.cacheControl;
-                delete img.expires;
+                if (this.map._refreshExpiredTiles) tile.setExpiryData(expiry);
                 const transfer = isImageBitmap(img) && offscreenCanvasSupported();
-                const rawImageData = transfer ? img : browser.getImageData(img, 1);
+                const rawImageData = transfer ? img : await readImageNow(img);
                 const params = {
                     uid: tile.uid,
                     coord: tile.tileID,
                     source: this.id,
                     rawImageData,
-                    encoding: this.encoding
+                    encoding: this.encoding,
+                    redFactor: this.redFactor,
+                    greenFactor: this.greenFactor,
+                    blueFactor: this.blueFactor,
+                    baseShift: this.baseShift
                 };
 
                 if (!tile.actor || tile.state === 'expired') {
                     tile.actor = this.dispatcher.getActor();
-                    tile.actor.send('loadDEMTile', params, done.bind(this));
+                    tile.actor.send('loadDEMTile', params, done);
+                }
+            }
+        }, this.map._refreshExpiredTiles);
+
+        async function readImageNow(img: ImageBitmap | HTMLImageElement): Promise<RGBAImage | ImageData> {
+            if (typeof VideoFrame !== 'undefined' && isOffscreenCanvasDistorted()) {
+                const width = img.width + 2;
+                const height = img.height + 2;
+                try {
+                    return new RGBAImage({width, height}, await readImageUsingVideoFrame(img, -1, -1, width, height));
+                } catch (e) {
+                    // fall-back to browser canvas decoding
                 }
             }
+            return browser.getImageData(img, 1);
         }
 
         function done(err, data) {

package/src/source/raster_dem_tile_worker_source.ts

@@ -6,46 +6,29 @@ import type {
     WorkerDEMTileCallback,
     TileParameters
 } from './worker_source';
-import {isImageBitmap} from '../util/util';
+import {getImageData, isImageBitmap} from '../util/util';
 
 export class RasterDEMTileWorkerSource {
     actor: Actor;
     loaded: {[_: string]: DEMData};
-    offscreenCanvas: OffscreenCanvas;
-    offscreenCanvasContext: OffscreenCanvasRenderingContext2D;
 
     constructor() {
         this.loaded = {};
     }
 
-    loadTile(params: WorkerDEMTileParameters, callback: WorkerDEMTileCallback) {
-        const {uid, encoding, rawImageData} = params;
-        // Main thread will transfer ImageBitmap if offscreen decode with OffscreenCanvas is supported, else it will transfer an already decoded image.
-        const imagePixels = isImageBitmap(rawImageData) ? this.getImageData(rawImageData) : rawImageData as RGBAImage;
-        const dem = new DEMData(uid, imagePixels, encoding);
+    async loadTile(params: WorkerDEMTileParameters, callback: WorkerDEMTileCallback) {
+        const {uid, encoding, rawImageData, redFactor, greenFactor, blueFactor, baseShift} = params;
+        const width = rawImageData.width + 2;
+        const height = rawImageData.height + 2;
+        const imagePixels: RGBAImage = isImageBitmap(rawImageData) ?
+            new RGBAImage({width, height}, await getImageData(rawImageData, -1, -1, width, height)) :
+            rawImageData;
+        const dem = new DEMData(uid, imagePixels, encoding, redFactor, greenFactor, blueFactor, baseShift);
         this.loaded = this.loaded || {};
         this.loaded[uid] = dem;
         callback(null, dem);
     }
 
-    getImageData(imgBitmap: ImageBitmap): RGBAImage {
-        // Lazily initialize OffscreenCanvas
-        if (!this.offscreenCanvas || !this.offscreenCanvasContext) {
-            // Dem tiles are typically 256x256
-            this.offscreenCanvas = new OffscreenCanvas(imgBitmap.width, imgBitmap.height);
-            this.offscreenCanvasContext = this.offscreenCanvas.getContext('2d', {willReadFrequently: true});
-        }
-
-        this.offscreenCanvas.width = imgBitmap.width;
-        this.offscreenCanvas.height = imgBitmap.height;
-
-        this.offscreenCanvasContext.drawImage(imgBitmap, 0, 0, imgBitmap.width, imgBitmap.height);
-        // Insert an additional 1px padding around the image to allow backfilling for neighboring data.
-        const imgData = this.offscreenCanvasContext.getImageData(-1, -1, imgBitmap.width + 2, imgBitmap.height + 2);
-        this.offscreenCanvasContext.clearRect(0, 0, this.offscreenCanvas.width, this.offscreenCanvas.height);
-        return new RGBAImage({width: imgData.width, height: imgData.height}, imgData.data);
-    }
-
     removeTile(params: TileParameters) {
         const loaded = this.loaded,
             uid = params.uid;

package/src/source/raster_tile_source.test.ts

@@ -2,7 +2,7 @@ import {RasterTileSource} from './raster_tile_source';
 import {OverscaledTileID} from './tile_id';
 import {RequestManager} from '../util/request_manager';
 import {Dispatcher} from '../util/dispatcher';
-import {fakeServer, FakeServer} from 'nise';
+import {fakeServer, type FakeServer} from 'nise';
 import {Tile} from './tile';
 import {stubAjaxGetImage} from '../util/test/util';
 

package/src/source/raster_tile_source.ts

@@ -29,7 +29,7 @@ import type {
  * ```ts
  * map.addSource('raster-source', {
  *     'type': 'raster',
- *     'tiles': ['https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.jpg'],
+ *     'tiles': ['https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg'],
  *     'tileSize': 256,
  * });
  * ```

package/src/source/terrain_source_cache.test.ts

@@ -2,7 +2,7 @@ import {TerrainSourceCache} from './terrain_source_cache';
 import {Style} from '../style/style';
 import {RequestManager} from '../util/request_manager';
 import {Dispatcher} from '../util/dispatcher';
-import {fakeServer, FakeServer} from 'nise';
+import {fakeServer, type FakeServer} from 'nise';
 import {Transform} from '../geo/transform';
 import {Evented} from '../util/evented';
 import {Painter} from '../render/painter';

package/src/source/vector_tile_source.test.ts

@@ -1,4 +1,4 @@
-import {fakeServer, FakeServer} from 'nise';
+import {fakeServer, type FakeServer} from 'nise';
 import {Source} from './source';
 import {VectorTileSource} from './vector_tile_source';
 import {Tile} from './tile';

package/src/source/vector_tile_worker_source.test.ts

@@ -4,7 +4,7 @@ import vt from '@mapbox/vector-tile';
 import Protobuf from 'pbf';
 import {VectorTileWorkerSource} from '../source/vector_tile_worker_source';
 import {StyleLayerIndex} from '../style/style_layer_index';
-import {fakeServer, FakeServer} from 'nise';
+import {fakeServer, type FakeServer} from 'nise';
 import {Actor} from '../util/actor';
 import {TileParameters, WorkerTileParameters, WorkerTileResult} from './worker_source';
 import {WorkerTile} from './worker_tile';
@@ -234,6 +234,50 @@ describe('vector tile worker source', () => {
 
     });
 
+    test('VectorTileWorkerSource#returns a good error message when failing to parse a tile', () => {
+        const source = new VectorTileWorkerSource(actor, new StyleLayerIndex(), []);
+        const parse = jest.fn();
+        const callback = jest.fn();
+
+        server.respondWith(request => {
+            request.respond(200, {'Content-Type': 'application/pbf'}, 'something...');
+        });
+
+        source.loadTile({
+            source: 'source',
+            uid: 0,
+            tileID: {overscaledZ: 0, wrap: 0, canonical: {x: 0, y: 0, z: 0, w: 0}},
+            request: {url: 'http://localhost:2900/faketile.pbf'}
+        } as any as WorkerTileParameters, callback);
+
+        server.respond();
+
+        expect(parse).not.toHaveBeenCalled();
+        expect(callback).toHaveBeenCalledTimes(1);
+        expect(callback.mock.calls[0][0].message).toContain('Unable to parse the tile at');
+    });
+
+    test('VectorTileWorkerSource#returns a good error message when failing to parse a gzipped tile', () => {
+        const source = new VectorTileWorkerSource(actor, new StyleLayerIndex(), []);
+        const parse = jest.fn();
+        const callback = jest.fn();
+
+        server.respondWith(new Uint8Array([0x1f, 0x8b]).buffer);
+
+        source.loadTile({
+            source: 'source',
+            uid: 0,
+            tileID: {overscaledZ: 0, wrap: 0, canonical: {x: 0, y: 0, z: 0, w: 0}},
+            request: {url: 'http://localhost:2900/faketile.pbf'}
+        } as any as WorkerTileParameters, callback);
+
+        server.respond();
+
+        expect(parse).not.toHaveBeenCalled();
+        expect(callback).toHaveBeenCalledTimes(1);
+        expect(callback.mock.calls[0][0].message).toContain('gzipped');
+    });
+
     test('VectorTileWorkerSource provides resource timing information', done => {
         const rawTileData = fs.readFileSync(path.join(__dirname, '/../../test/unit/assets/mbsv5-6-18-23.vector.pbf'));
 

package/src/source/vector_tile_worker_source.ts

@@ -46,12 +46,25 @@ function loadVectorTile(params: WorkerTileParameters, callback: LoadVectorDataCa
         if (err) {
             callback(err);
         } else if (data) {
-            callback(null, {
-                vectorTile: new vt.VectorTile(new Protobuf(data)),
-                rawData: data,
-                cacheControl,
-                expires
-            });
+            try {
+                const vectorTile = new vt.VectorTile(new Protobuf(data));
+                callback(null, {
+                    vectorTile,
+                    rawData: data,
+                    cacheControl,
+                    expires
+                });
+            } catch (ex) {
+                const bytes = new Uint8Array(data);
+                const isGzipped = bytes[0] === 0x1f && bytes[1] === 0x8b;
+                let errorMessage = `Unable to parse the tile at ${params.request.url}, `;
+                if (isGzipped) {
+                    errorMessage += 'please make sure the data is not gzipped and that you have configured the relevant header in the server';
+                } else {
+                    errorMessage += `got error: ${ex.messge}`;
+                }
+                callback(new Error(errorMessage));
+            }
         }
     });
     return () => {

package/src/source/worker_source.ts

@@ -6,7 +6,7 @@ import type {OverscaledTileID} from './tile_id';
 import type {Bucket} from '../data/bucket';
 import type {FeatureIndex} from '../data/feature_index';
 import type {CollisionBoxArray} from '../data/array_types.g';
-import type {DEMData} from '../data/dem_data';
+import type {DEMData, DEMEncoding} from '../data/dem_data';
 import type {StyleGlyph} from '../style/style_glyph';
 import type {StyleImage} from '../style/style_image';
 import type {PromoteIdSpecification} from '@maplibre/maplibre-gl-style-spec';
@@ -37,7 +37,11 @@ export type WorkerDEMTileParameters = TileParameters & {
         w: number;
     };
     rawImageData: RGBAImage | ImageBitmap;
-    encoding: 'mapbox' | 'terrarium';
+    encoding: DEMEncoding;
+    redFactor: number;
+    greenFactor: number;
+    blueFactor: number;
+    baseShift: number;
 };
 
 /**

package/src/style/load_glyph_range.test.ts

@@ -2,7 +2,8 @@ import fs from 'fs';
 import path from 'path';
 import {RequestManager} from '../util/request_manager';
 import {loadGlyphRange} from './load_glyph_range';
-import {fakeXhr} from 'nise';
+import {fakeServer} from 'nise';
+import {bufferToArrayBuffer} from '../util/test/util';
 
 test('loadGlyphRange', done => {
     global.fetch = null;
@@ -13,8 +14,8 @@ test('loadGlyphRange', done => {
 
     const manager = new RequestManager(transform);
 
-    let request;
-    fakeXhr.useFakeXMLHttpRequest().onCreate = (req) => { request = req; };
+    const server = fakeServer.create();
+    server.respondWith(bufferToArrayBuffer(fs.readFileSync(path.join(__dirname, '../../test/unit/assets/0-255.pbf'))));
 
     loadGlyphRange('Arial Unicode MS', 0, 'https://localhost/fonts/v1/{fontstack}/{range}.pbf', manager, (err, result) => {
         expect(err).toBeFalsy();
@@ -35,9 +36,6 @@ test('loadGlyphRange', done => {
         }
         done();
     });
-
-    expect(request.url).toBe('https://localhost/fonts/v1/Arial Unicode MS/0-255.pbf');
-    request.setStatus(200);
-    request.response = fs.readFileSync(path.join(__dirname, '../../test/unit/assets/0-255.pbf'));
-    request.onload();
+    server.respond();
+    expect(server.requests[0].url).toBe('https://localhost/fonts/v1/Arial Unicode MS/0-255.pbf');
 });