mapbox-gl 1.13.2

package/src/source/image_source.js

@@ -0,0 +1,307 @@
+// @flow
+
+import {CanonicalTileID} from './tile_id';
+import {Event, ErrorEvent, Evented} from '../util/evented';
+import {getImage, ResourceType} from '../util/ajax';
+import EXTENT from '../data/extent';
+import {RasterBoundsArray} from '../data/array_types';
+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 {Callback} from '../types/callback';
+import type VertexBuffer from '../gl/vertex_buffer';
+import type {
+    ImageSourceSpecification,
+    VideoSourceSpecification
+} from '../style-spec/types';
+
+type Coordinates = [[number, number], [number, number], [number, number], [number, number]];
+
+/**
+ * A data source containing an image.
+ * (See the [Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/#sources-image) for detailed documentation of options.)
+ *
+ * @example
+ * // add to map
+ * map.addSource('some id', {
+ *    type: 'image',
+ *    url: 'https://www.mapbox.com/images/foo.png',
+ *    coordinates: [
+ *        [-76.54, 39.18],
+ *        [-76.52, 39.18],
+ *        [-76.52, 39.17],
+ *        [-76.54, 39.17]
+ *    ]
+ * });
+ *
+ * // update coordinates
+ * var 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.mapbox.com/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
+ * @see [Add an image](https://www.mapbox.com/mapbox-gl-js/example/image-on-a-map/)
+ */
+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;
+
+    /**
+     * @private
+     */
+    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;
+    }
+
+    load(newCoordinates?: Coordinates, successCallback?: () => void) {
+        this._loaded = false;
+        this.fire(new Event('dataloading', {dataType: 'source'}));
+
+        this.url = this.options.url;
+
+        getImage(this.map._requestManager.transformRequest(this.url, ResourceType.Image), (err, image) => {
+            this._loaded = true;
+            if (err) {
+                this.fire(new ErrorEvent(err));
+            } else if (image) {
+                this.image = image;
+                if (newCoordinates) {
+                    this.coordinates = newCoordinates;
+                }
+                if (successCallback) {
+                    successCallback();
+                }
+                this._finishLoading();
+            }
+        });
+    }
+
+    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 {Object} options Options object.
+     * @param {string} [options.url] Required image URL.
+     * @param {Array<Array<number>>} [options.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.
+     * @returns {ImageSource} this
+     */
+    updateImage(options: {url: string, coordinates?: Coordinates}) {
+        if (!this.image || !options.url) {
+            return this;
+        }
+        this.options.url = options.url;
+        this.load(options.coordinates, () => { 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();
+    }
+
+    /**
+     * Sets the image's coordinates and re-renders the map.
+     *
+     * @param {Array<Array<number>>} 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.
+     * @returns {ImageSource} this
+     */
+    setCoordinates(coordinates: Coordinates) {
+        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);
+        }
+
+        for (const w in this.tiles) {
+            const tile = this.tiles[w];
+            if (tile.state !== 'loaded') {
+                tile.state = 'loaded';
+                tile.texture = this.texture;
+            }
+        }
+    }
+
+    loadTile(tile: Tile, callback: Callback<void>) {
+        // We have a single tile -- whoose 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 = {};
+            callback(null);
+        } else {
+            tile.state = 'errored';
+            callback(null);
+        }
+    }
+
+    serialize(): Object {
+        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
+ * @private
+ */
+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));
+}
+
+export default ImageSource;

package/src/source/load_tilejson.js

@@ -0,0 +1,39 @@
+// @flow
+
+import {pick, extend} from '../util/util';
+
+import {getJSON, ResourceType} from '../util/ajax';
+import browser from '../util/browser';
+
+import type {RequestManager} from '../util/mapbox';
+import type {Callback} from '../types/callback';
+import type {TileJSON} from '../types/tilejson';
+import type {Cancelable} from '../types/cancelable';
+
+export default function(options: any, requestManager: RequestManager, callback: Callback<TileJSON>): Cancelable {
+    const loaded = function(err: ?Error, tileJSON: ?Object) {
+        if (err) {
+            return callback(err);
+        } else if (tileJSON) {
+            const result: any = pick(
+                // explicit source options take precedence over TileJSON
+                extend(tileJSON, options),
+                ['tiles', 'minzoom', 'maxzoom', 'attribution', 'mapbox_logo', 'bounds', 'scheme', 'tileSize', 'encoding']
+            );
+
+            if (tileJSON.vector_layers) {
+                result.vectorLayers = tileJSON.vector_layers;
+                result.vectorLayerIds = result.vectorLayers.map((layer) => { return layer.id; });
+            }
+
+            result.tiles = requestManager.canonicalizeTileset(result, options.url);
+            callback(null, result);
+        }
+    };
+
+    if (options.url) {
+        return getJSON(requestManager.transformRequest(requestManager.normalizeSourceURL(options.url), ResourceType.Source), loaded);
+    } else {
+        return browser.frame(() => loaded(null, options));
+    }
+}

package/src/source/pixels_to_tile_units.js

@@ -0,0 +1,21 @@
+// @flow
+
+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
+ * @private
+ */
+export default function(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/query_features.js

@@ -0,0 +1,208 @@
+// @flow
+
+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 '../style-spec/types';
+import assert from 'assert';
+import {mat4} from 'gl-matrix';
+
+/*
+ * Returns a matrix that can be used to convert from tile coordinates to viewport pixel coordinates.
+ */
+function getPixelPosMatrix(transform, tileID) {
+    const t = mat4.identity([]);
+    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]: Object},
+                            queryGeometry: Array<Point>,
+                            params: { filter: FilterSpecification, layers: Array<string>, availableImages: Array<string> },
+                            transform: Transform) {
+
+    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;
+            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: { filter: FilterSpecification, layers: Array<string>, availableImages: Array<string> },
+                            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);
+                    assert(sortedA >= 0);
+                    assert(sortedB >= 0);
+                    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: any) {
+    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;
+}