@scoova/mgl 1.0.0

package/src/source/load_tilejson.ts

@@ -0,0 +1,47 @@
+import {pick, extend, TileJSON} from '../util/util';
+import {getJSON} from '../util/ajax';
+import {ResourceType} from '../util/request_manager';
+import {browser} from '../util/browser';
+
+import type {RequestManager} from '../util/request_manager';
+import type {RasterDEMSourceSpecification, RasterSourceSpecification, VectorSourceSpecification} from '@maplibre/maplibre-gl-style-spec';
+
+export type LoadTileJsonResponse = {
+    tiles: Array<string>;
+    minzoom: number;
+    maxzoom: number;
+    attribution: string;
+    bounds: RasterSourceSpecification['bounds'];
+    scheme: RasterSourceSpecification['scheme'];
+    tileSize: number;
+    encoding: RasterDEMSourceSpecification['encoding'];
+    vectorLayerIds?: Array<string>;
+}
+
+export async function loadTileJson(
+    options: RasterSourceSpecification | RasterDEMSourceSpecification | VectorSourceSpecification,
+    requestManager: RequestManager,
+    abortController: AbortController,
+): Promise<LoadTileJsonResponse | null> {
+    let tileJSON: TileJSON | typeof options = options;
+    if (options.url) {
+        const response = await getJSON<TileJSON>(requestManager.transformRequest(options.url, ResourceType.Source), abortController);
+        tileJSON = response.data;
+    } else {
+        await browser.frameAsync(abortController);
+    }
+    if (!tileJSON) {
+        return null;
+    }
+    const result = pick(
+        // explicit source options take precedence over TileJSON
+        extend(tileJSON, options),
+        ['tiles', 'minzoom', 'maxzoom', 'attribution', 'bounds', 'scheme', 'tileSize', 'encoding']
+    ) as LoadTileJsonResponse;
+
+    if ('vector_layers' in tileJSON && tileJSON.vector_layers) {
+        result.vectorLayerIds = tileJSON.vector_layers.map((layer) => { return layer.id; });
+    }
+
+    return result;
+}

package/src/source/pixels_to_tile_units.ts

@@ -0,0 +1,25 @@
+import {EXTENT} from '../data/extent';
+
+import type {OverscaledTileID} from './tile_id';
+
+/**
+ * Converts a pixel value at a the given zoom level to tile units.
+ *
+ * The shaders mostly calculate everything in tile units so style
+ * properties need to be converted from pixels to tile units using this.
+ *
+ * For example, a translation by 30 pixels at zoom 6.5 will be a
+ * translation by pixelsToTileUnits(30, 6.5) tile units.
+ *
+ * @returns value in tile units
+ */
+export function pixelsToTileUnits(
+    tile: {
+        tileID: OverscaledTileID;
+        tileSize: number;
+    },
+    pixelValue: number,
+    z: number
+): number {
+    return pixelValue * (EXTENT / (tile.tileSize * Math.pow(2, z - tile.tileID.overscaledZ)));
+}

package/src/source/protocol_crud.ts

@@ -0,0 +1,48 @@
+import {AddProtocolAction, config} from '../util/config';
+
+export function getProtocol(url: string) {
+    return config.REGISTERED_PROTOCOLS[url.substring(0, url.indexOf('://'))];
+}
+/**
+ * Adds a custom load resource function that will be called when using a URL that starts with a custom url schema.
+ * This will happen in the main thread, and workers might call it if they don't know how to handle the protocol.
+ * The example below will be triggered for custom:// urls defined in the sources list in the style definitions.
+ * The function passed will receive the request parameters and should return with the resulting resource,
+ * for example a pbf vector tile, non-compressed, represented as ArrayBuffer.
+ *
+ * @param customProtocol - the protocol to hook, for example 'custom'
+ * @param loadFn - the function to use when trying to fetch a tile specified by the customProtocol
+ * @example
+ * ```ts
+ * // This will fetch a file using the fetch API (this is obviously a non interesting example...)
+ * addProtocol('custom', async (params, abortController) => {
+ *      const t = await fetch(`https://${params.url.split("://")[1]}`);
+ *      if (t.status == 200) {
+ *          const buffer = await t.arrayBuffer();
+ *          return {data: buffer}
+ *      } else {
+ *          throw new Error(`Tile fetch error: ${t.statusText}`);
+ *      }
+ *  });
+ * // the following is an example of a way to return an error when trying to load a tile
+ * addProtocol('custom2', async (params, abortController) => {
+ *      throw new Error('someErrorMessage'));
+ * });
+ * ```
+ */
+export function addProtocol(customProtocol: string, loadFn: AddProtocolAction) {
+    config.REGISTERED_PROTOCOLS[customProtocol] = loadFn;
+}
+
+/**
+ * Removes a previously added protocol in the main thread.
+ *
+ * @param customProtocol - the custom protocol to remove registration for
+ * @example
+ * ```ts
+ * removeProtocol('custom');
+ * ```
+ */
+export function removeProtocol(customProtocol: string) {
+    delete config.REGISTERED_PROTOCOLS[customProtocol];
+}

package/src/source/query_features.test.ts

@@ -0,0 +1,31 @@
+import {
+    queryRenderedFeatures,
+    querySourceFeatures
+} from './query_features';
+import {SourceCache} from './source_cache';
+import {Transform} from '../geo/transform';
+import Point from '@mapbox/point-geometry';
+
+describe('QueryFeatures#rendered', () => {
+    test('returns empty object if source returns no tiles', () => {
+        const mockSourceCache = {tilesIn () { return []; }} as any as SourceCache;
+        const transform = new Transform();
+        const result = queryRenderedFeatures(mockSourceCache, {}, undefined, [] as Point[], undefined, transform);
+        expect(result).toEqual({});
+    });
+
+});
+
+describe('QueryFeatures#source', () => {
+    test('returns empty result when source has no features', () => {
+        const sourceCache = new SourceCache('test', {
+            type: 'geojson',
+            data: {type: 'FeatureCollection', features: []}
+        }, {
+            getActor() {}
+        } as any);
+        const result = querySourceFeatures(sourceCache, {});
+        expect(result).toEqual([]);
+    });
+
+});

package/src/source/query_features.ts

@@ -0,0 +1,252 @@
+import type {SourceCache} from './source_cache';
+import type {StyleLayer} from '../style/style_layer';
+import type {CollisionIndex} from '../symbol/collision_index';
+import type {Transform} from '../geo/transform';
+import type {RetainedQueryData} from '../symbol/placement';
+import type {FilterSpecification} from '@maplibre/maplibre-gl-style-spec';
+import type {MapGeoJSONFeature} from '../util/vectortile_to_geojson';
+import type Point from '@mapbox/point-geometry';
+import {mat4} from 'gl-matrix';
+
+/**
+ * Options to pass to query the map for the rendered features
+ */
+export type QueryRenderedFeaturesOptions = {
+    /**
+     * An array of [style layer IDs](https://maplibre.org/maplibre-style-spec/#layer-id) for the query to inspect.
+     * Only features within these layers will be returned. If this parameter is undefined, all layers will be checked.
+     */
+    layers?: Array<string>;
+    /**
+     * A [filter](https://maplibre.org/maplibre-style-spec/layers/#filter) to limit query results.
+     */
+    filter?: FilterSpecification;
+    /**
+     * An array of string representing the available images
+     */
+    availableImages?: Array<string>;
+    /**
+     * Whether to check if the [options.filter] conforms to the MapLibre Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.
+     */
+    validate?: boolean;
+};
+
+/**
+ * The options object related to the {@link Map#querySourceFeatures} method
+ */
+export type QuerySourceFeatureOptions = {
+    /**
+     * The name of the source layer to query. *For vector tile sources, this parameter is required.* For GeoJSON sources, it is ignored.
+     */
+    sourceLayer?: string;
+    /**
+     * A [filter](https://maplibre.org/maplibre-style-spec/layers/#filter)
+     * to limit query results.
+     */
+    filter?: FilterSpecification;
+    /**
+     * Whether to check if the [parameters.filter] conforms to the MapLibre Style Specification. Disabling validation is a performance optimization that should only be used if you have previously validated the values you will be passing to this function.
+     * @defaultValue true
+     */
+    validate?: boolean;
+}
+
+/*
+ * Returns a matrix that can be used to convert from tile coordinates to viewport pixel coordinates.
+ */
+function getPixelPosMatrix(transform, tileID) {
+    const t = mat4.create();
+    mat4.translate(t, t, [1, 1, 0]);
+    mat4.scale(t, t, [transform.width * 0.5, transform.height * 0.5, 1]);
+    return mat4.multiply(t, t, transform.calculatePosMatrix(tileID.toUnwrapped()));
+}
+
+function queryIncludes3DLayer(layers: Array<string>, styleLayers: {[_: string]: StyleLayer}, sourceID: string) {
+    if (layers) {
+        for (const layerID of layers) {
+            const layer = styleLayers[layerID];
+            if (layer && layer.source === sourceID && layer.type === 'fill-extrusion') {
+                return true;
+            }
+        }
+    } else {
+        for (const key in styleLayers) {
+            const layer = styleLayers[key];
+            if (layer.source === sourceID && layer.type === 'fill-extrusion') {
+                return true;
+            }
+        }
+    }
+    return false;
+}
+
+export function queryRenderedFeatures(
+    sourceCache: SourceCache,
+    styleLayers: {[_: string]: StyleLayer},
+    serializedLayers: {[_: string]: any},
+    queryGeometry: Array<Point>,
+    params: QueryRenderedFeaturesOptions,
+    transform: Transform
+): { [key: string]: Array<{featureIndex: number; feature: MapGeoJSONFeature}> } {
+
+    const has3DLayer = queryIncludes3DLayer(params && params.layers, styleLayers, sourceCache.id);
+    const maxPitchScaleFactor = transform.maxPitchScaleFactor();
+    const tilesIn = sourceCache.tilesIn(queryGeometry, maxPitchScaleFactor, has3DLayer);
+
+    tilesIn.sort(sortTilesIn);
+    const renderedFeatureLayers = [];
+    for (const tileIn of tilesIn) {
+        renderedFeatureLayers.push({
+            wrappedTileID: tileIn.tileID.wrapped().key,
+            queryResults: tileIn.tile.queryRenderedFeatures(
+                styleLayers,
+                serializedLayers,
+                sourceCache._state,
+                tileIn.queryGeometry,
+                tileIn.cameraQueryGeometry,
+                tileIn.scale,
+                params,
+                transform,
+                maxPitchScaleFactor,
+                getPixelPosMatrix(sourceCache.transform, tileIn.tileID))
+        });
+    }
+
+    const result = mergeRenderedFeatureLayers(renderedFeatureLayers);
+
+    // Merge state from SourceCache into the results
+    for (const layerID in result) {
+        result[layerID].forEach((featureWrapper) => {
+            const feature = featureWrapper.feature as MapGeoJSONFeature;
+            const state = sourceCache.getFeatureState(feature.layer['source-layer'], feature.id);
+            feature.source = feature.layer.source;
+            if (feature.layer['source-layer']) {
+                feature.sourceLayer = feature.layer['source-layer'];
+            }
+            feature.state = state;
+        });
+    }
+    return result;
+}
+
+export function queryRenderedSymbols(styleLayers: {[_: string]: StyleLayer},
+    serializedLayers: {[_: string]: StyleLayer},
+    sourceCaches: {[_: string]: SourceCache},
+    queryGeometry: Array<Point>,
+    params: QueryRenderedFeaturesOptions,
+    collisionIndex: CollisionIndex,
+    retainedQueryData: {
+        [_: number]: RetainedQueryData;
+    }) {
+    const result = {};
+    const renderedSymbols = collisionIndex.queryRenderedSymbols(queryGeometry);
+    const bucketQueryData = [];
+    for (const bucketInstanceId of Object.keys(renderedSymbols).map(Number)) {
+        bucketQueryData.push(retainedQueryData[bucketInstanceId]);
+    }
+    bucketQueryData.sort(sortTilesIn);
+
+    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);
+
+        for (const layerID in bucketSymbols) {
+            const resultFeatures = result[layerID] = result[layerID] || [];
+            const layerSymbols = bucketSymbols[layerID];
+            layerSymbols.sort((a, b) => {
+                // Match topDownFeatureComparator from FeatureIndex, but using
+                // most recent sorting of features from bucket.sortFeatures
+                const featureSortOrder = queryData.featureSortOrder;
+                if (featureSortOrder) {
+                    // queryRenderedSymbols documentation says we'll return features in
+                    // "top-to-bottom" rendering order (aka last-to-first).
+                    // Actually there can be multiple symbol instances per feature, so
+                    // we sort each feature based on the first matching symbol instance.
+                    const sortedA = featureSortOrder.indexOf(a.featureIndex);
+                    const sortedB = featureSortOrder.indexOf(b.featureIndex);
+                    return sortedB - sortedA;
+                } else {
+                    // Bucket hasn't been re-sorted based on angle, so use the
+                    // reverse of the order the features appeared in the data.
+                    return b.featureIndex - a.featureIndex;
+                }
+            });
+            for (const symbolFeature of layerSymbols) {
+                resultFeatures.push(symbolFeature);
+            }
+        }
+    }
+
+    // Merge state from SourceCache into the results
+    for (const layerName in result) {
+        result[layerName].forEach((featureWrapper) => {
+            const feature = featureWrapper.feature;
+            const layer = styleLayers[layerName];
+            const sourceCache = sourceCaches[layer.source];
+            const state = sourceCache.getFeatureState(feature.layer['source-layer'], feature.id);
+            feature.source = feature.layer.source;
+            if (feature.layer['source-layer']) {
+                feature.sourceLayer = feature.layer['source-layer'];
+            }
+            feature.state = state;
+        });
+    }
+    return result;
+}
+
+export function querySourceFeatures(sourceCache: SourceCache, params: QuerySourceFeatureOptions) {
+    const tiles = sourceCache.getRenderableIds().map((id) => {
+        return sourceCache.getTileByID(id);
+    });
+
+    const result = [];
+
+    const dataTiles = {};
+    for (let i = 0; i < tiles.length; i++) {
+        const tile = tiles[i];
+        const dataID = tile.tileID.canonical.key;
+        if (!dataTiles[dataID]) {
+            dataTiles[dataID] = true;
+            tile.querySourceFeatures(result, params);
+        }
+    }
+
+    return result;
+}
+
+function sortTilesIn(a, b) {
+    const idA = a.tileID;
+    const idB = b.tileID;
+    return (idA.overscaledZ - idB.overscaledZ) || (idA.canonical.y - idB.canonical.y) || (idA.wrap - idB.wrap) || (idA.canonical.x - idB.canonical.x);
+}
+
+function mergeRenderedFeatureLayers(tiles) {
+    // Merge results from all tiles, but if two tiles share the same
+    // wrapped ID, don't duplicate features between the two tiles
+    const result = {};
+    const wrappedIDLayerMap = {};
+    for (const tile of tiles) {
+        const queryResults = tile.queryResults;
+        const wrappedID = tile.wrappedTileID;
+        const wrappedIDLayers = wrappedIDLayerMap[wrappedID] = wrappedIDLayerMap[wrappedID] || {};
+        for (const layerID in queryResults) {
+            const tileFeatures = queryResults[layerID];
+            const wrappedIDFeatures = wrappedIDLayers[layerID] = wrappedIDLayers[layerID] || {};
+            const resultFeatures = result[layerID] = result[layerID] || [];
+            for (const tileFeature of tileFeatures) {
+                if (!wrappedIDFeatures[tileFeature.featureIndex]) {
+                    wrappedIDFeatures[tileFeature.featureIndex] = true;
+                    resultFeatures.push(tileFeature);
+                }
+            }
+        }
+    }
+    return result;
+}

package/src/source/raster_dem_tile_source.test.ts

@@ -0,0 +1,158 @@
+import {fakeServer, FakeServer} from 'nise';
+import {RasterDEMTileSource} from './raster_dem_tile_source';
+import {OverscaledTileID} from './tile_id';
+import {RequestManager} from '../util/request_manager';
+import {Tile} from './tile';
+import {waitForMetadataEvent} from '../util/test/util';
+
+function createSource(options, transformCallback?) {
+    const source = new RasterDEMTileSource('id', options, {} as any, 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', (e) => {
+        throw e.error;
+    });
+
+    return source;
+}
+
+describe('RasterDEMTileSource', () => {
+    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}.pngraw'],
+            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('transforms tile urls before requesting', 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 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.mock.calls[0][0]).toBe('http://example.com/10/5/5.png');
+        expect(transformSpy.mock.calls[0][1]).toBe('Tile');
+    });
+
+    test('populates neighboringTiles', async () => {
+        server.respondWith('/source.json', JSON.stringify({
+            minzoom: 0,
+            maxzoom: 22,
+            attribution: 'MapLibre',
+            tiles: ['http://example.com/{z}/{x}/{y}.png']
+        }));
+        const source = createSource({url: '/source.json'});
+        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(Object.keys(tile.neighboringTiles)).toEqual([
+            new OverscaledTileID(10, 0, 10, 4, 5).key,
+            new OverscaledTileID(10, 0, 10, 6, 5).key,
+            new OverscaledTileID(10, 0, 10, 4, 4).key,
+            new OverscaledTileID(10, 0, 10, 5, 4).key,
+            new OverscaledTileID(10, 0, 10, 6, 4).key,
+            new OverscaledTileID(10, 0, 10, 4, 6).key,
+            new OverscaledTileID(10, 0, 10, 5, 6).key,
+            new OverscaledTileID(10, 0, 10, 6, 6).key
+        ]);
+    });
+
+    test('populates neighboringTiles with wrapped tiles', async () => {
+        server.respondWith('/source.json', JSON.stringify({
+            minzoom: 0,
+            maxzoom: 22,
+            attribution: 'MapLibre',
+            tiles: ['http://example.com/{z}/{x}/{y}.png']
+        }));
+
+        const source = createSource({url: '/source.json'});
+        const promise = waitForMetadataEvent(source);
+
+        server.respond();
+        await promise;
+
+        const tile = {
+            tileID: new OverscaledTileID(5, 0, 5, 31, 5),
+            state: 'loading',
+            loadVectorData() {},
+            setExpiryData() {}
+        } as any as Tile;
+        source.loadTile(tile);
+
+        expect(Object.keys(tile.neighboringTiles)).toEqual([
+            new OverscaledTileID(5, 0, 5, 30, 6).key,
+            new OverscaledTileID(5, 0, 5, 31, 6).key,
+            new OverscaledTileID(5, 0, 5, 30, 5).key,
+            new OverscaledTileID(5, 1, 5, 0,  5).key,
+            new OverscaledTileID(5, 0, 5, 30, 4).key,
+            new OverscaledTileID(5, 0, 5, 31, 4).key,
+            new OverscaledTileID(5, 1, 5, 0,  4).key,
+            new OverscaledTileID(5, 1, 5, 0,  6).key
+        ]);
+    });
+
+    it('serializes options', () => {
+        const source = createSource({
+            tiles: ['http://localhost:2900/raster-dem/{z}/{x}/{y}.png'],
+            minzoom: 2,
+            maxzoom: 10
+        });
+        expect(source.serialize()).toStrictEqual({
+            type: 'raster-dem',
+            tiles: ['http://localhost:2900/raster-dem/{z}/{x}/{y}.png'],
+            minzoom: 2,
+            maxzoom: 10
+        });
+    });
+});