@scoova/mgl 1.0.0

package/src/source/geojson_wrapper.test.ts

@@ -0,0 +1,32 @@
+import {GeoJSONWrapper} from './geojson_wrapper';
+
+describe('geojsonwrapper', () => {
+    test('linestring', () => {
+        const features = [{
+            type: 2,
+            geometry: [[[0, 0], [10, 10]]],
+            tags: {hello: 'world'}
+        }];
+
+        const wrap = new GeoJSONWrapper(features as any);
+        const feature = wrap.feature(0);
+
+        expect(feature).toBeTruthy();
+        expect(feature.loadGeometry()).toEqual([[{x: 0, y: 0}, {x: 10, y: 10}]]);
+        expect(feature.type).toBe(2);
+        expect(feature.properties).toEqual({hello: 'world'});
+
+    });
+
+    test('point', () => {
+        const features = [{
+            type: 1,
+            geometry: [[0, 1]],
+            tags: {}
+        }];
+
+        const wrap = new GeoJSONWrapper(features as any);
+        const feature = wrap.feature(0);
+        expect(feature.loadGeometry()).toEqual([[{x: 0, y: 1}]]);
+    });
+});

package/src/source/geojson_wrapper.ts

@@ -0,0 +1,81 @@
+import Point from '@mapbox/point-geometry';
+
+import mvt from '@mapbox/vector-tile';
+import type {VectorTileFeature, VectorTileLayer, VectorTile} from '@mapbox/vector-tile';
+const toGeoJSON = mvt.VectorTileFeature.prototype.toGeoJSON;
+import {EXTENT} from '../data/extent';
+import type {TileFeature, AnyProps} from 'supercluster';
+import type {Feature as GeoJSONVTFeature} from 'geojson-vt';
+
+export type Feature = TileFeature<AnyProps, AnyProps> | GeoJSONVTFeature;
+
+class FeatureWrapper implements VectorTileFeature {
+    _feature: Feature;
+
+    extent: number;
+    type: Feature['type'];
+    id: number;
+    properties: {[_: string]: string | number | boolean};
+
+    constructor(feature: Feature) {
+        this._feature = feature;
+
+        this.extent = EXTENT;
+        this.type = feature.type;
+        this.properties = feature.tags;
+
+        // If the feature has a top-level `id` property, copy it over, but only
+        // if it can be coerced to an integer, because this wrapper is used for
+        // serializing geojson feature data into vector tile PBF data, and the
+        // vector tile spec only supports integer values for feature ids --
+        // allowing non-integer values here results in a non-compliant PBF
+        // that causes an exception when it is parsed with vector-tile-js
+        if ('id' in feature && !isNaN(feature.id as any)) {
+            this.id = parseInt(feature.id, 10);
+        }
+    }
+
+    loadGeometry() {
+        if (this._feature.type === 1) {
+            const geometry = [];
+            for (const point of this._feature.geometry) {
+                geometry.push([new Point(point[0], point[1])]);
+            }
+            return geometry;
+        } else {
+            const geometry = [];
+            for (const ring of this._feature.geometry) {
+                const newRing = [];
+                for (const point of ring) {
+                    newRing.push(new Point(point[0], point[1]));
+                }
+                geometry.push(newRing);
+            }
+            return geometry;
+        }
+    }
+
+    toGeoJSON(x: number, y: number, z: number) {
+        return toGeoJSON.call(this, x, y, z);
+    }
+}
+
+export class GeoJSONWrapper implements VectorTile, VectorTileLayer {
+    layers: {[_: string]: VectorTileLayer};
+    name: string;
+    extent: number;
+    length: number;
+    _features: Array<Feature>;
+
+    constructor(features: Array<Feature>) {
+        this.layers = {'_geojsonTileLayer': this};
+        this.name = '_geojsonTileLayer';
+        this.extent = EXTENT;
+        this.length = features.length;
+        this._features = features;
+    }
+
+    feature(i: number): VectorTileFeature {
+        return new FeatureWrapper(this._features[i]);
+    }
+}

package/src/source/image_source.test.ts

@@ -0,0 +1,235 @@
+import {ImageSource} from './image_source';
+import {Evented} from '../util/evented';
+import {Transform} from '../geo/transform';
+import {extend} from '../util/util';
+import {type FakeServer, fakeServer} from 'nise';
+import {RequestManager} from '../util/request_manager';
+import {sleep, stubAjaxGetImage} from '../util/test/util';
+import {Tile} from './tile';
+import {OverscaledTileID} from './tile_id';
+import {VertexBuffer} from '../gl/vertex_buffer';
+import {SegmentVector} from '../data/segment';
+import {Texture} from '../render/texture';
+import type {ImageSourceSpecification} from '@maplibre/maplibre-gl-style-spec';
+
+function createSource(options) {
+    options = extend({
+        coordinates: [[0, 0], [1, 0], [1, 1], [0, 1]]
+    }, options);
+
+    const source = new ImageSource('id', options, {} as any, options.eventedParent);
+    return source;
+}
+
+class StubMap extends Evented {
+    transform: Transform;
+    painter: any;
+    _requestManager: RequestManager;
+
+    constructor() {
+        super();
+        this.transform = new Transform();
+        this._requestManager = {
+            transformRequest: (url) => {
+                return {url};
+            }
+        } as any as RequestManager;
+        this.painter = {
+            context: {
+                gl: {}
+            }
+        };
+    }
+}
+
+describe('ImageSource', () => {
+    stubAjaxGetImage(undefined);
+    let server: FakeServer;
+
+    beforeEach(() => {
+        global.fetch = null;
+        server = fakeServer.create();
+        server.respondWith(new ArrayBuffer(1));
+        server.respondWith('/missing-image.png', [404, {}, '']);
+    });
+
+    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', async () => {
+        const source = createSource({url: '/image.png'});
+        source.on('dataloading', (e) => {
+            expect(e.dataType).toBe('source');
+        });
+        source.onAdd(new StubMap() as any);
+        server.respond();
+        await sleep(0);
+        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);
+        server.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);
+        server.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'});
+        server.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);
+        server.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', async () => {
+        const source = createSource({url: '/image.png'});
+        const map = new StubMap() as any;
+        source.onAdd(map);
+        server.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]]
+        });
+        server.respond();
+        await sleep(0);
+        const afterSerialized = source.serialize();
+        expect(afterSerialized.coordinates).toEqual([[0, 0], [-1, 0], [-1, -1], [0, -1]]);
+    });
+
+    test('fires data event when content is loaded', () => new Promise<void>(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);
+        server.respond();
+    }));
+
+    test('fires data event when metadata is loaded', () => new Promise<void>(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);
+        server.respond();
+    }));
+
+    test('fires idle event on prepare call when there is at least one not loaded tile', () => new Promise<void>(done => {
+        const source = createSource({url: '/image.png'});
+        const tile = new Tile(new OverscaledTileID(1, 0, 1, 0, 0), 512);
+        source.on('data', (e) => {
+            if (e.dataType === 'source' && e.sourceDataType === 'idle') {
+                expect(tile.state).toBe('loaded');
+                done();
+            }
+        });
+        source.onAdd(new StubMap() as any);
+        server.respond();
+
+        source.tiles[String(tile.tileID.wrap)] = tile;
+        source.image = new ImageBitmap();
+        // assign dummies directly so we don't need to stub the gl things
+        source.boundsBuffer = {destroy: () => {}} as VertexBuffer;
+        source.boundsSegments = {} as SegmentVector;
+        source.texture = {} as Texture;
+        source.prepare();
+    }));
+
+    test('serialize url and coordinates', () => {
+        const source = createSource({url: '/image.png'});
+
+        const serialized = source.serialize() as ImageSourceSpecification;
+        expect(serialized.type).toBe('image');
+        expect(serialized.url).toBe('/image.png');
+        expect(serialized.coordinates).toEqual([[0, 0], [1, 0], [1, 1], [0, 1]]);
+    });
+
+    test('allows using updateImage before initial image is loaded', async () => {
+        const map = new StubMap() as any;
+        const source = createSource({url: '/image.png', eventedParent: map});
+
+        // Suppress errors because we're aborting when updating.
+        map.on('error', () => {});
+        source.onAdd(map);
+        expect(source.image).toBeUndefined();
+        source.updateImage({url: '/image2.png'});
+        server.respond();
+        await sleep(10);
+
+        expect(source.image).toBeTruthy();
+    });
+
+    test('cancels request if updateImage is used', () => {
+        const map = new StubMap() as any;
+        const source = createSource({url: '/image.png', eventedParent: map});
+
+        // Suppress errors because we're aborting.
+        map.on('error', () => {});
+        source.onAdd(map);
+
+        const spy = jest.spyOn(server.requests[0] as any, 'abort');
+
+        source.updateImage({url: '/image2.png'});
+        expect(spy).toHaveBeenCalled();
+    });
+
+    test('marks the source as loaded when the request has received a response', async () => {
+        const map = new StubMap() as any;
+        const source = createSource({url: '/image.png', eventedParent: map});
+
+        expect(source.loaded()).toBe(false);
+        source.onAdd(map);
+        server.respond();
+        await sleep(0);
+        expect(source.loaded()).toBe(true);
+
+        const missingImagesource = createSource({url: '/missing-image.png', eventedParent: map});
+
+        // Suppress errors as we're loading a missing image.
+        map.on('error', () => {});
+
+        expect(missingImagesource.loaded()).toBe(false);
+        missingImagesource.onAdd(map);
+        server.respond();
+        await sleep(0);
+
+        expect(missingImagesource.loaded()).toBe(true);
+    });
+});

package/src/source/image_source.ts

@@ -0,0 +1,338 @@
+import {CanonicalTileID} from './tile_id';
+import {Event, ErrorEvent, Evented} from '../util/evented';
+import {ImageRequest} from '../util/image_request';
+import {ResourceType} from '../util/request_manager';
+import {EXTENT} from '../data/extent';
+import {RasterBoundsArray} from '../data/array_types.g';
+import rasterBoundsAttributes from '../data/raster_bounds_attributes';
+import {SegmentVector} from '../data/segment';
+import {Texture} from '../render/texture';
+import {MercatorCoordinate} from '../geo/mercator_coordinate';
+
+import type {Source} from './source';
+import type {CanvasSourceSpecification} from './canvas_source';
+import type {Map} from '../ui/map';
+import type {Dispatcher} from '../util/dispatcher';
+import type {Tile} from './tile';
+import type {VertexBuffer} from '../gl/vertex_buffer';
+import type {
+    ImageSourceSpecification,
+    VideoSourceSpecification
+} from '@maplibre/maplibre-gl-style-spec';
+
+/**
+ * Four geographical coordinates,
+ * represented as arrays of longitude and latitude numbers, which define the corners of the image.
+ * The coordinates start at the top left corner of the image and proceed in clockwise order.
+ * They do not have to represent a rectangle.
+ */
+export type Coordinates = [[number, number], [number, number], [number, number], [number, number]];
+
+/**
+ * The options object for the {@link ImageSource#updateImage} method
+ */
+export type UpdateImageOptions = {
+    /**
+     * Required image URL.
+     */
+    url: string;
+    /**
+     * The image coordinates
+     */
+    coordinates?: Coordinates;
+}
+
+/**
+ * A data source containing an image.
+ * (See the [Style Specification](https://maplibre.org/maplibre-style-spec/#sources-image) for detailed documentation of options.)
+ *
+ * @group Sources
+ *
+ * @example
+ * ```ts
+ * // add to map
+ * map.addSource('some id', {
+ *    type: 'image',
+ *    url: 'https://www.maplibre.org/images/foo.png',
+ *    coordinates: [
+ *        [-76.54, 39.18],
+ *        [-76.52, 39.18],
+ *        [-76.52, 39.17],
+ *        [-76.54, 39.17]
+ *    ]
+ * });
+ *
+ * // update coordinates
+ * let mySource = map.getSource('some id');
+ * mySource.setCoordinates([
+ *     [-76.54335737228394, 39.18579907229748],
+ *     [-76.52803659439087, 39.1838364847587],
+ *     [-76.5295386314392, 39.17683392507606],
+ *     [-76.54520273208618, 39.17876344106642]
+ * ]);
+ *
+ * // update url and coordinates simultaneously
+ * mySource.updateImage({
+ *    url: 'https://www.maplibre.org/images/bar.png',
+ *    coordinates: [
+ *        [-76.54335737228394, 39.18579907229748],
+ *        [-76.52803659439087, 39.1838364847587],
+ *        [-76.5295386314392, 39.17683392507606],
+ *        [-76.54520273208618, 39.17876344106642]
+ *    ]
+ * })
+ *
+ * map.removeSource('some id');  // remove
+ * ```
+ */
+export class ImageSource extends Evented implements Source {
+    type: string;
+    id: string;
+    minzoom: number;
+    maxzoom: number;
+    tileSize: number;
+    url: string;
+
+    coordinates: Coordinates;
+    tiles: {[_: string]: Tile};
+    options: any;
+    dispatcher: Dispatcher;
+    map: Map;
+    texture: Texture | null;
+    image: HTMLImageElement | ImageBitmap;
+    tileID: CanonicalTileID;
+    _boundsArray: RasterBoundsArray;
+    boundsBuffer: VertexBuffer;
+    boundsSegments: SegmentVector;
+    _loaded: boolean;
+    _request: AbortController;
+
+    /** @internal */
+    constructor(id: string, options: ImageSourceSpecification | VideoSourceSpecification | CanvasSourceSpecification, dispatcher: Dispatcher, eventedParent: Evented) {
+        super();
+        this.id = id;
+        this.dispatcher = dispatcher;
+        this.coordinates = options.coordinates;
+
+        this.type = 'image';
+        this.minzoom = 0;
+        this.maxzoom = 22;
+        this.tileSize = 512;
+        this.tiles = {};
+        this._loaded = false;
+
+        this.setEventedParent(eventedParent);
+
+        this.options = options;
+    }
+
+    async load(newCoordinates?: Coordinates): Promise<void> {
+        this._loaded = false;
+        this.fire(new Event('dataloading', {dataType: 'source'}));
+
+        this.url = this.options.url;
+
+        this._request = new AbortController();
+        try {
+            const image = await ImageRequest.getImage(this.map._requestManager.transformRequest(this.url, ResourceType.Image), this._request);
+            this._request = null;
+            this._loaded = true;
+
+            if (image && image.data) {
+                this.image = image.data;
+                if (newCoordinates) {
+                    this.coordinates = newCoordinates;
+                }
+                this._finishLoading();
+            }
+        } catch (err) {
+            this._request = null;
+            this._loaded = true;
+            this.fire(new ErrorEvent(err));
+        }
+    }
+
+    loaded(): boolean {
+        return this._loaded;
+    }
+
+    /**
+     * Updates the image URL and, optionally, the coordinates. To avoid having the image flash after changing,
+     * set the `raster-fade-duration` paint property on the raster layer to 0.
+     *
+     * @param options - The options object.
+     */
+    updateImage(options: UpdateImageOptions): this {
+        if (!options.url) {
+            return this;
+        }
+
+        if (this._request) {
+            this._request.abort();
+            this._request = null;
+        }
+
+        this.options.url = options.url;
+        this.load(options.coordinates).finally(() => { this.texture = null; });
+        return this;
+    }
+
+    _finishLoading() {
+        if (this.map) {
+            this.setCoordinates(this.coordinates);
+            this.fire(new Event('data', {dataType: 'source', sourceDataType: 'metadata'}));
+        }
+    }
+
+    onAdd(map: Map) {
+        this.map = map;
+        this.load();
+    }
+
+    onRemove() {
+        if (this._request) {
+            this._request.abort();
+            this._request = null;
+        }
+    }
+
+    /**
+     * Sets the image's coordinates and re-renders the map.
+     *
+     * @param coordinates - Four geographical coordinates,
+     * represented as arrays of longitude and latitude numbers, which define the corners of the image.
+     * The coordinates start at the top left corner of the image and proceed in clockwise order.
+     * They do not have to represent a rectangle.
+     */
+    setCoordinates(coordinates: Coordinates): this {
+        this.coordinates = coordinates;
+
+        // Calculate which mercator tile is suitable for rendering the video in
+        // and create a buffer with the corner coordinates. These coordinates
+        // may be outside the tile, because raster tiles aren't clipped when rendering.
+
+        // transform the geo coordinates into (zoom 0) tile space coordinates
+        const cornerCoords = coordinates.map(MercatorCoordinate.fromLngLat);
+
+        // Compute the coordinates of the tile we'll use to hold this image's
+        // render data
+        this.tileID = getCoordinatesCenterTileID(cornerCoords);
+
+        // Constrain min/max zoom to our tile's zoom level in order to force
+        // SourceCache to request this tile (no matter what the map's zoom
+        // level)
+        this.minzoom = this.maxzoom = this.tileID.z;
+
+        // Transform the corner coordinates into the coordinate space of our
+        // tile.
+        const tileCoords = cornerCoords.map((coord) => this.tileID.getTilePoint(coord)._round());
+
+        this._boundsArray = new RasterBoundsArray();
+        this._boundsArray.emplaceBack(tileCoords[0].x, tileCoords[0].y, 0, 0);
+        this._boundsArray.emplaceBack(tileCoords[1].x, tileCoords[1].y, EXTENT, 0);
+        this._boundsArray.emplaceBack(tileCoords[3].x, tileCoords[3].y, 0, EXTENT);
+        this._boundsArray.emplaceBack(tileCoords[2].x, tileCoords[2].y, EXTENT, EXTENT);
+
+        if (this.boundsBuffer) {
+            this.boundsBuffer.destroy();
+            delete this.boundsBuffer;
+        }
+
+        this.fire(new Event('data', {dataType: 'source', sourceDataType: 'content'}));
+        return this;
+    }
+
+    prepare() {
+        if (Object.keys(this.tiles).length === 0 || !this.image) {
+            return;
+        }
+
+        const context = this.map.painter.context;
+        const gl = context.gl;
+
+        if (!this.boundsBuffer) {
+            this.boundsBuffer = context.createVertexBuffer(this._boundsArray, rasterBoundsAttributes.members);
+        }
+
+        if (!this.boundsSegments) {
+            this.boundsSegments = SegmentVector.simpleSegment(0, 0, 4, 2);
+        }
+
+        if (!this.texture) {
+            this.texture = new Texture(context, this.image, gl.RGBA);
+            this.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+        }
+
+        let newTilesLoaded = false;
+        for (const w in this.tiles) {
+            const tile = this.tiles[w];
+            if (tile.state !== 'loaded') {
+                tile.state = 'loaded';
+                tile.texture = this.texture;
+                newTilesLoaded = true;
+            }
+        }
+
+        if (newTilesLoaded) {
+            this.fire(new Event('data', {dataType: 'source', sourceDataType: 'idle', sourceId: this.id}));
+        }
+    }
+
+    async loadTile(tile: Tile): Promise<void> {
+        // We have a single tile -- whose coordinates are this.tileID -- that
+        // covers the image we want to render.  If that's the one being
+        // requested, set it up with the image; otherwise, mark the tile as
+        // `errored` to indicate that we have no data for it.
+        // If the world wraps, we may have multiple "wrapped" copies of the
+        // single tile.
+        if (this.tileID && this.tileID.equals(tile.tileID.canonical)) {
+            this.tiles[String(tile.tileID.wrap)] = tile;
+            tile.buckets = {};
+        } else {
+            tile.state = 'errored';
+        }
+    }
+
+    serialize(): ImageSourceSpecification | VideoSourceSpecification | CanvasSourceSpecification {
+        return {
+            type: 'image',
+            url: this.options.url,
+            coordinates: this.coordinates
+        };
+    }
+
+    hasTransition() {
+        return false;
+    }
+}
+
+/**
+ * Given a list of coordinates, get their center as a coordinate.
+ *
+ * @returns centerpoint
+ * @internal
+ */
+export function getCoordinatesCenterTileID(coords: Array<MercatorCoordinate>) {
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+
+    for (const coord of coords) {
+        minX = Math.min(minX, coord.x);
+        minY = Math.min(minY, coord.y);
+        maxX = Math.max(maxX, coord.x);
+        maxY = Math.max(maxY, coord.y);
+    }
+
+    const dx = maxX - minX;
+    const dy = maxY - minY;
+    const dMax = Math.max(dx, dy);
+    const zoom = Math.max(0, Math.floor(-Math.log(dMax) / Math.LN2));
+    const tilesAtZoom = Math.pow(2, zoom);
+
+    return new CanonicalTileID(
+        zoom,
+        Math.floor((minX + maxX) / 2 * tilesAtZoom),
+        Math.floor((minY + maxY) / 2 * tilesAtZoom));
+}