maplibre-gl 3.2.0 → 3.2.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "maplibre-gl",
   "description": "BSD licensed community fork of mapbox-gl, a WebGL interactive maps library",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "main": "dist/maplibre-gl.js",
   "style": "dist/maplibre-gl.css",
   "license": "BSD-3-Clause",
@@ -20,11 +20,12 @@
     "@mapbox/unitbezier": "^0.0.1",
     "@mapbox/vector-tile": "^1.3.1",
     "@mapbox/whoots-js": "^3.1.0",
-    "@maplibre/maplibre-gl-style-spec": "^19.2.1",
+    "@maplibre/maplibre-gl-style-spec": "^19.2.2",
     "@types/geojson": "^7946.0.10",
     "@types/mapbox__point-geometry": "^0.1.2",
     "@types/mapbox__vector-tile": "^1.3.0",
     "@types/pbf": "^3.0.2",
+    "@types/supercluster": "^7.1.0",
     "earcut": "^2.2.4",
     "geojson-vt": "^3.2.1",
     "gl-matrix": "^3.4.3",
@@ -41,7 +42,7 @@
   "devDependencies": {
     "@mapbox/mapbox-gl-rtl-text": "^0.2.3",
     "@mapbox/mvt-fixtures": "^3.10.0",
-    "@rollup/plugin-commonjs": "^25.0.2",
+    "@rollup/plugin-commonjs": "^25.0.3",
     "@rollup/plugin-json": "^6.0.0",
     "@rollup/plugin-node-resolve": "^15.1.0",
     "@rollup/plugin-replace": "^5.0.2",
@@ -53,49 +54,48 @@
     "@types/d3": "^7.4.0",
     "@types/diff": "^5.0.3",
     "@types/earcut": "^2.1.1",
-    "@types/eslint": "^8.40.2",
+    "@types/eslint": "^8.44.0",
     "@types/gl": "^6.0.2",
     "@types/glob": "^8.1.0",
-    "@types/jest": "^29.5.2",
+    "@types/jest": "^29.5.3",
     "@types/jsdom": "^21.1.1",
     "@types/minimist": "^1.2.2",
     "@types/murmurhash-js": "^1.0.4",
     "@types/nise": "^1.4.1",
-    "@types/node": "^20.3.3",
+    "@types/node": "^20.4.4",
     "@types/offscreencanvas": "^2019.7.0",
     "@types/pixelmatch": "^5.2.4",
     "@types/pngjs": "^6.0.1",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
     "@types/request": "^2.48.8",
     "@types/shuffle-seed": "^1.1.0",
-    "@types/supercluster": "^7.1.0",
     "@types/window-or-global": "^1.0.4",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.60.1",
+    "@typescript-eslint/eslint-plugin": "^5.61.0",
+    "@typescript-eslint/parser": "^5.62.0",
     "address": "^1.2.2",
     "benchmark": "^2.1.4",
     "canvas": "^2.11.2",
     "cssnano": "^6.0.1",
     "d3": "^7.8.5",
     "d3-queue": "^3.0.7",
-    "devtools-protocol": "^0.0.1165014",
+    "devtools-protocol": "^0.0.1170846",
     "diff": "^5.1.0",
     "dts-bundle-generator": "^8.0.1",
-    "eslint": "^8.44.0",
+    "eslint": "^8.45.0",
     "eslint-config-mourner": "^3.0.0",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jest": "^27.2.2",
+    "eslint-plugin-jest": "^27.2.3",
     "eslint-plugin-tsdoc": "0.2.17",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react": "^7.33.0",
     "expect": "^29.5.0",
     "gl": "^6.0.2",
-    "glob": "^10.3.1",
+    "glob": "^10.3.3",
     "is-builtin-module": "^3.2.1",
-    "jest": "^29.5.0",
+    "jest": "^29.6.1",
     "jest-canvas-mock": "^2.5.2",
-    "jest-environment-jsdom": "^29.5.0",
+    "jest-environment-jsdom": "^29.6.1",
     "jsdom": "^22.1.0",
     "json-stringify-pretty-compact": "^4.0.0",
     "minimist": "^1.2.8",
@@ -107,22 +107,22 @@
     "pdf-merger-js": "^4.3.0",
     "pixelmatch": "^5.3.0",
     "pngjs": "^7.0.0",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.26",
     "postcss-cli": "^10.1.0",
     "postcss-inline-svg": "^6.0.0",
-    "pretty-bytes": "^6.1.0",
-    "puppeteer": "^20.7.4",
+    "pretty-bytes": "^6.1.1",
+    "puppeteer": "^20.9.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "rollup": "^3.26.0",
+    "rollup": "^3.26.3",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rw": "^1.3.3",
-    "semver": "^7.5.3",
+    "semver": "^7.5.4",
     "shuffle-seed": "^1.1.6",
     "source-map-explorer": "^2.5.3",
     "st": "^3.0.0",
-    "stylelint": "^15.10.1",
-    "stylelint-config-standard": "^33.0.0",
+    "stylelint": "^15.10.2",
+    "stylelint-config-standard": "^34.0.0",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
     "tslib": "^2.6.0",

package/src/geo/transform.test.ts

@@ -406,13 +406,16 @@ describe('transform', () => {
         transform.resize(512, 512);
 
         // expect same values because of no elevation change
-        transform.getElevation = () => 200;
-        transform.recalculateZoom(null);
+        const terrain = {
+            getElevationForLngLatZoom: () => 200,
+            pointCoordinate: () => null
+        };
+        transform.recalculateZoom(terrain as any);
         expect(transform.zoom).toBe(14);
 
         // expect new zoom because of elevation change
-        transform.getElevation = () => 400;
-        transform.recalculateZoom(null);
+        terrain.getElevationForLngLatZoom = () => 400;
+        transform.recalculateZoom(terrain as any);
         expect(transform.zoom).toBe(14.127997275621933);
         expect(transform.elevation).toBe(400);
 
@@ -420,8 +423,8 @@ describe('transform', () => {
         expect(transform._center.lat).toBe(50.00000000000017);
 
         // expect new zoom because of elevation change to point below sea level
-        transform.getElevation = () => -200;
-        transform.recalculateZoom(null);
+        terrain.getElevationForLngLatZoom = () => -200;
+        transform.recalculateZoom(terrain as any);
         expect(transform.zoom).toBe(13.773740316343467);
         expect(transform.elevation).toBe(-200);
     });
@@ -458,14 +461,4 @@ describe('transform', () => {
         expect(top).toBeCloseTo(79.1823898251593, 10);
         expect(transform.getBounds().getNorthWest().toArray()).toStrictEqual(transform.pointLocation(new Point(0, top)).toArray());
     });
-
-    test('getElevation with lng less than -180 wraps correctly', () => {
-        const OVERSCALETILEID_DOES_NOT_THROW = 4;
-        const terrain = {
-            getElevation: () => OVERSCALETILEID_DOES_NOT_THROW
-        } as any as Terrain;
-        const transform = new Transform(0, 22, 0, 85, true);
-        expect(transform.getElevation(new LngLat(-183, 40), terrain)).toBe(OVERSCALETILEID_DOES_NOT_THROW);
-    });
-
 });

package/src/geo/transform.ts

@@ -30,7 +30,6 @@ export class Transform {
     rotationMatrix: mat2;
     pixelsToGLUnits: [number, number];
     cameraToCenterDistance: number;
-    cameraToSeaLevelDistance: number;
     mercatorMatrix: mat4;
     projMatrix: mat4;
     invProjMatrix: mat4;
@@ -40,7 +39,6 @@ export class Transform {
     pixelMatrixInverse: mat4;
     glCoordMatrix: mat4;
     labelPlaneMatrix: mat4;
-    freezeElevation: boolean;
     _fov: number;
     _pitch: number;
     _zoom: number;
@@ -57,11 +55,11 @@ export class Transform {
     _constraining: boolean;
     _posMatrixCache: {[_: string]: mat4};
     _alignedPosMatrixCache: {[_: string]: mat4};
+    _minEleveationForCurrentTile: number;
 
     constructor(minZoom?: number, maxZoom?: number, minPitch?: number, maxPitch?: number, renderWorldCopies?: boolean) {
         this.tileSize = 512; // constant
         this.maxValidLatitude = 85.051129; // constant
-        this.freezeElevation = false;
 
         this._renderWorldCopies = renderWorldCopies === undefined ? true : !!renderWorldCopies;
         this._minZoom = minZoom || 0;
@@ -84,6 +82,7 @@ export class Transform {
         this._edgeInsets = new EdgeInsets();
         this._posMatrixCache = {};
         this._alignedPosMatrixCache = {};
+        this._minEleveationForCurrentTile = 0;
     }
 
     clone(): Transform {
@@ -99,6 +98,7 @@ export class Transform {
         this.height = that.height;
         this._center = that._center;
         this._elevation = that._elevation;
+        this._minEleveationForCurrentTile = that._minEleveationForCurrentTile;
         this.zoom = that.zoom;
         this.angle = that.angle;
         this._fov = that._fov;
@@ -470,30 +470,6 @@ export class Transform {
 
     get point(): Point { return this.project(this.center); }
 
-    /**
-     * Updates the center-elevation value unless freezeElevation is activated.
-     * @param terrain - the terrain
-     */
-    updateElevation(terrain?: Terrain) {
-        if (this.freezeElevation) return;
-        this.elevation = terrain ? this.getElevation(this._center, terrain) : 0;
-    }
-
-    /**
-     * get the elevation from terrain for the current zoomlevel.
-     * @param lnglat - the location
-     * @param terrain - the terrain
-     * @returns elevation in meters
-     */
-    getElevation(lnglat: LngLat, terrain: Terrain): number {
-        const merc = MercatorCoordinate.fromLngLat(lnglat.wrap());
-        const worldSize = (1 << this.tileZoom) * EXTENT;
-        const mercX = merc.x * worldSize, mercY = merc.y * worldSize;
-        const tileX = Math.floor(mercX / EXTENT), tileY = Math.floor(mercY / EXTENT);
-        const tileID = new OverscaledTileID(this.tileZoom, 0, this.tileZoom, tileX, tileY);
-        return terrain.getElevation(tileID, mercX % EXTENT, mercY % EXTENT, EXTENT);
-    }
-
     /**
      * get the camera position in LngLat and altitudes in meter
      * @returns An object with lngLat & altitude.
@@ -516,7 +492,7 @@ export class Transform {
     recalculateZoom(terrain: Terrain) {
         // find position the camera is looking on
         const center = this.pointLocation(this.centerPoint, terrain);
-        const elevation = this.getElevation(center, terrain);
+        const elevation = terrain.getElevationForLngLatZoom(center, this.tileZoom);
         const deltaElevation = this.elevation - elevation;
         if (!deltaElevation) return;
 
@@ -557,7 +533,7 @@ export class Transform {
      */
     locationPoint(lnglat: LngLat, terrain?: Terrain): Point {
         return terrain ?
-            this.coordinatePoint(this.locationCoordinate(lnglat), this.getElevation(lnglat, terrain), this.pixelMatrix3D) :
+            this.coordinatePoint(this.locationCoordinate(lnglat), terrain.getElevationForLngLatZoom(lnglat, this.tileZoom), this.pixelMatrix3D) :
             this.coordinatePoint(this.locationCoordinate(lnglat));
     }
 
@@ -827,9 +803,11 @@ export class Transform {
         this.glCoordMatrix = m;
 
         // Calculate the camera to sea-level distance in pixel in respect of terrain
-        // In case of negative elevation (e.g. the dead see) use the lower plane for calculation
-        this.cameraToSeaLevelDistance = this.cameraToCenterDistance + this._elevation * this._pixelPerMeter / Math.cos(this._pitch);
-        const lowestPlane = this._elevation < 0 ? this.cameraToCenterDistance : this.cameraToSeaLevelDistance;
+        const cameraToSeaLevelDistance = this.cameraToCenterDistance + this._elevation * this._pixelPerMeter / Math.cos(this._pitch);
+        // In case of negative minimum elevation (e.g. the dead see, under the sea maps) use a lower plane for calculation
+        const minElevation = Math.min(this.elevation, this._minEleveationForCurrentTile);
+        const cameraToLowestPointDistance = cameraToSeaLevelDistance - minElevation * this._pixelPerMeter / Math.cos(this._pitch);
+        const lowestPlane = minElevation < 0 ? cameraToLowestPointDistance : cameraToSeaLevelDistance;
 
         // Find the distance from the center point [width/2 + offset.x, height/2 + offset.y] to the
         // center top point [width/2 + offset.x, 0] in Z units, using the law of sines.

package/src/render/draw_fill.test.ts

@@ -28,7 +28,7 @@ describe('drawFill', () => {
         const painterMock: Painter = constructMockPainer();
         const layer: FillStyleLayer = constructMockLayer();
 
-        const programMock = new Program(null as any, null as any, null as any, null as any, null as any, null as any, null as any);
+        const programMock = new Program(null as any, null as any, null as any, null as any, null as any, null as any);
         (painterMock.useProgram as jest.Mock).mockReturnValue(programMock);
 
         const mockTile = constructMockTile(layer);

package/src/render/draw_symbol.test.ts

@@ -62,7 +62,7 @@ describe('drawSymbol', () => {
 
         const tileId = new OverscaledTileID(1, 0, 1, 0, 0);
         tileId.posMatrix = mat4.create();
-        const programMock = new Program(null, null, null, null, null, null, null);
+        const programMock = new Program(null, null, null, null, null, null);
         (painterMock.useProgram as jest.Mock).mockReturnValue(programMock);
         const bucketMock = new SymbolBucket(null);
         bucketMock.icon = {
@@ -124,7 +124,7 @@ describe('drawSymbol', () => {
 
         const tileId = new OverscaledTileID(1, 0, 1, 0, 0);
         tileId.posMatrix = mat4.create();
-        const programMock = new Program(null, null, null, null, null, null, null);
+        const programMock = new Program(null, null, null, null, null, null);
         (painterMock.useProgram as jest.Mock).mockReturnValue(programMock);
         const bucketMock = new SymbolBucket(null);
         bucketMock.icon = {
@@ -189,7 +189,7 @@ describe('drawSymbol', () => {
 
         const tileId = new OverscaledTileID(1, 0, 1, 0, 0);
         tileId.posMatrix = mat4.create();
-        const programMock = new Program(null, null, null, null, null, null, null);
+        const programMock = new Program(null, null, null, null, null, null);
         (painterMock.useProgram as jest.Mock).mockReturnValue(programMock);
         const bucketMock = new SymbolBucket(null);
         bucketMock.icon = {

package/src/render/painter.ts

@@ -574,7 +574,6 @@ export class Painter {
         if (!this.cache[key]) {
             this.cache[key] = new Program(
                 this.context,
-                name,
                 shaders[name],
                 programConfiguration,
                 programUniforms[name],

package/src/render/program.ts

@@ -42,7 +42,6 @@ export class Program<Us extends UniformBindings> {
     failedToCreate: boolean;
 
     constructor(context: Context,
-        name: string,
         source: {
             fragmentSource: string;
             vertexSource: string;

package/src/render/terrain.test.ts

@@ -11,6 +11,7 @@ import type {DEMData} from '../data/dem_data';
 import {Tile} from '../source/tile';
 import {Painter} from './painter';
 import {mat4} from 'gl-matrix';
+import {LngLat} from '../geo/lng_lat';
 
 describe('Terrain', () => {
     test('pointCoordiate should not return null', () => {
@@ -193,4 +194,20 @@ describe('Terrain', () => {
         expect(mockTerrain.getDEMElevation(null, 0.4, 0.2)).toBeCloseTo(42);
     });
 
+    test('getElevationForLngLatZoom with lng less than -180 wraps correctly', () => {
+        const terrain = new Terrain(null, {} as any, {} as any);
+
+        const OVERSCALETILEID_DOES_NOT_THROW = 4;
+        terrain.getElevation = () => OVERSCALETILEID_DOES_NOT_THROW;
+        expect(terrain.getElevationForLngLatZoom(new LngLat(-183, 40), 0)).toBe(OVERSCALETILEID_DOES_NOT_THROW);
+    });
+
+    test('getMinTileElevationForLngLatZoom with lng less than -180 wraps correctly', () => {
+        const terrain = new Terrain(null, {} as any, {} as any);
+
+        const OVERSCALETILEID_DOES_NOT_THROW = 4;
+        terrain.getMinMaxElevation = () => ({minElevation: OVERSCALETILEID_DOES_NOT_THROW, maxElevation: 42});
+        expect(terrain.getMinTileElevationForLngLatZoom(new LngLat(-183, 40), 0)).toBe(OVERSCALETILEID_DOES_NOT_THROW);
+    });
+
 });

package/src/render/terrain.ts

@@ -18,7 +18,7 @@ import {TerrainSourceCache} from '../source/terrain_source_cache';
 import {SourceCache} from '../source/source_cache';
 import {EXTENT} from '../data/extent';
 import type {TerrainSpecification} from '@maplibre/maplibre-gl-style-spec';
-import {earthRadius} from '../geo/lng_lat';
+import {LngLat, earthRadius} from '../geo/lng_lat';
 
 /**
  * A terrain GPU related object
@@ -180,7 +180,18 @@ export class Terrain {
     }
 
     /**
-     * get the Elevation for given coordinate in respect of exaggeration.
+     * Get the elevation for given {@link LngLat} in respect of exaggeration.
+     * @param lnglat - the location
+     * @param zoom - the zoom
+     * @returns the elevation
+     */
+    getElevationForLngLatZoom(lnglat: LngLat, zoom: number) {
+        const {tileID, mercatorX, mercatorY} = this._getOverscaledTileIDFromLngLatZoom(lnglat, zoom);
+        return this.getElevation(tileID, mercatorX % EXTENT, mercatorY % EXTENT, EXTENT);
+    }
+
+    /**
+     * Get the elevation for given coordinate in respect of exaggeration.
      * @param tileID - the tile id
      * @param x - between 0 .. EXTENT
      * @param y - between 0 .. EXTENT
@@ -391,6 +402,11 @@ export class Terrain {
         return 2 * Math.PI * earthRadius / Math.pow(2, zoom) / 5;
     }
 
+    getMinTileElevationForLngLatZoom(lnglat: LngLat, zoom: number) {
+        const {tileID} = this._getOverscaledTileIDFromLngLatZoom(lnglat, zoom);
+        return this.getMinMaxElevation(tileID).minElevation ?? 0;
+    }
+
     /**
      * Get the minimum and maximum elevation contained in a tile. This includes any
      * exaggeration included in the terrain.
@@ -409,4 +425,17 @@ export class Terrain {
         return minMax;
     }
 
+    _getOverscaledTileIDFromLngLatZoom(lnglat: LngLat, zoom: number): { tileID: OverscaledTileID; mercatorX: number; mercatorY: number} {
+        const mercatorCoordinate = MercatorCoordinate.fromLngLat(lnglat.wrap());
+        const worldSize = (1 << zoom) * EXTENT;
+        const mercatorX = mercatorCoordinate.x * worldSize;
+        const mercatorY = mercatorCoordinate.y * worldSize;
+        const tileX = Math.floor(mercatorX / EXTENT), tileY = Math.floor(mercatorY / EXTENT);
+        const tileID = new OverscaledTileID(zoom, 0, zoom, tileX, tileY);
+        return {
+            tileID,
+            mercatorX,
+            mercatorY
+        };
+    }
 }

package/src/source/raster_dem_tile_source.test.ts

@@ -150,4 +150,18 @@ describe('RasterTileSource', () => {
         });
         server.respond();
     });
+
+    it('serializes options', () => {
+        const source = createSource({
+            tiles: ['http://localhost:2900/raster-dem/{z}/{x}/{y}.png'],
+            minzoom: 2,
+            maxzoom: 10
+        });
+        expect(source.serialize()).toStrictEqual({
+            type: 'raster-dem',
+            tiles: ['http://localhost:2900/raster-dem/{z}/{x}/{y}.png'],
+            minzoom: 2,
+            maxzoom: 10
+        });
+    });
 });

package/src/source/raster_dem_tile_source.ts

@@ -43,17 +43,6 @@ export class RasterDEMTileSource extends RasterTileSource implements Source {
         this.encoding = options.encoding || 'mapbox';
     }
 
-    serialize() {
-        return {
-            type: 'raster-dem',
-            url: this.url,
-            tileSize: this.tileSize,
-            tiles: this.tiles,
-            bounds: this.bounds,
-            encoding: this.encoding
-        };
-    }
-
     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);

package/src/source/raster_tile_source.test.ts

@@ -170,4 +170,17 @@ describe('RasterTileSource', () => {
         expect((server.requests.pop() as any).aborted).toBe(true);
     });
 
+    it('serializes options', () => {
+        const source = createSource({
+            tiles: ['http://localhost:2900/raster/{z}/{x}/{y}.png'],
+            minzoom: 2,
+            maxzoom: 10
+        });
+        expect(source.serialize()).toStrictEqual({
+            type: 'raster',
+            tiles: ['http://localhost:2900/raster/{z}/{x}/{y}.png'],
+            minzoom: 2,
+            maxzoom: 10
+        });
+    });
 });

package/src/source/vector_tile_worker_source.test.ts

@@ -6,7 +6,7 @@ import {VectorTileWorkerSource} from '../source/vector_tile_worker_source';
 import {StyleLayerIndex} from '../style/style_layer_index';
 import {fakeServer, FakeServer} from 'nise';
 import {Actor} from '../util/actor';
-import {TileParameters, WorkerTileParameters} from './worker_source';
+import {TileParameters, WorkerTileParameters, WorkerTileResult} from './worker_source';
 import {WorkerTile} from './worker_tile';
 import {setPerformance} from '../util/test/util';
 
@@ -18,7 +18,6 @@ describe('vector tile worker source', () => {
         global.fetch = null;
         server = fakeServer.create();
         setPerformance();
-
     });
 
     afterEach(() => {
@@ -87,83 +86,54 @@ describe('vector tile worker source', () => {
         expect(callback).toHaveBeenCalledTimes(1);
     });
 
-    test('VectorTileWorkerSource#reloadTile queues a reload when parsing is in progress', () => {
-        const source = new VectorTileWorkerSource(actor, new StyleLayerIndex(), []);
-        const parse = jest.fn();
-
-        source.loaded = {
-            '0': {
-                status: 'done',
-                vectorTile: {},
-                parse
-            } as any as WorkerTile
-        };
-
-        const callback1 = jest.fn();
-        const callback2 = jest.fn();
-        source.reloadTile({uid: 0} as any as WorkerTileParameters, callback1);
-        expect(parse).toHaveBeenCalledTimes(1);
-
-        source.loaded[0].status = 'parsing';
-        source.reloadTile({uid: 0} as any as WorkerTileParameters, callback2);
-        expect(parse).toHaveBeenCalledTimes(1);
-
-        parse.mock.calls[0][4]();
-        expect(parse).toHaveBeenCalledTimes(2);
-        expect(callback1).toHaveBeenCalledTimes(1);
-        expect(callback2).toHaveBeenCalledTimes(0);
-
-        parse.mock.calls[1][4]();
-        expect(callback1).toHaveBeenCalledTimes(1);
-        expect(callback2).toHaveBeenCalledTimes(1);
-    });
-
-    test('VectorTileWorkerSource#reloadTile handles multiple pending reloads', () => {
-        // https://github.com/mapbox/mapbox-gl-js/issues/6308
-        const source = new VectorTileWorkerSource(actor, new StyleLayerIndex(), []);
-        const parse = jest.fn();
+    test('VectorTileWorkerSource#loadTile reparses tile if the reloadTile has been called during parsing', (done) => {
+        const rawTileData = new Uint8Array([]);
+        function loadVectorData(params, callback) {
+            return callback(null, {
+                vectorTile: new vt.VectorTile(new Protobuf(rawTileData)),
+                rawData: rawTileData
+            });
+        }
 
-        source.loaded = {
-            '0': {
-                status: 'done',
-                vectorTile: {},
-                parse
-            } as any as WorkerTile
-        };
+        const layerIndex = new StyleLayerIndex([{
+            id: 'test',
+            source: 'source',
+            'source-layer': 'test',
+            type: 'fill'
+        }]);
 
-        const callback1 = jest.fn();
-        const callback2 = jest.fn();
-        const callback3 = jest.fn();
-        source.reloadTile({uid: 0} as any as WorkerTileParameters, callback1);
-        expect(parse).toHaveBeenCalledTimes(1);
+        const source = new VectorTileWorkerSource(actor, layerIndex, [], loadVectorData);
 
-        source.loaded[0].status = 'parsing';
-        source.reloadTile({uid: 0} as any as WorkerTileParameters, callback2);
-        expect(parse).toHaveBeenCalledTimes(1);
+        const parseWorkerTileMock = jest
+            .spyOn(WorkerTile.prototype, 'parse')
+            .mockImplementation(function(data, layerIndex, availableImages, actor, callback) {
+                this.status = 'parsing';
+                window.setTimeout(() => callback(null, {} as WorkerTileResult), 10);
+            });
 
-        parse.mock.calls[0][4]();
-        expect(parse).toHaveBeenCalledTimes(2);
-        expect(callback1).toHaveBeenCalledTimes(1);
-        expect(callback2).toHaveBeenCalledTimes(0);
-        expect(callback3).toHaveBeenCalledTimes(0);
-
-        source.reloadTile({uid: 0} as any as WorkerTileParameters, callback3);
-        expect(parse).toHaveBeenCalledTimes(2);
-        expect(callback1).toHaveBeenCalledTimes(1);
-        expect(callback2).toHaveBeenCalledTimes(0);
-        expect(callback3).toHaveBeenCalledTimes(0);
-
-        parse.mock.calls[1][4]();
-        expect(parse).toHaveBeenCalledTimes(3);
-        expect(callback1).toHaveBeenCalledTimes(1);
-        expect(callback2).toHaveBeenCalledTimes(1);
-        expect(callback3).toHaveBeenCalledTimes(0);
-
-        parse.mock.calls[2][4]();
-        expect(callback1).toHaveBeenCalledTimes(1);
-        expect(callback2).toHaveBeenCalledTimes(1);
-        expect(callback3).toHaveBeenCalledTimes(1);
+        let loadCallbackCalled = false;
+        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, (err, res) => {
+            expect(err).toBeFalsy();
+            expect(res).toBeDefined();
+            loadCallbackCalled = true;
+        });
 
+        source.reloadTile({
+            source: 'source',
+            uid: '0',
+            tileID: {overscaledZ: 0, wrap: 0, canonical: {x: 0, y: 0, z: 0, w: 0}},
+        } as any as WorkerTileParameters, (err, res) => {
+            expect(err).toBeFalsy();
+            expect(res).toBeDefined();
+            expect(parseWorkerTileMock).toHaveBeenCalledTimes(2);
+            expect(loadCallbackCalled).toBeTruthy();
+            done();
+        });
     });
 
     test('VectorTileWorkerSource#reloadTile does not reparse tiles with no vectorTile data but does call callback', () => {