@scoova/mgl 1.0.0

package/src/source/vector_tile_source.test.ts

@@ -0,0 +1,401 @@
+import {fakeServer, type 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/unit/assets/source.json' with {type: 'json'};
+import {getMockDispatcher, getWrapDispatcher, sleep, waitForMetadataEvent} from '../util/test/util';
+import {Map} from '../ui/map';
+import {WorkerTileParameters} from './worker_source';
+import {ActorMessage, MessageType} from '../util/actor_messages';
+
+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}}},
+        getPixelRatio() { return 1; }
+    } as any as Map);
+
+    source.on('error', () => { }); // to prevent console log of errors
+
+    return source;
+}
+
+describe('VectorTileSource', () => {
+    let server: FakeServer;
+    beforeEach(() => {
+        global.fetch = null;
+        server = fakeServer.create();
+    });
+
+    afterEach(() => {
+        server.restore();
+    });
+
+    test('can be constructed from TileJSON', async () => {
+        const source = createSource({
+            minzoom: 1,
+            maxzoom: 10,
+            attribution: 'MapLibre',
+            tiles: ['http://example.com/{z}/{x}/{y}.png']
+        });
+
+        await waitForMetadataEvent(source);
+        expect(source.tiles).toEqual(['http://example.com/{z}/{x}/{y}.png']);
+        expect(source.minzoom).toBe(1);
+        expect(source.maxzoom).toBe(10);
+        expect((source as Source).attribution).toBe('MapLibre');
+    });
+
+    test('can be constructed from a TileJSON URL', async () => {
+        server.respondWith('/source.json', JSON.stringify(fixturesSource));
+
+        const source = createSource({url: '/source.json'});
+
+        const promise = waitForMetadataEvent(source);
+        server.respond();
+
+        await promise;
+        expect(source.tiles).toEqual(['http://example.com/{z}/{x}/{y}.png']);
+        expect(source.minzoom).toBe(1);
+        expect(source.maxzoom).toBe(10);
+        expect((source as Source).attribution).toBe('MapLibre');
+    });
+
+    test('transforms the request for TileJSON URL', () => {
+        server.respondWith('/source.json', JSON.stringify(fixturesSource));
+        const transformSpy = jest.fn().mockImplementation((url) => {
+            return {url};
+        });
+
+        createSource({url: '/source.json'}, transformSpy);
+        server.respond();
+        expect(transformSpy).toHaveBeenCalledWith('/source.json', 'Source');
+    });
+
+    test('fires event with metadata property', () => new Promise<void>(done => {
+        server.respondWith('/source.json', JSON.stringify(fixturesSource));
+        const source = createSource({url: '/source.json'});
+        source.on('data', (e) => {
+            if (e.sourceDataType === 'content') done();
+        });
+        server.respond();
+    }));
+
+    test('fires "dataloading" event', async () => {
+        server.respondWith('/source.json', JSON.stringify(fixturesSource));
+        const evented = new Evented();
+        let dataloadingFired = false;
+        evented.on('dataloading', () => {
+            dataloadingFired = true;
+        });
+        const source = createSource({url: '/source.json', eventedParent: evented});
+        const promise = waitForMetadataEvent(source);
+        server.respond();
+
+        await promise;
+        expect(dataloadingFired).toBeTruthy();
+    });
+
+    test('serialize URL', () => {
+        const source = createSource({
+            url: 'http://localhost:2900/source.json'
+        });
+        expect(source.serialize()).toEqual({
+            type: 'vector',
+            url: 'http://localhost:2900/source.json'
+        });
+    });
+
+    test('serialize TileJSON', () => {
+        const source = createSource({
+            minzoom: 1,
+            maxzoom: 10,
+            attribution: 'MapLibre',
+            tiles: ['http://example.com/{z}/{x}/{y}.png']
+        });
+        expect(source.serialize()).toEqual({
+            type: 'vector',
+            minzoom: 1,
+            maxzoom: 10,
+            attribution: 'MapLibre',
+            tiles: ['http://example.com/{z}/{x}/{y}.png']
+        });
+    });
+
+    function testScheme(scheme, expectedURL) {
+        test(`scheme "${scheme}"`, async () => {
+            const source = createSource({
+                minzoom: 1,
+                maxzoom: 10,
+                attribution: 'MapLibre',
+                tiles: ['http://example.com/{z}/{x}/{y}.png'],
+                scheme
+            });
+
+            let receivedMessage: ActorMessage<MessageType> = null;
+
+            source.dispatcher = getWrapDispatcher()({
+                sendAsync(message) {
+                    receivedMessage = message;
+                    return Promise.resolve({});
+                }
+            });
+
+            await waitForMetadataEvent(source);
+            await source.loadTile({
+                loadVectorData() {},
+                tileID: new OverscaledTileID(10, 0, 10, 5, 5)
+            } as any as Tile);
+
+            expect(receivedMessage.type).toBe(MessageType.loadTile);
+            expect(expectedURL).toBe((receivedMessage.data as WorkerTileParameters).request.url);
+        });
+    }
+
+    testScheme('xyz', 'http://example.com/10/5/5.png');
+    testScheme('tms', 'http://example.com/10/5/1018.png');
+
+    test('transforms tile urls before requesting', async () => {
+        server.respondWith('/source.json', JSON.stringify(fixturesSource));
+
+        const source = createSource({url: '/source.json'});
+        const transformSpy = jest.spyOn(source.map._requestManager, 'transformRequest');
+        const promise = waitForMetadataEvent(source);
+        server.respond();
+        await promise;
+
+        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).toHaveBeenCalledWith('http://example.com/10/5/5.png', 'Tile');
+    });
+
+    test('loads a tile even in case of 404', async () => {
+        server.respondWith('/source.json', JSON.stringify(fixturesSource));
+
+        const source = createSource({url: '/source.json'});
+        source.dispatcher = getWrapDispatcher()({
+            sendAsync(_message) {
+                const error = new Error();
+                (error as any).status = 404;
+                return Promise.reject(error);
+            }
+        });
+        const promise = waitForMetadataEvent(source);
+        server.respond();
+        await promise;
+        const tile = {
+            tileID: new OverscaledTileID(10, 0, 10, 5, 5),
+            state: 'loading',
+            loadVectorData: jest.fn(),
+            setExpiryData() {}
+        } as any as Tile;
+        await source.loadTile(tile);
+        expect(tile.loadVectorData).toHaveBeenCalledTimes(1);
+    });
+
+    test('does not load a tile in case of error', async () => {
+        server.respondWith('/source.json', JSON.stringify(fixturesSource));
+
+        const source = createSource({url: '/source.json'});
+        source.dispatcher = getWrapDispatcher()({
+            async sendAsync(_message) {
+                throw new Error('Error');
+            }
+        });
+        const promise = waitForMetadataEvent(source);
+        server.respond();
+        await promise;
+        const tile = {
+            tileID: new OverscaledTileID(10, 0, 10, 5, 5),
+            state: 'loading',
+            loadVectorData: jest.fn(),
+            setExpiryData() {}
+        } as any as Tile;
+        await expect(source.loadTile(tile)).rejects.toThrow('Error');
+        expect(tile.loadVectorData).toHaveBeenCalledTimes(0);
+    });
+
+    test('loads an empty tile received from worker', async () => {
+        server.respondWith('/source.json', JSON.stringify(fixturesSource));
+
+        const source = createSource({url: '/source.json'});
+        source.dispatcher = getWrapDispatcher()({
+            sendAsync(_message) {
+                return Promise.resolve(null);
+            }
+        });
+
+        const promise = waitForMetadataEvent(source);
+        server.respond();
+        await promise;
+
+        const tile = {
+            tileID: new OverscaledTileID(10, 0, 10, 5, 5),
+            state: 'loading',
+            loadVectorData: jest.fn(),
+            setExpiryData() {}
+        } as any as Tile;
+        await source.loadTile(tile);
+        expect(tile.loadVectorData).toHaveBeenCalledTimes(1);
+    });
+
+    test('reloads a loading tile properly', async () => {
+        const source = createSource({
+            tiles: ['http://example.com/{z}/{x}/{y}.png']
+        });
+        const events = [];
+        source.dispatcher = getWrapDispatcher()({
+            sendAsync(message) {
+                events.push(message.type);
+                return Promise.resolve({});
+            }
+        });
+
+        await waitForMetadataEvent(source);
+        const tile = {
+            tileID: new OverscaledTileID(10, 0, 10, 5, 5),
+            state: 'loading',
+            loadVectorData () {
+                this.state = 'loaded';
+                events.push('tileLoaded');
+            },
+            setExpiryData() {}
+        } as any as Tile;
+        const initialLoadPromise = source.loadTile(tile);
+
+        expect(tile.state).toBe('loading');
+        await source.loadTile(tile);
+        expect(events).toEqual([MessageType.loadTile, 'tileLoaded', MessageType.reloadTile, 'tileLoaded']);
+        await expect(initialLoadPromise).resolves.toBeUndefined();
+    });
+
+    test('respects TileJSON.bounds', async () => {
+        const source = createSource({
+            minzoom: 0,
+            maxzoom: 22,
+            attribution: 'MapLibre',
+            tiles: ['http://example.com/{z}/{x}/{y}.png'],
+            bounds: [-47, -7, -45, -5]
+        });
+        await waitForMetadataEvent(source);
+
+        expect(source.hasTile(new OverscaledTileID(8, 0, 8, 96, 132))).toBeFalsy();
+        expect(source.hasTile(new OverscaledTileID(8, 0, 8, 95, 132))).toBeTruthy();
+    });
+
+    test('does not error on invalid bounds', async () => {
+        const source = createSource({
+            minzoom: 0,
+            maxzoom: 22,
+            attribution: 'MapLibre',
+            tiles: ['http://example.com/{z}/{x}/{y}.png'],
+            bounds: [-47, -7, -45, 91]
+        });
+
+        await waitForMetadataEvent(source);
+        expect(source.tileBounds.bounds).toEqual({_sw: {lng: -47, lat: -7}, _ne: {lng: -45, lat: 90}});
+    });
+
+    test('respects TileJSON.bounds when loaded from TileJSON', async () => {
+        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 promise = waitForMetadataEvent(source);
+        server.respond();
+
+        await promise;
+        expect(source.hasTile(new OverscaledTileID(8, 0, 8, 96, 132))).toBeFalsy();
+        expect(source.hasTile(new OverscaledTileID(8, 0, 8, 95, 132))).toBeTruthy();
+    });
+
+    test('respects collectResourceTiming parameter on source', async () => {
+        const source = createSource({
+            tiles: ['http://example.com/{z}/{x}/{y}.png'],
+            collectResourceTiming: true
+        });
+        let receivedMessage = null;
+        source.dispatcher = getWrapDispatcher()({
+            sendAsync(message) {
+                receivedMessage = message;
+
+                // do nothing for cache size check dispatch
+                source.dispatcher = getMockDispatcher();
+
+                return Promise.resolve({});
+            }
+        });
+
+        await waitForMetadataEvent(source);
+        const tile = {
+            tileID: new OverscaledTileID(10, 0, 10, 5, 5),
+            state: 'loading',
+            loadVectorData() {},
+            setExpiryData() {}
+        } as any as Tile;
+        await source.loadTile(tile);
+
+        expect((receivedMessage.data as WorkerTileParameters).request.collectResourceTiming).toBeTruthy();
+    });
+
+    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: 'vector',
+            url: 'http://localhost:2900/source2.json'
+        });
+    });
+
+    test('supports tiles property updates', () => {
+        const source = createSource({
+            minzoom: 1,
+            maxzoom: 10,
+            attribution: 'MapLibre',
+            tiles: ['http://example.com/{z}/{x}/{y}.png']
+        });
+        source.setTiles(['http://example2.com/{z}/{x}/{y}.png']);
+        expect(source.serialize()).toEqual({
+            type: 'vector',
+            minzoom: 1,
+            maxzoom: 10,
+            attribution: 'MapLibre',
+            tiles: ['http://example2.com/{z}/{x}/{y}.png']
+        });
+    });
+
+    test('setTiles only clears the cache once the TileJSON has reloaded', async () => {
+        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);
+        await sleep(0);
+        await source.once('data');
+        expect(clearTiles.mock.calls).toHaveLength(1);
+    });
+});

package/src/source/vector_tile_source.ts

@@ -0,0 +1,283 @@
+import {Event, ErrorEvent, Evented} from '../util/evented';
+
+import {extend, pick} from '../util/util';
+import {loadTileJson} from './load_tilejson';
+import {TileBounds} from './tile_bounds';
+import {ResourceType} from '../util/request_manager';
+
+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 {VectorSourceSpecification, PromoteIdSpecification} from '@maplibre/maplibre-gl-style-spec';
+import type {WorkerTileResult} from './worker_source';
+import {MessageType} from '../util/actor_messages';
+
+export type VectorTileSourceOptions = VectorSourceSpecification & {
+    collectResourceTiming?: boolean;
+    tileSize?: number;
+}
+
+/**
+ * A source containing vector tiles in [Mapbox Vector Tile format](https://docs.mapbox.com/vector-tiles/reference/).
+ * (See the [Style Specification](https://maplibre.org/maplibre-style-spec/) for detailed documentation of options.)
+ *
+ * @group Sources
+ *
+ * @example
+ * ```ts
+ * map.addSource('some id', {
+ *     type: 'vector',
+ *     url: 'https://demotiles.maplibre.org/tiles/tiles.json'
+ * });
+ * ```
+ *
+ * @example
+ * ```ts
+ * map.addSource('some id', {
+ *     type: 'vector',
+ *     tiles: ['https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt'],
+ *     minzoom: 6,
+ *     maxzoom: 14
+ * });
+ * ```
+ *
+ * @example
+ * ```ts
+ * map.getSource('some id').setUrl("https://demotiles.maplibre.org/tiles/tiles.json");
+ * ```
+ *
+ * @example
+ * ```ts
+ * map.getSource('some id').setTiles(['https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt']);
+ * ```
+ * @see [Add a vector tile source](https://maplibre.org/maplibre-gl-js/docs/examples/vector-source/)
+ */
+export class VectorTileSource extends Evented implements Source {
+    type: 'vector';
+    id: string;
+    minzoom: number;
+    maxzoom: number;
+    url: string;
+    scheme: string;
+    tileSize: number;
+    promoteId: PromoteIdSpecification;
+
+    _options: VectorSourceSpecification;
+    _collectResourceTiming: boolean;
+    dispatcher: Dispatcher;
+    map: Map;
+    bounds: [number, number, number, number];
+    tiles: Array<string>;
+    tileBounds: TileBounds;
+    reparseOverscaled: boolean;
+    isTileClipped: boolean;
+    _tileJSONRequest: AbortController;
+    _loaded: boolean;
+
+    constructor(id: string, options: VectorTileSourceOptions, dispatcher: Dispatcher, eventedParent: Evented) {
+        super();
+        this.id = id;
+        this.dispatcher = dispatcher;
+
+        this.type = 'vector';
+        this.minzoom = 0;
+        this.maxzoom = 22;
+        this.scheme = 'xyz';
+        this.tileSize = 512;
+        this.reparseOverscaled = true;
+        this.isTileClipped = true;
+        this._loaded = false;
+
+        extend(this, pick(options, ['url', 'scheme', 'tileSize', 'promoteId']));
+        this._options = extend({type: 'vector'}, options);
+
+        this._collectResourceTiming = options.collectResourceTiming;
+
+        if (this.tileSize !== 512) {
+            throw new Error('vector tile sources must have a tileSize of 512');
+        }
+
+        this.setEventedParent(eventedParent);
+    }
+
+    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;
+            this.map.style.sourceCaches[this.id].clearTiles();
+            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;
+    }
+
+    hasTile(tileID: OverscaledTileID) {
+        return !this.tileBounds || this.tileBounds.contains(tileID.canonical);
+    }
+
+    onAdd(map: Map) {
+        this.map = map;
+        this.load();
+    }
+
+    setSourceProperty(callback: Function) {
+        if (this._tileJSONRequest) {
+            this._tileJSONRequest.abort();
+        }
+
+        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 TileJSON 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;
+    }
+
+    onRemove() {
+        if (this._tileJSONRequest) {
+            this._tileJSONRequest.abort();
+            this._tileJSONRequest = null;
+        }
+    }
+
+    serialize(): VectorSourceSpecification {
+        return extend({}, this._options);
+    }
+
+    async loadTile(tile: Tile): Promise<void> {
+        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,
+            tileID: tile.tileID,
+            zoom: tile.tileID.overscaledZ,
+            tileSize: this.tileSize * tile.tileID.overscaleFactor(),
+            type: this.type,
+            source: this.id,
+            pixelRatio: this.map.getPixelRatio(),
+            showCollisionBoxes: this.map.showCollisionBoxes,
+            promoteId: this.promoteId
+        };
+        params.request.collectResourceTiming = this._collectResourceTiming;
+        let messageType: MessageType.loadTile | MessageType.reloadTile = MessageType.reloadTile;
+        if (!tile.actor || tile.state === 'expired') {
+            tile.actor = this.dispatcher.getActor();
+            messageType = MessageType.loadTile;
+        } else if (tile.state === 'loading') {
+            return new Promise<void>((resolve, reject) => {
+                tile.reloadPromise = {resolve, reject};
+            });
+        }
+        tile.abortController = new AbortController();
+        try {
+            const data = await tile.actor.sendAsync({type: messageType, data: params}, tile.abortController);
+            delete tile.abortController;
+
+            if (tile.aborted) {
+                return;
+            }
+            this._afterTileLoadWorkerResponse(tile, data);
+        } catch (err) {
+            delete tile.abortController;
+
+            if (tile.aborted) {
+                return;
+            }
+            if (err && err.status !== 404) {
+                throw err;
+            }
+            this._afterTileLoadWorkerResponse(tile, null);
+        }
+    }
+
+    private _afterTileLoadWorkerResponse(tile: Tile, data: WorkerTileResult) {
+        if (data && data.resourceTiming) {
+            tile.resourceTiming = data.resourceTiming;
+        }
+
+        if (data && this.map._refreshExpiredTiles) {
+            tile.setExpiryData(data);
+        }
+        tile.loadVectorData(data, this.map.painter);
+
+        if (tile.reloadPromise) {
+            const reloadPromise = tile.reloadPromise;
+            tile.reloadPromise = null;
+            this.loadTile(tile).then(reloadPromise.resolve).catch(reloadPromise.reject);
+        }
+    }
+
+    async abortTile(tile: Tile): Promise<void> {
+        if (tile.abortController) {
+            tile.abortController.abort();
+            delete tile.abortController;
+        }
+        if (tile.actor) {
+            await tile.actor.sendAsync({
+                type: MessageType.abortTile,
+                data: {uid: tile.uid, type: this.type, source: this.id}
+            });
+        }
+    }
+
+    async unloadTile(tile: Tile): Promise<void> {
+        tile.unloadVectorData();
+        if (tile.actor) {
+            await tile.actor.sendAsync({
+                type: MessageType.removeTile,
+                data: {
+                    uid: tile.uid,
+                    type: this.type,
+                    source: this.id}
+            });
+        }
+    }
+
+    hasTransition() {
+        return false;
+    }
+}