maplibre-gl 2.0.4 → 2.1.2

package/src/source/query_features.ts

@@ -91,18 +91,18 @@ export function queryRenderedFeatures(
 }
 
 export function queryRenderedSymbols(styleLayers: {[_: string]: StyleLayer},
-                            serializedLayers: {[_: string]: StyleLayer},
-                            sourceCaches: {[_: string]: SourceCache},
-                            queryGeometry: Array<Point>,
-                            params: {
-                              filter: FilterSpecification;
-                              layers: Array<string>;
-                              availableImages: Array<string>;
-                            },
-                            collisionIndex: CollisionIndex,
-                            retainedQueryData: {
-                              [_: number]: RetainedQueryData;
-                            }) {
+    serializedLayers: {[_: string]: StyleLayer},
+    sourceCaches: {[_: string]: SourceCache},
+    queryGeometry: Array<Point>,
+    params: {
+        filter: FilterSpecification;
+        layers: Array<string>;
+        availableImages: Array<string>;
+    },
+    collisionIndex: CollisionIndex,
+    retainedQueryData: {
+        [_: number]: RetainedQueryData;
+    }) {
     const result = {};
     const renderedSymbols = collisionIndex.queryRenderedSymbols(queryGeometry);
     const bucketQueryData = [];
@@ -113,14 +113,14 @@ export function queryRenderedSymbols(styleLayers: {[_: string]: StyleLayer},
 
     for (const queryData of bucketQueryData) {
         const bucketSymbols = queryData.featureIndex.lookupSymbolFeatures(
-                renderedSymbols[queryData.bucketInstanceId],
-                serializedLayers,
-                queryData.bucketIndex,
-                queryData.sourceLayerIndex,
-                params.filter,
-                params.layers,
-                params.availableImages,
-                styleLayers);
+            renderedSymbols[queryData.bucketInstanceId],
+            serializedLayers,
+            queryData.bucketIndex,
+            queryData.sourceLayerIndex,
+            params.filter,
+            params.layers,
+            params.availableImages,
+            styleLayers);
 
         for (const layerID in bucketSymbols) {
             const resultFeatures = result[layerID] = result[layerID] || [];

package/src/source/raster_dem_tile_source.test.ts

@@ -1,4 +1,4 @@
-import {fakeServer, SinonFakeServer} from 'sinon';
+import {fakeServer, FakeServer} from 'nise';
 import RasterDEMTileSource from './raster_dem_tile_source';
 import {OverscaledTileID} from './tile_id';
 import {RequestManager} from '../util/request_manager';
@@ -10,7 +10,8 @@ function createSource(options, transformCallback?) {
     source.onAdd({
         transform: {angle: 0, pitch: 0, showCollisionBoxes: false},
         _getMapId: () => 1,
-        _requestManager: new RequestManager(transformCallback)
+        _requestManager: new RequestManager(transformCallback),
+        getPixelRatio() { return 1; }
     } as any);
 
     source.on('error', (e) => {
@@ -21,7 +22,7 @@ function createSource(options, transformCallback?) {
 }
 
 describe('RasterTileSource', () => {
-    let server: SinonFakeServer;
+    let server: FakeServer;
     beforeEach(() => {
         global.fetch = null;
         server = fakeServer.create();

package/src/source/raster_dem_tile_source.ts

@@ -37,7 +37,7 @@ class RasterDEMTileSource extends RasterTileSource implements Source {
     }
 
     loadTile(tile: Tile, callback: Callback<void>) {
-        const url = tile.tileID.canonical.url(this.tiles, this.scheme);
+        const url = tile.tileID.canonical.url(this.tiles, this.map.getPixelRatio(), this.scheme);
         tile.request = getImage(this.map._requestManager.transformRequest(url, ResourceType.Tile), imageLoaded.bind(this));
 
         tile.neighboringTiles = this._getNeighboringTiles(tile.tileID);

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, SinonFakeServer} from 'sinon';
+import {fakeServer, FakeServer} from 'nise';
 import Tile from './tile';
 
 function createSource(options, transformCallback?) {
@@ -10,7 +10,8 @@ function createSource(options, transformCallback?) {
     source.onAdd({
         transform: {angle: 0, pitch: 0, showCollisionBoxes: false},
         _getMapId: () => 1,
-        _requestManager: new RequestManager(transformCallback)
+        _requestManager: new RequestManager(transformCallback),
+        getPixelRatio() { return 1; }
     } as any);
 
     source.on('error', (e) => {
@@ -21,7 +22,7 @@ function createSource(options, transformCallback?) {
 }
 
 describe('RasterTileSource', () => {
-    let server: SinonFakeServer;
+    let server: FakeServer;
     beforeEach(() => {
         global.fetch = null;
         server = fakeServer.create();

package/src/source/raster_tile_source.ts

@@ -104,7 +104,7 @@ class RasterTileSource extends Evented implements Source {
     }
 
     loadTile(tile: Tile, callback: Callback<void>) {
-        const url = tile.tileID.canonical.url(this.tiles, this.scheme);
+        const url = tile.tileID.canonical.url(this.tiles, this.map.getPixelRatio(), this.scheme);
         tile.request = getImage(this.map._requestManager.transformRequest(url, ResourceType.Tile), (err, img) => {
             delete tile.request;
 

package/src/source/rtl_text_plugin.ts

@@ -13,8 +13,8 @@ const status = {
 };
 
 export type PluginState = {
-  pluginStatus: typeof status[keyof typeof status];
-  pluginURL: string;
+    pluginStatus: typeof status[keyof typeof status];
+    pluginURL: string;
 };
 
 type ErrorCallback = (error?: Error | null) => void;
@@ -93,14 +93,14 @@ export const downloadRTLTextPlugin = function() {
 };
 
 export const plugin: {
-  applyArabicShaping: Function;
-  processBidirectionalText: ((b: string, a: Array<number>) => Array<string>);
-  processStyledBidirectionalText: ((c: string, b: Array<number>, a: Array<number>) => Array<[string, Array<number>]>);
-  isLoaded: () => boolean;
-  isLoading: () => boolean;
-  setState: (state: PluginState) => void;
-  isParsed: () => boolean;
-  getPluginURL: () => string;
+    applyArabicShaping: Function;
+    processBidirectionalText: ((b: string, a: Array<number>) => Array<string>);
+    processStyledBidirectionalText: ((c: string, b: Array<number>, a: Array<number>) => Array<[string, Array<number>]>);
+    isLoaded: () => boolean;
+    isLoading: () => boolean;
+    setState: (state: PluginState) => void;
+    isParsed: () => boolean;
+    getPluginURL: () => string;
 } = {
     applyArabicShaping: null,
     processBidirectionalText: null,

package/src/source/source.ts

@@ -33,47 +33,47 @@ import {CanonicalTileID} from './tile_id';
  * if they are floor-ed to the nearest integer.
  */
 export interface Source {
-  readonly type: string;
-  id: string;
-  minzoom: number;
-  maxzoom: number;
-  tileSize: number;
-  attribution?: string;
-  roundZoom?: boolean;
-  isTileClipped?: boolean;
-  maplibreLogo?: boolean;
-  tileID?: CanonicalTileID;
-  reparseOverscaled?: boolean;
-  vectorLayerIds?: Array<string>;
-  hasTransition(): boolean;
-  loaded(): boolean;
-  fire(event: Event): unknown;
-  readonly onAdd?: (map: Map) => void;
-  readonly onRemove?: (map: Map) => void;
-  loadTile(tile: Tile, callback: Callback<void>): void;
-  readonly hasTile?: (tileID: OverscaledTileID) => boolean;
-  readonly abortTile?: (tile: Tile, callback: Callback<void>) => void;
-  readonly unloadTile?: (tile: Tile, callback: Callback<void>) => void;
-  /**
+    readonly type: string;
+    id: string;
+    minzoom: number;
+    maxzoom: number;
+    tileSize: number;
+    attribution?: string;
+    roundZoom?: boolean;
+    isTileClipped?: boolean;
+    maplibreLogo?: boolean;
+    tileID?: CanonicalTileID;
+    reparseOverscaled?: boolean;
+    vectorLayerIds?: Array<string>;
+    hasTransition(): boolean;
+    loaded(): boolean;
+    fire(event: Event): unknown;
+    readonly onAdd?: (map: Map) => void;
+    readonly onRemove?: (map: Map) => void;
+    loadTile(tile: Tile, callback: Callback<void>): void;
+    readonly hasTile?: (tileID: OverscaledTileID) => boolean;
+    readonly abortTile?: (tile: Tile, callback: Callback<void>) => void;
+    readonly unloadTile?: (tile: Tile, callback: Callback<void>) => void;
+    /**
      * @returns A plain (stringifiable) JS object representing the current state of the source.
      * Creating a source using the returned object as the `options` should result in a Source that is
      * equivalent to this one.
      * @private
      */
-  serialize(): any;
-  readonly prepare?: () => void;
+    serialize(): any;
+    readonly prepare?: () => void;
 }
 
 type SourceStatics = {
-  /*
+    /*
      * An optional URL to a script which, when run by a Worker, registers a {@link WorkerSource}
      * implementation for this Source type by calling `self.registerWorkerSource(workerSource: WorkerSource)`.
      */
-  workerSourceURL?: URL;
+    workerSourceURL?: URL;
 };
 
 export type SourceClass = {
-  new (...args: any): Source;
+    new (...args: any): Source;
 } & SourceStatics;
 
 import vector from '../source/vector_tile_source';
@@ -122,11 +122,11 @@ export const getSourceType = function (name: string) {
 };
 
 export const setSourceType = function (name: string, type: {
-  new (...args: any): Source;
+    new (...args: any): Source;
 }) {
     sourceTypes[name] = type;
 };
 
 export interface Actor {
-  send(type: string, data: any, callback: Callback<any>): void;
+    send(type: string, data: any, callback: Callback<any>): void;
 }

package/src/source/source_cache.test.ts

@@ -15,7 +15,7 @@ class SourceMock extends Evented {
     id: string;
     minzoom: number;
     maxzoom: number;
-    hasTile: (tileID: OverscaledTileID) => boolean
+    hasTile: (tileID: OverscaledTileID) => boolean;
     sourceOptions: any;
 
     constructor(id: string, sourceOptions: any, _dispatcher, eventedParent: Evented) {
@@ -336,6 +336,38 @@ describe('SourceCache#removeTile', () => {
         sourceCache._addTile(tileID);
     });
 
+    test('fires dataabort event', done => {
+        const sourceCache = createSourceCache({
+            loadTile() {
+                // Do not call back in order to make sure the tile is removed before it is loaded.
+            }
+        });
+        const tileID = new OverscaledTileID(0, 0, 0, 0, 0);
+        const tile = sourceCache._addTile(tileID);
+        sourceCache.once('dataabort', event => {
+            expect(event.dataType).toBe('source');
+            expect(event.tile).toBe(tile);
+            expect(event.coord).toBe(tileID);
+            done();
+        });
+        sourceCache._removeTile(tileID.key);
+    });
+
+    test('does not fire dataabort event when the tile has already been loaded', () => {
+        const sourceCache = createSourceCache({
+            loadTile(tile, callback) {
+                tile.state = 'loaded';
+                callback();
+            }
+        });
+        const tileID = new OverscaledTileID(0, 0, 0, 0, 0);
+        sourceCache._addTile(tileID);
+        const onAbort = jest.fn();
+        sourceCache.once('dataabort', onAbort);
+        sourceCache._removeTile(tileID.key);
+        expect(onAbort).toHaveBeenCalledTimes(0);
+    });
+
 });
 
 describe('SourceCache / Source lifecycle', () => {

package/src/source/source_cache.ts

@@ -46,10 +46,10 @@ class SourceCache extends Evented {
     _prevLng: number;
     _cache: TileCache;
     _timers: {
-      [_ in any]: ReturnType<typeof setTimeout>;
+        [_ in any]: ReturnType<typeof setTimeout>;
     };
     _cacheTimers: {
-      [_ in any]: ReturnType<typeof setTimeout>;
+        [_ in any]: ReturnType<typeof setTimeout>;
     };
     _maxTileCacheSize: number;
     _paused: boolean;
@@ -160,7 +160,9 @@ class SourceCache extends Evented {
 
     _abortTile(tile: Tile) {
         if (this._source.abortTile)
-            return this._source.abortTile(tile, () => {});
+            this._source.abortTile(tile, () => {});
+
+        this._source.fire(new Event('dataabort', {tile, coord: tile.tileID, dataType: 'source'}));
     }
 
     serialize() {
@@ -331,12 +333,12 @@ class SourceCache extends Evented {
      */
     _retainLoadedChildren(
         idealTiles: {
-          [_ in any]: OverscaledTileID;
+            [_ in any]: OverscaledTileID;
         },
         zoom: number,
         maxCoveringZoom: number,
         retain: {
-          [_ in any]: OverscaledTileID;
+            [_ in any]: OverscaledTileID;
         }
     ) {
         for (const id in this._tiles) {

package/src/source/source_state.ts

@@ -102,7 +102,7 @@ class SourceFeatureState {
     }
 
     coalesceChanges(tiles: {
-      [_ in any]: Tile;
+        [_ in any]: Tile;
     }, painter: any) {
         //track changes with full state objects, but only for features that got modified
         const featuresChanged: LayerFeatureStates = {};

package/src/source/tile.test.ts

@@ -1,4 +1,4 @@
-import {createSymbolBucket} from '../../test/util/create_symbol_layer_jest';
+import {createSymbolBucket} from '../../test/unit/lib/create_symbol_layer';
 import Tile from '../source/tile';
 import GeoJSONWrapper, {Feature} from '../source/geojson_wrapper';
 import {OverscaledTileID} from '../source/tile_id';
@@ -6,7 +6,7 @@ import fs from 'fs';
 import path from 'path';
 import vtpbf from 'vt-pbf';
 import FeatureIndex from '../data/feature_index';
-import {CollisionBoxArray} from '../data/array_types';
+import {CollisionBoxArray} from '../data/array_types.g';
 import {extend} from '../util/util';
 import {serialize, deserialize} from '../util/web_worker_transfer';
 
@@ -273,7 +273,7 @@ describe('rtl text detection', () => {
 });
 
 function createRawTileData() {
-    return fs.readFileSync(path.join(__dirname, '../../test/fixtures/mbsv5-6-18-23.vector.pbf'));
+    return fs.readFileSync(path.join(__dirname, '../../test/unit/assets/mbsv5-6-18-23.vector.pbf'));
 }
 
 function createVectorData(options?) {

package/src/source/tile.ts

@@ -5,7 +5,7 @@ import type FeatureIndex from '../data/feature_index';
 import GeoJSONFeature from '../util/vectortile_to_geojson';
 import featureFilter from '../style-spec/feature_filter';
 import SymbolBucket from '../data/bucket/symbol_bucket';
-import {CollisionBoxArray} from '../data/array_types';
+import {CollisionBoxArray} from '../data/array_types.g';
 import Texture from '../render/texture';
 import browser from '../util/browser';
 import toEvaluationFeature from '../data/evaluation_feature';
@@ -268,20 +268,20 @@ class Tile {
     // Queries non-symbol features rendered for this tile.
     // Symbol features are queried globally
     queryRenderedFeatures(
-      layers: {[_: string]: StyleLayer},
-      serializedLayers: {[_: string]: any},
-      sourceFeatureState: SourceFeatureState,
-      queryGeometry: Array<Point>,
-      cameraQueryGeometry: Array<Point>,
-      scale: number,
-      params: {
-        filter: FilterSpecification;
-        layers: Array<string>;
-        availableImages: Array<string>;
-      },
-      transform: Transform,
-      maxPitchScaleFactor: number,
-      pixelPosMatrix: mat4
+        layers: {[_: string]: StyleLayer},
+        serializedLayers: {[_: string]: any},
+        sourceFeatureState: SourceFeatureState,
+        queryGeometry: Array<Point>,
+        cameraQueryGeometry: Array<Point>,
+        scale: number,
+        params: {
+            filter: FilterSpecification;
+            layers: Array<string>;
+            availableImages: Array<string>;
+        },
+        transform: Transform,
+        maxPitchScaleFactor: number,
+        pixelPosMatrix: mat4
     ): {[_: string]: Array<{featureIndex: number; feature: GeoJSONFeature}>} {
         if (!this.latestFeatureIndex || !this.latestFeatureIndex.rawTileData)
             return {};

package/src/source/tile_cache.test.ts

@@ -30,19 +30,20 @@ describe('TileCache', () => {
         keysExpected(cache, []);
     });
 
-    test('get without removing', () => {
+    test('get without removing', done => {
         const cache = new TileCache(10, () => {
-            fail();
+            done('test "get without removing" failed');
         });
         expect(cache.add(idA, tileA)).toBe(cache);
         expect(cache.get(idA)).toBe(tileA);
         keysExpected(cache, [idA]);
         expect(cache.get(idA)).toBe(tileA);
+        done();
     });
 
-    test('duplicate add', () => {
+    test('duplicate add', done => {
         const cache = new TileCache(10, () => {
-            fail();
+            done('test "duplicate add" failed');
         });
 
         cache.add(idA, tileA);
@@ -53,6 +54,7 @@ describe('TileCache', () => {
         expect(cache.getAndRemove(idA)).toBe(tileA);
         expect(cache.has(idA)).toBeTruthy();
         expect(cache.getAndRemove(idA)).toBe(tileA2);
+        done();
     });
 
     test('expiry', () => {

package/src/source/tile_cache.ts

@@ -11,10 +11,10 @@ import type Tile from './tile';
 class TileCache {
     max: number;
     data: {
-      [key: string]: Array<{
-        value: Tile;
-        timeout: ReturnType<typeof setTimeout>;
-      }>;
+        [key: string]: Array<{
+            value: Tile;
+            timeout: ReturnType<typeof setTimeout>;
+        }>;
     };
     order: Array<string>;
     onRemove: (element: Tile) => void;
@@ -157,8 +157,8 @@ class TileCache {
      * @private
      */
     remove(tileID: OverscaledTileID, value?: {
-      value: Tile;
-      timeout: ReturnType<typeof setTimeout>;
+        value: Tile;
+        timeout: ReturnType<typeof setTimeout>;
     }) {
         if (!this.has(tileID)) { return this; }
         const key = tileID.wrapped().key;

package/src/source/tile_id.test.ts

@@ -33,35 +33,32 @@ describe('CanonicalTileID', () => {
     });
 
     test('.url replaces {z}/{x}/{y}', () => {
-        expect(new CanonicalTileID(2, 1, 0).url(['{z}/{x}/{y}.json'])).toBe('2/1/0.json');
+        expect(new CanonicalTileID(2, 1, 0).url(['{z}/{x}/{y}.json'], 1)).toBe('2/1/0.json');
     });
 
     test('.url replaces {quadkey}', () => {
-        expect(new CanonicalTileID(1, 0, 0).url(['quadkey={quadkey}'])).toBe('quadkey=0');
-        expect(new CanonicalTileID(2, 0, 0).url(['quadkey={quadkey}'])).toBe('quadkey=00');
-        expect(new CanonicalTileID(2, 1, 1).url(['quadkey={quadkey}'])).toBe('quadkey=03');
-        expect(new CanonicalTileID(17, 22914, 52870).url(['quadkey={quadkey}'])).toBe('quadkey=02301322130000230');
+        expect(new CanonicalTileID(1, 0, 0).url(['quadkey={quadkey}'], 1)).toBe('quadkey=0');
+        expect(new CanonicalTileID(2, 0, 0).url(['quadkey={quadkey}'], 1)).toBe('quadkey=00');
+        expect(new CanonicalTileID(2, 1, 1).url(['quadkey={quadkey}'], 1)).toBe('quadkey=03');
+        expect(new CanonicalTileID(17, 22914, 52870).url(['quadkey={quadkey}'], 1)).toBe('quadkey=02301322130000230');
 
         // Test case confirmed by quadkeytools package
-        // https://bitbucket.org/steele/quadkeytools/rollup/build/tsc/src/master/test/quadkey.js?fileviewer=file-view-default#quadkey.js-57
-        expect(new CanonicalTileID(6, 29, 3).url(['quadkey={quadkey}'])).toBe('quadkey=011123');
+        expect(new CanonicalTileID(6, 29, 3).url(['quadkey={quadkey}'], 1)).toBe('quadkey=011123');
 
     });
 
     test('.url replaces {bbox-epsg-3857}', () => {
-        expect(new CanonicalTileID(1, 0, 0).url(['bbox={bbox-epsg-3857}'])).toBe('bbox=-20037508.342789244,0,0,20037508.342789244');
+        expect(new CanonicalTileID(1, 0, 0).url(['bbox={bbox-epsg-3857}'], 1)).toBe('bbox=-20037508.342789244,0,0,20037508.342789244');
     });
 
     test('.url replaces {ratio}', () => {
-        devicePixelRatio = 2;
-        expect(new CanonicalTileID(1, 0, 0).url(['r={ratio}'])).toBe('r=@2x');
-        devicePixelRatio = 1;
-        expect(new CanonicalTileID(1, 0, 0).url(['r={ratio}'])).toBe('r=');
+        expect(new CanonicalTileID(1, 0, 0).url(['r={ratio}'], 2)).toBe('r=@2x');
+        expect(new CanonicalTileID(1, 0, 0).url(['r={ratio}'], 1)).toBe('r=');
     });
 
     //Tests that multiple values of the same placeholder are replaced.
     test('.url replaces {z}/{x}/{y}/{z}/{x}/{y}', () => {
-        expect(new CanonicalTileID(2, 1, 0).url(['{z}/{x}/{y}/{z}/{x}/{y}.json'])).toBe('2/1/0/2/1/0.json');
+        expect(new CanonicalTileID(2, 1, 0).url(['{z}/{x}/{y}/{z}/{x}/{y}.json'], 1)).toBe('2/1/0/2/1/0.json');
     });
 
 });

package/src/source/tile_id.ts

@@ -28,7 +28,7 @@ export class CanonicalTileID {
     }
 
     // given a list of urls, choose a url template and return a tile URL
-    url(urls: Array<string>, scheme?: string | null) {
+    url(urls: Array<string>, pixelRatio: number, scheme?: string | null) {
         const bbox = getTileBBox(this.x, this.y, this.z);
         const quadkey = getQuadkey(this.z, this.x, this.y);
 
@@ -37,7 +37,7 @@ export class CanonicalTileID {
             .replace(/{z}/g, String(this.z))
             .replace(/{x}/g, String(this.x))
             .replace(/{y}/g, String(scheme === 'tms' ? (Math.pow(2, this.z) - this.y - 1) : this.y))
-            .replace(/{ratio}/g, devicePixelRatio > 1 ? '@2x' : '')
+            .replace(/{ratio}/g, pixelRatio > 1 ? '@2x' : '')
             .replace(/{quadkey}/g, quadkey)
             .replace(/{bbox-epsg-3857}/g, bbox);
     }

package/src/source/vector_tile_source.test.ts

@@ -1,21 +1,22 @@
-import {fakeServer, SinonFakeServer} from 'sinon';
+import {fakeServer, FakeServer} from 'nise';
 import {Source} from './source';
 import VectorTileSource from './vector_tile_source';
 import Tile from './tile';
 import {OverscaledTileID} from './tile_id';
 import {Evented} from '../util/evented';
 import {RequestManager} from '../util/request_manager';
-import fixturesSource from '../../test/fixtures/source.json';
+import fixturesSource from '../../test/unit/assets/source.json';
 import {getMockDispatcher, getWrapDispatcher} from '../util/test/util';
 import Map from '../ui/map';
 
-function createSource(options, transformCallback?) {
+function createSource(options, transformCallback?, clearTiles = () => {}) {
     const source = new VectorTileSource('id', options, getMockDispatcher(), options.eventedParent);
     source.onAdd({
         transform: {showCollisionBoxes: false},
         _getMapId: () => 1,
         _requestManager: new RequestManager(transformCallback),
-        style: {sourceCaches: {id: {clearTiles: () => {}}}}
+        style: {sourceCaches: {id: {clearTiles}}},
+        getPixelRatio() { return 1; }
     } as any as Map);
 
     source.on('error', (e) => {
@@ -26,7 +27,7 @@ function createSource(options, transformCallback?) {
 }
 
 describe('VectorTileSource', () => {
-    let server: SinonFakeServer;
+    let server: FakeServer;
     beforeEach(() => {
         global.fetch = null;
         server = fakeServer.create();
@@ -342,4 +343,15 @@ describe('VectorTileSource', () => {
             tiles: ['http://example2.com/{z}/{x}/{y}.png']
         });
     });
+
+    test('setTiles only clears the cache once the TileJSON has reloaded', done => {
+        const clearTiles = jest.fn();
+        const source = createSource({tiles: ['http://example.com/{z}/{x}/{y}.pbf']}, undefined, clearTiles);
+        source.setTiles(['http://example2.com/{z}/{x}/{y}.pbf']);
+        expect(clearTiles.mock.calls).toHaveLength(0);
+        source.once('data', () => {
+            expect(clearTiles.mock.calls).toHaveLength(1);
+            done();
+        });
+    });
 });

package/src/source/vector_tile_source.ts

@@ -64,7 +64,7 @@ class VectorTileSource extends Evented implements Source {
     _loaded: boolean;
 
     constructor(id: string, options: VectorSourceSpecification & {
-      collectResourceTiming: boolean;
+        collectResourceTiming: boolean;
     }, dispatcher: Dispatcher, eventedParent: Evented) {
         super();
         this.id = id;
@@ -97,6 +97,7 @@ class VectorTileSource extends Evented implements Source {
         this._tileJSONRequest = loadTileJSON(this._options, this.map._requestManager, (err, tileJSON) => {
             this._tileJSONRequest = null;
             this._loaded = true;
+            this.map.style.sourceCaches[this.id].clearTiles();
             if (err) {
                 this.fire(new ErrorEvent(err));
             } else if (tileJSON) {
@@ -132,8 +133,6 @@ class VectorTileSource extends Evented implements Source {
 
         callback();
 
-        const sourceCache = this.map.style.sourceCaches[this.id];
-        sourceCache.clearTiles();
         this.load();
     }
 
@@ -178,7 +177,7 @@ class VectorTileSource extends Evented implements Source {
     }
 
     loadTile(tile: Tile, callback: Callback<void>) {
-        const url = tile.tileID.canonical.url(this.tiles, this.scheme);
+        const url = tile.tileID.canonical.url(this.tiles, this.map.getPixelRatio(), this.scheme);
         const params = {
             request: this.map._requestManager.transformRequest(url, ResourceType.Tile),
             uid: tile.uid,
@@ -187,7 +186,7 @@ class VectorTileSource extends Evented implements Source {
             tileSize: this.tileSize * tile.tileID.overscaleFactor(),
             type: this.type,
             source: this.id,
-            pixelRatio: devicePixelRatio,
+            pixelRatio: this.map.getPixelRatio(),
             showCollisionBoxes: this.map.showCollisionBoxes,
             promoteId: this.promoteId
         };