maplibre-gl 2.0.3 → 2.1.1

package/src/render/program/line_program.ts

@@ -99,7 +99,7 @@ const lineUniformValues = (painter: Painter, tile: Tile, layer: LineStyleLayer):
     return {
         'u_matrix': calculateMatrix(painter, tile, layer),
         'u_ratio': 1 / pixelsToTileUnits(tile, 1, transform.zoom),
-        'u_device_pixel_ratio': devicePixelRatio,
+        'u_device_pixel_ratio': painter.pixelRatio,
         'u_units_to_pixels': [
             1 / transform.pixelsToGLUnits[0],
             1 / transform.pixelsToGLUnits[1]
@@ -127,7 +127,7 @@ const linePatternUniformValues = (
         'u_texsize': tile.imageAtlasTexture.size,
         // camera zoom ratio
         'u_ratio': 1 / pixelsToTileUnits(tile, 1, transform.zoom),
-        'u_device_pixel_ratio': devicePixelRatio,
+        'u_device_pixel_ratio': painter.pixelRatio,
         'u_image': 0,
         'u_scale': [tileZoomRatio, crossfade.fromScale, crossfade.toScale],
         'u_fade': crossfade.t,
@@ -160,7 +160,7 @@ const lineSDFUniformValues = (
     return extend(lineUniformValues(painter, tile, layer), {
         'u_patternscale_a': [tileRatio / widthA, -posA.height / 2],
         'u_patternscale_b': [tileRatio / widthB, -posB.height / 2],
-        'u_sdfgamma': lineAtlas.width / (Math.min(widthA, widthB) * 256 * devicePixelRatio) / 2,
+        'u_sdfgamma': lineAtlas.width / (Math.min(widthA, widthB) * 256 * painter.pixelRatio) / 2,
         'u_image': 0,
         'u_tex_y_a': posA.y,
         'u_tex_y_b': posB.y,

package/src/render/program/symbol_program.ts

@@ -195,7 +195,7 @@ const symbolSDFUniformValues = (
         rotateInShader, pitchWithMap, painter, matrix, labelPlaneMatrix,
         glCoordMatrix, isText, texSize), {
         'u_gamma_scale': (pitchWithMap ? Math.cos(transform._pitch) * transform.cameraToCenterDistance : 1),
-        'u_device_pixel_ratio': devicePixelRatio,
+        'u_device_pixel_ratio': painter.pixelRatio,
         'u_is_halo': +isHalo
     });
 };

package/src/source/geojson_source.test.ts

@@ -318,7 +318,8 @@ describe('GeoJSONSource#update', () => {
 
         const source = new GeoJSONSource('id', {data: {}} as GeoJSONSourceOptions, mockDispatcher, undefined);
         source.map = {
-            transform: {} as Transform
+            transform: {} as Transform,
+            getPixelRatio() { return 1; }
         } as any;
 
         source.on('data', (e) => {

package/src/source/geojson_source.ts

@@ -299,7 +299,7 @@ class GeoJSONSource extends Evented implements Source {
             maxZoom: this.maxzoom,
             tileSize: this.tileSize,
             source: this.id,
-            pixelRatio: devicePixelRatio,
+            pixelRatio: this.map.getPixelRatio(),
             showCollisionBoxes: this.map.showCollisionBoxes,
             promoteId: this.promoteId
         };

package/src/source/image_source.test.ts

@@ -0,0 +1,153 @@
+import ImageSource from './image_source';
+import {Evented} from '../util/evented';
+import Transform from '../geo/transform';
+import {extend} from '../util/util';
+import {useFakeXMLHttpRequest} from 'sinon';
+import {RequestManager} from '../util/request_manager';
+import Dispatcher from '../util/dispatcher';
+import {stubAjaxGetImage} from '../util/test/util';
+
+function createSource(options) {
+    options = extend({
+        coordinates: [[0, 0], [1, 0], [1, 1], [0, 1]]
+    }, options);
+
+    const source = new ImageSource('id', options, {send() {}} as any as Dispatcher, options.eventedParent);
+    return source;
+}
+
+class StubMap extends Evented {
+    transform: Transform;
+    _requestManager: RequestManager;
+
+    constructor() {
+        super();
+        this.transform = new Transform();
+        this._requestManager = {
+            transformRequest: (url) => {
+                return {url};
+            }
+        } as any as RequestManager;
+    }
+}
+
+describe('ImageSource', () => {
+    const requests = [];
+    useFakeXMLHttpRequest().onCreate = (req) => { requests.push(req); };
+    stubAjaxGetImage(undefined);
+    beforeEach(() => {
+        global.fetch = null;
+    });
+
+    const respond = () => {
+        const req = requests.shift();
+        req.setStatus(200);
+        req.response = new ArrayBuffer(1);
+        req.onload();
+    };
+
+    test('constructor', () => {
+        const source = createSource({url : '/image.png'});
+
+        expect(source.minzoom).toBe(0);
+        expect(source.maxzoom).toBe(22);
+        expect(source.tileSize).toBe(512);
+    });
+
+    test('fires dataloading event', () => {
+        const source = createSource({url : '/image.png'});
+        source.on('dataloading', (e) => {
+            expect(e.dataType).toBe('source');
+        });
+        source.onAdd(new StubMap() as any);
+        respond();
+        expect(source.image).toBeTruthy();
+    });
+
+    test('transforms url request', () => {
+        const source = createSource({url : '/image.png'});
+        const map = new StubMap() as any;
+        const spy = jest.spyOn(map._requestManager, 'transformRequest');
+        source.onAdd(map);
+        respond();
+        expect(spy).toHaveBeenCalledTimes(1);
+        expect(spy.mock.calls[0][0]).toBe('/image.png');
+        expect(spy.mock.calls[0][1]).toBe('Image');
+    });
+
+    test('updates url from updateImage', () => {
+        const source = createSource({url : '/image.png'});
+        const map = new StubMap() as any;
+        const spy = jest.spyOn(map._requestManager, 'transformRequest');
+        source.onAdd(map);
+        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();
+        expect(spy).toHaveBeenCalledTimes(2);
+        expect(spy.mock.calls[1][0]).toBe('/image2.png');
+        expect(spy.mock.calls[1][1]).toBe('Image');
+    });
+
+    test('sets coordinates', () => {
+        const source = createSource({url : '/image.png'});
+        const map = new StubMap() as any;
+        source.onAdd(map);
+        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]]);
+        const afterSerialized = source.serialize();
+        expect(afterSerialized.coordinates).toEqual([[0, 0], [-1, 0], [-1, -1], [0, -1]]);
+    });
+
+    test('sets coordinates via updateImage', () => {
+        const source = createSource({url : '/image.png'});
+        const map = new StubMap() as any;
+        source.onAdd(map);
+        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();
+        const afterSerialized = source.serialize();
+        expect(afterSerialized.coordinates).toEqual([[0, 0], [-1, 0], [-1, -1], [0, -1]]);
+    });
+
+    test('fires data event when content is loaded', done => {
+        const source = createSource({url : '/image.png'});
+        source.on('data', (e) => {
+            if (e.dataType === 'source' && e.sourceDataType === 'content') {
+                expect(typeof source.tileID == 'object').toBeTruthy();
+                done();
+            }
+        });
+        source.onAdd(new StubMap() as any);
+        respond();
+    });
+
+    test('fires data event when metadata is loaded', done => {
+        const source = createSource({url : '/image.png'});
+        source.on('data', (e) => {
+            if (e.dataType === 'source' && e.sourceDataType === 'metadata') {
+                done();
+            }
+        });
+        source.onAdd(new StubMap() as any);
+        respond();
+    });
+
+    test('serialize url and coordinates', () => {
+        const source = createSource({url: '/image.png'});
+
+        const serialized = source.serialize();
+        expect(serialized.type).toBe('image');
+        expect(serialized.url).toBe('/image.png');
+        expect(serialized.coordinates).toEqual([[0, 0], [1, 0], [1, 1], [0, 1]]);
+    });
+});

package/src/source/raster_dem_tile_source.test.ts

@@ -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) => {

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

@@ -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) => {

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/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) {

package/src/source/tile.test.ts

@@ -1,4 +1,4 @@
-import {createSymbolBucket} from '../../test/util/create_symbol_layer_jest';
+import {createSymbolBucket} from '../../test/util/create_symbol_layer';
 import Tile from '../source/tile';
 import GeoJSONWrapper, {Feature} from '../source/geojson_wrapper';
 import {OverscaledTileID} from '../source/tile_id';

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_id.test.ts

@@ -33,35 +33,33 @@ 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

@@ -9,13 +9,14 @@ import fixturesSource from '../../test/fixtures/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) => {
@@ -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

@@ -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
         };

package/src/style/load_glyph_range.test.ts

@@ -26,8 +26,6 @@ test('loadGlyphRange', done => {
             const id = Number(key);
             const glyph = result[id];
 
-            if (!glyph) return done.fail(); // appease flow
-
             expect(glyph.id).toBe(Number(id));
             expect(glyph.metrics).toBeTruthy();
             expect(typeof glyph.metrics.width).toBe('number');

package/src/style/load_sprite.ts

@@ -11,10 +11,11 @@ import type {Cancelable} from '../types/cancelable';
 export default function(
   baseURL: string,
   requestManager: RequestManager,
+  pixelRatio: number,
   callback: Callback<{[_: string]: StyleImage}>
 ): Cancelable {
     let json: any, image, error;
-    const format = devicePixelRatio > 1 ? '@2x' : '';
+    const format = pixelRatio > 1 ? '@2x' : '';
 
     let jsonRequest = getJSON(requestManager.transformRequest(requestManager.normalizeSpriteURL(baseURL, format, '.json'), ResourceType.SpriteJSON), (err?: Error | null, data?: any | null) => {
         jsonRequest = null;

package/src/style/properties.ts

@@ -730,7 +730,7 @@ export class Properties<Props> {
     defaultPropertyValues: {[K in keyof Props]: PropertyValue<unknown, any>};
     defaultTransitionablePropertyValues: {[K in keyof Props]: TransitionablePropertyValue<unknown, unknown>};
     defaultTransitioningPropertyValues: {[K in keyof Props]: TransitioningPropertyValue<unknown, unknown>};
-    defaultPossiblyEvaluatedValues: {[K in keyof Props]: PossiblyEvaluatedPropertyValue<unknown>};;
+    defaultPossiblyEvaluatedValues: {[K in keyof Props]: PossiblyEvaluatedPropertyValue<unknown>};
     overridableProperties: Array<string>;
 
     constructor(properties: Props) {

package/src/style/style.test.ts

@@ -48,6 +48,7 @@ function createGeoJSONSource() {
 }
 
 class StubMap extends Evented {
+    style: Style;
     transform: Transform;
     private _requestManager: RequestManager;
 
@@ -60,10 +61,20 @@ class StubMap extends Evented {
     _getMapId() {
         return 1;
     }
+
+    getPixelRatio() {
+        return 1;
+    }
 }
 
 const getStubMap = () => new StubMap() as any;
 
+function createStyle(map = getStubMap()) {
+    const style = new Style(map);
+    map.style = style;
+    return style;
+}
+
 let sinonFakeXMLServer;
 let sinonFakeServer;
 let _self;
@@ -254,7 +265,7 @@ describe('Style#loadJSON', () => {
     });
 
     test('creates sources', done => {
-        const style = new Style(getStubMap());
+        const style = createStyle();
 
         style.on('style.load', () => {
             expect(style.sourceCaches['mapLibre'] instanceof SourceCache).toBeTruthy();
@@ -272,7 +283,7 @@ describe('Style#loadJSON', () => {
     });
 
     test('creates layers', done => {
-        const style = new Style(getStubMap());
+        const style = createStyle();
 
         style.on('style.load', () => {
             expect(style.getLayer('fill') instanceof StyleLayer).toBeTruthy();
@@ -298,7 +309,7 @@ describe('Style#loadJSON', () => {
     test('transforms sprite json and image URLs before request', done => {
         const map = getStubMap();
         const transformSpy = jest.spyOn(map._requestManager, 'transformRequest');
-        const style = new Style(map);
+        const style = createStyle(map);
 
         style.on('style.load', () => {
             expect(transformSpy).toHaveBeenCalledTimes(2);
@@ -315,7 +326,7 @@ describe('Style#loadJSON', () => {
     });
 
     test('emits an error on non-existant vector source layer', done => {
-        const style = new Style(getStubMap());
+        const style = createStyle();
         style.loadJSON(createStyleJSON({
             sources: {
                 '-source-id-': {type: 'vector', tiles: []}
@@ -403,7 +414,7 @@ describe('Style#_remove', () => {
 
 describe('Style#update', () => {
     test('on error', done => {
-        const style = new Style(getStubMap());
+        const style = createStyle();
         style.loadJSON({
             'version': 8,
             'sources': {
@@ -445,7 +456,7 @@ describe('Style#setState', () => {
     });
 
     test('do nothing if there are no changes', done => {
-        const style = new Style(getStubMap());
+        const style = createStyle();
         style.loadJSON(createStyleJSON());
         jest.spyOn(style, 'addLayer').mockImplementation(() => done('test failed'));
         jest.spyOn(style, 'removeLayer').mockImplementation(() => done('test failed'));
@@ -570,7 +581,7 @@ describe('Style#addSource', () => {
     });
 
     test('fires "data" event', done => {
-        const style = new Style(getStubMap());
+        const style = createStyle();
         style.loadJSON(createStyleJSON());
         const source = createSource();
         style.once('data', () => { done(); });
@@ -581,7 +592,7 @@ describe('Style#addSource', () => {
     });
 
     test('throws on duplicates', done => {
-        const style = new Style(getStubMap());
+        const style = createStyle();
         style.loadJSON(createStyleJSON());
         const source = createSource();
         style.on('style.load', () => {
@@ -603,7 +614,7 @@ describe('Style#addSource', () => {
                 done();
             }
         };
-        const style = new Style(getStubMap());
+        const style = createStyle();
         style.loadJSON(createStyleJSON({
             layers: [{
                 id: 'background',
@@ -791,7 +802,7 @@ describe('Style#addLayer', () => {
     });
 
     test('throws on non-existant vector source layer', done => {
-        const style = new Style(getStubMap());
+        const style = createStyle();
         style.loadJSON(createStyleJSON({
             sources: {
                 // At least one source must be added to trigger the load event
@@ -860,7 +871,7 @@ describe('Style#addLayer', () => {
     });
 
     test('reloads source', done => {
-        const style = new Style(getStubMap());
+        const style = createStyle();
         style.loadJSON(extend(createStyleJSON(), {
             'sources': {
                 'mapLibre': {
@@ -887,7 +898,7 @@ describe('Style#addLayer', () => {
     });
 
     test('#3895 reloads source (instead of clearing) if adding this layer with the same type, immediately after removing it', done => {
-        const style = new Style(getStubMap());
+        const style = createStyle();
         style.loadJSON(extend(createStyleJSON(), {
             'sources': {
                 'mapLibre': {
@@ -924,7 +935,7 @@ describe('Style#addLayer', () => {
     });
 
     test('clears source (instead of reloading) if adding this layer with a different type, immediately after removing it', done => {
-        const style = new Style(getStubMap());
+        const style = createStyle();
         style.loadJSON(extend(createStyleJSON(), {
             'sources': {
                 'mapLibre': {

package/src/style/style.ts

@@ -276,7 +276,7 @@ class Style extends Evented {
     }
 
     _loadSprite(url: string) {
-        this._spriteRequest = loadSprite(url, this.map._requestManager, (err, images) => {
+        this._spriteRequest = loadSprite(url, this.map._requestManager, this.map.getPixelRatio(), (err, images) => {
             this._spriteRequest = null;
             if (err) {
                 this.fire(new ErrorEvent(err));

package/src/style/style_layer/custom_style_layer.ts

@@ -213,13 +213,13 @@ class CustomStyleLayer extends StyleLayer {
         if (this.implementation.onAdd) {
             this.implementation.onAdd(map, map.painter.context.gl);
         }
-    }
+    };
 
     onRemove = (map: Map) => {
         if (this.implementation.onRemove) {
             this.implementation.onRemove(map, map.painter.context.gl);
         }
-    }
+    };
 }
 
 export default CustomStyleLayer;

package/src/style/style_layer/fill_extrusion_style_layer.ts

@@ -15,7 +15,7 @@ import type {LayerSpecification} from '../../style-spec/types';
 import type {VectorTileFeature} from '@mapbox/vector-tile';
 
 export class Point3D extends Point {
-    z: number
+    z: number;
 }
 
 class FillExtrusionStyleLayer extends StyleLayer {