@scoova/mgl 1.0.0

package/src/source/raster_dem_tile_source.ts

@@ -0,0 +1,166 @@
+import {ImageRequest} from '../util/image_request';
+import {ResourceType} from '../util/request_manager';
+import {extend, isImageBitmap, readImageUsingVideoFrame} from '../util/util';
+import {Evented} from '../util/evented';
+import {browser} from '../util/browser';
+import {offscreenCanvasSupported} from '../util/offscreen_canvas_supported';
+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';
+import type {Tile} from './tile';
+import type {RasterDEMSourceSpecification} from '@maplibre/maplibre-gl-style-spec';
+import {isOffscreenCanvasDistorted} from '../util/offscreen_canvas_distorted';
+import {RGBAImage} from '../util/image';
+import {MessageType} from '../util/actor_messages';
+
+/**
+ * A source containing raster DEM tiles (See the [Style Specification](https://maplibre.org/maplibre-style-spec/) for detailed documentation of options.)
+ * This source can be used to show hillshading and 3D terrain
+ *
+ * @group Sources
+ *
+ * @example
+ * ```ts
+ * map.addSource('raster-dem-source', {
+ *      type: 'raster-dem',
+ *      url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
+ *      tileSize: 256
+ * });
+ * ```
+ * @see [3D Terrain](https://maplibre.org/maplibre-gl-js/docs/examples/3d-terrain/)
+ */
+export class RasterDEMTileSource extends RasterTileSource implements Source {
+    encoding: DEMEncoding;
+    redFactor?: number;
+    greenFactor?: number;
+    blueFactor?: number;
+    baseShift?: number;
+
+    constructor(id: string, options: RasterDEMSourceSpecification, dispatcher: Dispatcher, eventedParent: Evented) {
+        super(id, options, dispatcher, eventedParent);
+        this.type = 'raster-dem';
+        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;
+    }
+
+    override async loadTile(tile: Tile): Promise<void> {
+        const url = tile.tileID.canonical.url(this.tiles, this.map.getPixelRatio(), this.scheme);
+        const request = this.map._requestManager.transformRequest(url, ResourceType.Tile);
+        tile.neighboringTiles = this._getNeighboringTiles(tile.tileID);
+        tile.abortController = new AbortController();
+        try {
+            const response = await ImageRequest.getImage(request, tile.abortController, this.map._refreshExpiredTiles);
+            delete tile.abortController;
+            if (tile.aborted) {
+                tile.state = 'unloaded';
+                return;
+            }
+            if (response && response.data) {
+                const img = response.data;
+                if (this.map._refreshExpiredTiles && response.cacheControl && response.expires) {
+                    tile.setExpiryData({cacheControl: response.cacheControl, expires: response.expires});
+                }
+                const transfer = isImageBitmap(img) && offscreenCanvasSupported();
+                const rawImageData = transfer ? img : await this.readImageNow(img);
+                const params = {
+                    type: this.type,
+                    uid: tile.uid,
+                    source: this.id,
+                    rawImageData,
+                    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();
+                    /* eslint-disable require-atomic-updates */
+                    const data = await tile.actor.sendAsync({type: MessageType.loadDEMTile, data: params});
+                    tile.dem = data;
+                    tile.needsHillshadePrepare = true;
+                    tile.needsTerrainPrepare = true;
+                    tile.state = 'loaded';
+                    /* eslint-enable require-atomic-updates */
+                }
+            }
+        } catch (err) {
+            delete tile.abortController;
+            if (tile.aborted) {
+                tile.state = 'unloaded';
+            } else if (err) {
+                tile.state = 'errored';
+                throw err;
+            }
+        }
+    }
+
+    async 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);
+    }
+
+    _getNeighboringTiles(tileID: OverscaledTileID) {
+        const canonical = tileID.canonical;
+        const dim = Math.pow(2, canonical.z);
+
+        const px = (canonical.x - 1 + dim) % dim;
+        const pxw = canonical.x === 0 ? tileID.wrap - 1 : tileID.wrap;
+        const nx = (canonical.x + 1 + dim) % dim;
+        const nxw = canonical.x + 1 === dim ? tileID.wrap + 1 : tileID.wrap;
+
+        const neighboringTiles = {};
+        // add adjacent tiles
+        neighboringTiles[new OverscaledTileID(tileID.overscaledZ, pxw, canonical.z, px, canonical.y).key] = {backfilled: false};
+        neighboringTiles[new OverscaledTileID(tileID.overscaledZ, nxw, canonical.z, nx, canonical.y).key] = {backfilled: false};
+
+        // Add upper neighboringTiles
+        if (canonical.y > 0) {
+            neighboringTiles[new OverscaledTileID(tileID.overscaledZ, pxw, canonical.z, px, canonical.y - 1).key] = {backfilled: false};
+            neighboringTiles[new OverscaledTileID(tileID.overscaledZ, tileID.wrap, canonical.z, canonical.x, canonical.y - 1).key] = {backfilled: false};
+            neighboringTiles[new OverscaledTileID(tileID.overscaledZ, nxw, canonical.z, nx, canonical.y - 1).key] = {backfilled: false};
+        }
+        // Add lower neighboringTiles
+        if (canonical.y + 1 < dim) {
+            neighboringTiles[new OverscaledTileID(tileID.overscaledZ, pxw, canonical.z, px, canonical.y + 1).key] = {backfilled: false};
+            neighboringTiles[new OverscaledTileID(tileID.overscaledZ, tileID.wrap, canonical.z, canonical.x, canonical.y + 1).key] = {backfilled: false};
+            neighboringTiles[new OverscaledTileID(tileID.overscaledZ, nxw, canonical.z, nx, canonical.y + 1).key] = {backfilled: false};
+        }
+
+        return neighboringTiles;
+    }
+
+    async unloadTile(tile: Tile) {
+        if (tile.demTexture) this.map.painter.saveTileTexture(tile.demTexture);
+        if (tile.fbo) {
+            tile.fbo.destroy();
+            delete tile.fbo;
+        }
+        if (tile.dem) delete tile.dem;
+        delete tile.neighboringTiles;
+
+        tile.state = 'unloaded';
+        if (tile.actor) {
+            await tile.actor.sendAsync({type: MessageType.removeDEMTile, data: {type: this.type, uid: tile.uid, source: this.id}});
+        }
+    }
+}

package/src/source/raster_dem_tile_worker_source.test.ts

@@ -0,0 +1,36 @@
+import {RasterDEMTileWorkerSource} from './raster_dem_tile_worker_source';
+import {DEMData} from '../data/dem_data';
+import {WorkerDEMTileParameters} from './worker_source';
+
+describe('loadTile', () => {
+    test('loads DEM tile', async () => {
+        const source = new RasterDEMTileWorkerSource();
+
+        const data = await source.loadTile({
+            source: 'source',
+            uid: '0',
+            rawImageData: {data: new Uint8ClampedArray(256), height: 8, width: 8},
+            dim: 256
+        } as any as WorkerDEMTileParameters);
+        expect(Object.keys(source.loaded)).toEqual(['0']);
+        expect(data instanceof DEMData).toBeTruthy();
+    });
+});
+
+describe('removeTile', () => {
+    test('removes loaded tile', () => {
+        const source = new RasterDEMTileWorkerSource();
+
+        source.loaded = {
+            '0': {} as DEMData
+        };
+
+        source.removeTile({
+            source: 'source',
+            uid: '0',
+            type: 'raster-dem',
+        });
+
+        expect(source.loaded).toEqual({});
+    });
+});

package/src/source/raster_dem_tile_worker_source.ts

@@ -0,0 +1,38 @@
+import {DEMData} from '../data/dem_data';
+import {RGBAImage} from '../util/image';
+import type {Actor} from '../util/actor';
+import type {
+    WorkerDEMTileParameters,
+    TileParameters
+} from './worker_source';
+import {getImageData, isImageBitmap} from '../util/util';
+
+export class RasterDEMTileWorkerSource {
+    actor: Actor;
+    loaded: {[_: string]: DEMData};
+
+    constructor() {
+        this.loaded = {};
+    }
+
+    async loadTile(params: WorkerDEMTileParameters): Promise<DEMData | null> {
+        const {uid, encoding, rawImageData, redFactor, greenFactor, blueFactor, baseShift} = params;
+        const width = rawImageData.width + 2;
+        const height = rawImageData.height + 2;
+        const imagePixels: RGBAImage | ImageData = 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;
+        return dem;
+    }
+
+    removeTile(params: TileParameters) {
+        const loaded = this.loaded,
+            uid = params.uid;
+        if (loaded && loaded[uid]) {
+            delete loaded[uid];
+        }
+    }
+}

package/src/source/raster_tile_source.test.ts

@@ -0,0 +1,206 @@
+import {RasterTileSource} from './raster_tile_source';
+import {OverscaledTileID} from './tile_id';
+import {RequestManager} from '../util/request_manager';
+import {Dispatcher} from '../util/dispatcher';
+import {fakeServer, type FakeServer} from 'nise';
+import {Tile} from './tile';
+import {stubAjaxGetImage} from '../util/test/util';
+
+function createSource(options, transformCallback?) {
+    const source = new RasterTileSource('id', options, {send() {}} as any as Dispatcher, options.eventedParent);
+    source.onAdd({
+        transform: {angle: 0, pitch: 0, showCollisionBoxes: false},
+        _getMapId: () => 1,
+        _requestManager: new RequestManager(transformCallback),
+        getPixelRatio() { return 1; }
+    } as any);
+
+    source.on('error', () => { }); // to prevent console log of errors
+
+    return source;
+}
+
+describe('RasterTileSource', () => {
+    let server: FakeServer;
+    beforeEach(() => {
+        global.fetch = null;
+        server = fakeServer.create();
+    });
+
+    afterEach(() => {
+        server.restore();
+    });
+
+    test('transforms request for TileJSON URL', () => {
+        server.respondWith('/source.json', JSON.stringify({
+            minzoom: 0,
+            maxzoom: 22,
+            attribution: 'MapLibre',
+            tiles: ['http://example.com/{z}/{x}/{y}.png'],
+            bounds: [-47, -7, -45, -5]
+        }));
+        const transformSpy = jest.fn().mockImplementation((url) => {
+            return {url};
+        });
+
+        createSource({url: '/source.json'}, transformSpy);
+        server.respond();
+
+        expect(transformSpy.mock.calls[0][0]).toBe('/source.json');
+        expect(transformSpy.mock.calls[0][1]).toBe('Source');
+    });
+
+    test('respects TileJSON.bounds', () => new Promise<void>(done => {
+        const source = createSource({
+            minzoom: 0,
+            maxzoom: 22,
+            attribution: 'MapLibre',
+            tiles: ['http://example.com/{z}/{x}/{y}.png'],
+            bounds: [-47, -7, -45, -5]
+        });
+        source.on('data', (e) => {
+            if (e.sourceDataType === 'metadata') {
+                expect(source.hasTile(new OverscaledTileID(8, 0, 8, 96, 132))).toBeFalsy();
+                expect(source.hasTile(new OverscaledTileID(8, 0, 8, 95, 132))).toBeTruthy();
+                done();
+            }
+        });
+    }));
+
+    test('does not error on invalid bounds', () => new Promise<void>(done => {
+        const source = createSource({
+            minzoom: 0,
+            maxzoom: 22,
+            attribution: 'MapLibre',
+            tiles: ['http://example.com/{z}/{x}/{y}.png'],
+            bounds: [-47, -7, -45, 91]
+        });
+
+        source.on('data', (e) => {
+            if (e.sourceDataType === 'metadata') {
+                expect(source.tileBounds.bounds).toEqual({_sw: {lng: -47, lat: -7}, _ne: {lng: -45, lat: 90}});
+                done();
+            }
+        });
+    }));
+
+    test('respects TileJSON.bounds when loaded from TileJSON', () => new Promise<void>(done => {
+        server.respondWith('/source.json', JSON.stringify({
+            minzoom: 0,
+            maxzoom: 22,
+            attribution: 'MapLibre',
+            tiles: ['http://example.com/{z}/{x}/{y}.png'],
+            bounds: [-47, -7, -45, -5]
+        }));
+        const source = createSource({url: '/source.json'});
+
+        source.on('data', (e) => {
+            if (e.sourceDataType === 'metadata') {
+                expect(source.hasTile(new OverscaledTileID(8, 0, 8, 96, 132))).toBeFalsy();
+                expect(source.hasTile(new OverscaledTileID(8, 0, 8, 95, 132))).toBeTruthy();
+                done();
+            }
+        });
+        server.respond();
+    }));
+
+    test('transforms tile urls before requesting', () => new Promise<void>(done => {
+        server.respondWith('/source.json', JSON.stringify({
+            minzoom: 0,
+            maxzoom: 22,
+            attribution: 'MapLibre',
+            tiles: ['http://example.com/{z}/{x}/{y}.png'],
+            bounds: [-47, -7, -45, -5]
+        }));
+        const source = createSource({url: '/source.json'});
+        const transformSpy = jest.spyOn(source.map._requestManager, 'transformRequest');
+        source.on('data', (e) => {
+            if (e.sourceDataType === 'metadata') {
+                const tile = {
+                    tileID: new OverscaledTileID(10, 0, 10, 5, 5),
+                    state: 'loading',
+                    loadVectorData () {},
+                    setExpiryData() {}
+                } as any as Tile;
+                source.loadTile(tile);
+                expect(transformSpy).toHaveBeenCalledTimes(1);
+                expect(transformSpy.mock.calls[0][0]).toBe('http://example.com/10/5/5.png');
+                expect(transformSpy.mock.calls[0][1]).toBe('Tile');
+                done();
+            }
+        });
+        server.respond();
+    }));
+
+    test('HttpImageElement used to get image when refreshExpiredTiles is false', () => new Promise<void>(done => {
+        stubAjaxGetImage(undefined);
+        server.respondWith('/source.json', JSON.stringify({
+            minzoom: 0,
+            maxzoom: 22,
+            attribution: 'MapLibre',
+            tiles: ['http://example.com/{z}/{x}/{y}.png'],
+            bounds: [-47, -7, -45, -5]
+        }));
+        const source = createSource({url: '/source.json'});
+        source.map.painter = {context: {}, getTileTexture: () => { return {update: () => {}}; }} as any;
+        source.map._refreshExpiredTiles = false;
+
+        const imageConstructorSpy = jest.spyOn(global, 'Image');
+        source.on('data', (e) => {
+            if (e.sourceDataType === 'metadata') {
+                const tile = {
+                    tileID: new OverscaledTileID(10, 0, 10, 5, 5),
+                    state: 'loading'
+                } as any as Tile;
+                source.loadTile(tile).then(() => {
+                    expect(imageConstructorSpy).toHaveBeenCalledTimes(1);
+                    expect(tile.state).toBe('loaded');
+                    done();
+                });
+            }
+        });
+        server.respond();
+    }));
+
+    test('supports updating tiles', () => {
+        const source = createSource({url: '/source.json'});
+        source.setTiles(['http://example.com/{z}/{x}/{y}.png?updated=true']);
+
+        source.on('data', (e) => {
+            if (e.sourceDataType === 'metadata') {
+                expect(source.tiles[0]).toBe('http://example.com/{z}/{x}/{y}.png?updated=true');
+            }
+        });
+    });
+
+    test('cancels TileJSON request if removed', () => {
+        const source = createSource({url: '/source.json'});
+        source.onRemove();
+        expect((server.lastRequest as any).aborted).toBe(true);
+    });
+
+    test('supports url property updates', () => {
+        const source = createSource({
+            url: 'http://localhost:2900/source.json'
+        });
+        source.setUrl('http://localhost:2900/source2.json');
+        expect(source.serialize()).toEqual({
+            type: 'raster',
+            url: 'http://localhost:2900/source2.json'
+        });
+    });
+
+    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/raster_tile_source.ts

@@ -0,0 +1,227 @@
+import {extend, pick} from '../util/util';
+
+import {ImageRequest} from '../util/image_request';
+
+import {ResourceType} from '../util/request_manager';
+import {Event, ErrorEvent, Evented} from '../util/evented';
+import {loadTileJson} from './load_tilejson';
+import {TileBounds} from './tile_bounds';
+import {Texture} from '../render/texture';
+
+import type {Source} from './source';
+import type {OverscaledTileID} from './tile_id';
+import type {Map} from '../ui/map';
+import type {Dispatcher} from '../util/dispatcher';
+import type {Tile} from './tile';
+import type {
+    RasterSourceSpecification,
+    RasterDEMSourceSpecification
+} from '@maplibre/maplibre-gl-style-spec';
+
+/**
+ * A source containing raster tiles (See the [Style Specification](https://maplibre.org/maplibre-style-spec/) for detailed documentation of options.)
+ *
+ * @group Sources
+ *
+ * @example
+ * ```ts
+ * map.addSource('raster-source', {
+ *     'type': 'raster',
+ *     'tiles': ['https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg'],
+ *     'tileSize': 256,
+ * });
+ * ```
+ *
+ * @example
+ * ```ts
+ * map.addSource('wms-test-source', {
+ *      'type': 'raster',
+ * // use the tiles option to specify a WMS tile source URL
+ *      'tiles': [
+ *          'https://img.nj.gov/imagerywms/Natural2015?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=Natural2015'
+ *      ],
+ *      'tileSize': 256
+ * });
+ * ```
+ * @see [Add a raster tile source](https://maplibre.org/maplibre-gl-js/docs/examples/map-tiles/)
+ * @see [Add a WMS source](https://maplibre.org/maplibre-gl-js/docs/examples/wms/)
+ * @see [Display a satellite map](https://maplibre.org/maplibre-gl-js/docs/examples/satellite-map/)
+ */
+export class RasterTileSource extends Evented implements Source {
+    type: 'raster' | 'raster-dem';
+    id: string;
+    minzoom: number;
+    maxzoom: number;
+    url: string;
+    scheme: string;
+    tileSize: number;
+
+    bounds: [number, number, number, number];
+    tileBounds: TileBounds;
+    roundZoom: boolean;
+    dispatcher: Dispatcher;
+    map: Map;
+    tiles: Array<string>;
+
+    _loaded: boolean;
+    _options: RasterSourceSpecification | RasterDEMSourceSpecification;
+    _tileJSONRequest: AbortController;
+
+    constructor(id: string, options: RasterSourceSpecification | RasterDEMSourceSpecification, dispatcher: Dispatcher, eventedParent: Evented) {
+        super();
+        this.id = id;
+        this.dispatcher = dispatcher;
+        this.setEventedParent(eventedParent);
+
+        this.type = 'raster';
+        this.minzoom = 0;
+        this.maxzoom = 22;
+        this.roundZoom = true;
+        this.scheme = 'xyz';
+        this.tileSize = 512;
+        this._loaded = false;
+
+        this._options = extend({type: 'raster'}, options);
+        extend(this, pick(options, ['url', 'scheme', 'tileSize']));
+    }
+
+    async load() {
+        this._loaded = false;
+        this.fire(new Event('dataloading', {dataType: 'source'}));
+        this._tileJSONRequest = new AbortController();
+        try {
+            const tileJSON = await loadTileJson(this._options, this.map._requestManager, this._tileJSONRequest);
+            this._tileJSONRequest = null;
+            this._loaded = true;
+            if (tileJSON) {
+                extend(this, tileJSON);
+                if (tileJSON.bounds) this.tileBounds = new TileBounds(tileJSON.bounds, this.minzoom, this.maxzoom);
+
+                // `content` is included here to prevent a race condition where `Style#_updateSources` is called
+                // before the TileJSON arrives. this makes sure the tiles needed are loaded once TileJSON arrives
+                // ref: https://github.com/mapbox/mapbox-gl-js/pull/4347#discussion_r104418088
+                this.fire(new Event('data', {dataType: 'source', sourceDataType: 'metadata'}));
+                this.fire(new Event('data', {dataType: 'source', sourceDataType: 'content'}));
+            }
+        } catch (err) {
+            this._tileJSONRequest = null;
+            this.fire(new ErrorEvent(err));
+        }
+    }
+
+    loaded(): boolean {
+        return this._loaded;
+    }
+
+    onAdd(map: Map) {
+        this.map = map;
+        this.load();
+    }
+
+    onRemove() {
+        if (this._tileJSONRequest) {
+            this._tileJSONRequest.abort();
+            this._tileJSONRequest = null;
+        }
+    }
+
+    setSourceProperty(callback: Function) {
+        if (this._tileJSONRequest) {
+            this._tileJSONRequest.abort();
+            this._tileJSONRequest = null;
+        }
+
+        callback();
+
+        this.load();
+    }
+
+    /**
+     * Sets the source `tiles` property and re-renders the map.
+     *
+     * @param tiles - An array of one or more tile source URLs, as in the raster tiles spec (See the [Style Specification](https://maplibre.org/maplibre-style-spec/)
+     */
+    setTiles(tiles: Array<string>): this {
+        this.setSourceProperty(() => {
+            this._options.tiles = tiles;
+        });
+
+        return this;
+    }
+
+    /**
+     * Sets the source `url` property and re-renders the map.
+     *
+     * @param url - A URL to a TileJSON resource. Supported protocols are `http:` and `https:`.
+     */
+    setUrl(url: string): this {
+        this.setSourceProperty(() => {
+            this.url = url;
+            this._options.url = url;
+        });
+
+        return this;
+    }
+
+    serialize() {
+        return extend({}, this._options);
+    }
+
+    hasTile(tileID: OverscaledTileID) {
+        return !this.tileBounds || this.tileBounds.contains(tileID.canonical);
+    }
+
+    async loadTile(tile: Tile): Promise<void> {
+        const url = tile.tileID.canonical.url(this.tiles, this.map.getPixelRatio(), this.scheme);
+        tile.abortController = new AbortController();
+        try {
+            const response = await ImageRequest.getImage(this.map._requestManager.transformRequest(url, ResourceType.Tile), tile.abortController, this.map._refreshExpiredTiles);
+            delete tile.abortController;
+            if (tile.aborted) {
+                tile.state = 'unloaded';
+                return;
+            }
+            if (response && response.data) {
+                if (this.map._refreshExpiredTiles && response.cacheControl && response.expires) {
+                    tile.setExpiryData({cacheControl: response.cacheControl, expires: response.expires});
+                }
+                const context = this.map.painter.context;
+                const gl = context.gl;
+                const img = response.data;
+                tile.texture = this.map.painter.getTileTexture(img.width);
+                if (tile.texture) {
+                    tile.texture.update(img, {useMipmap: true});
+                } else {
+                    tile.texture = new Texture(context, img, gl.RGBA, {useMipmap: true});
+                    tile.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE, gl.LINEAR_MIPMAP_NEAREST);
+                }
+                tile.state = 'loaded';
+            }
+        } catch (err) {
+            delete tile.abortController;
+            if (tile.aborted) {
+                tile.state = 'unloaded';
+            } else if (err) {
+                tile.state = 'errored';
+                throw err;
+            }
+        }
+    }
+
+    async abortTile(tile: Tile) {
+        if (tile.abortController) {
+            tile.abortController.abort();
+            delete tile.abortController;
+        }
+    }
+
+    async unloadTile(tile: Tile) {
+        if (tile.texture) {
+            this.map.painter.saveTileTexture(tile.texture);
+        }
+    }
+
+    hasTransition() {
+        return false;
+    }
+}