mapbox-gl 1.13.2

package/src/source/tile_cache.js

@@ -0,0 +1,212 @@
+// @flow
+
+import {OverscaledTileID} from './tile_id';
+import type Tile from './tile';
+
+/**
+ * A [least-recently-used cache](http://en.wikipedia.org/wiki/Cache_algorithms)
+ * with hash lookup made possible by keeping a list of keys in parallel to
+ * an array of dictionary of values
+ *
+ * @private
+ */
+class TileCache {
+    max: number;
+    data: {[key: string]: Array<{ value: Tile, timeout: ?TimeoutID}>};
+    order: Array<string>;
+    onRemove: (element: Tile) => void;
+    /**
+     * @param {number} max number of permitted values
+     * @param {Function} onRemove callback called with items when they expire
+     */
+    constructor(max: number, onRemove: (element: Tile) => void) {
+        this.max = max;
+        this.onRemove = onRemove;
+        this.reset();
+    }
+
+    /**
+     * Clear the cache
+     *
+     * @returns {TileCache} this cache
+     * @private
+     */
+    reset() {
+        for (const key in this.data) {
+            for (const removedData of this.data[key]) {
+                if (removedData.timeout) clearTimeout(removedData.timeout);
+                this.onRemove(removedData.value);
+            }
+        }
+
+        this.data = {};
+        this.order = [];
+
+        return this;
+    }
+
+    /**
+     * Add a key, value combination to the cache, trimming its size if this pushes
+     * it over max length.
+     *
+     * @param {OverscaledTileID} tileID lookup key for the item
+     * @param {*} data any value
+     *
+     * @returns {TileCache} this cache
+     * @private
+     */
+    add(tileID: OverscaledTileID, data: Tile, expiryTimeout: number | void) {
+        const key = tileID.wrapped().key;
+        if (this.data[key] === undefined) {
+            this.data[key] = [];
+        }
+
+        const dataWrapper = {
+            value: data,
+            timeout: undefined
+        };
+
+        if (expiryTimeout !== undefined) {
+            dataWrapper.timeout = setTimeout(() => {
+                this.remove(tileID, dataWrapper);
+            }, expiryTimeout);
+        }
+
+        this.data[key].push(dataWrapper);
+        this.order.push(key);
+
+        if (this.order.length > this.max) {
+            const removedData = this._getAndRemoveByKey(this.order[0]);
+            if (removedData) this.onRemove(removedData);
+        }
+
+        return this;
+    }
+
+    /**
+     * Determine whether the value attached to `key` is present
+     *
+     * @param {OverscaledTileID} tileID the key to be looked-up
+     * @returns {boolean} whether the cache has this value
+     * @private
+     */
+    has(tileID: OverscaledTileID): boolean {
+        return tileID.wrapped().key in this.data;
+    }
+
+    /**
+     * Get the value attached to a specific key and remove data from cache.
+     * If the key is not found, returns `null`
+     *
+     * @param {OverscaledTileID} tileID the key to look up
+     * @returns {*} the data, or null if it isn't found
+     * @private
+     */
+    getAndRemove(tileID: OverscaledTileID): ?Tile {
+        if (!this.has(tileID)) { return null; }
+        return this._getAndRemoveByKey(tileID.wrapped().key);
+    }
+
+    /*
+     * Get and remove the value with the specified key.
+     */
+    _getAndRemoveByKey(key: string): ?Tile {
+        const data = this.data[key].shift();
+        if (data.timeout) clearTimeout(data.timeout);
+
+        if (this.data[key].length === 0) {
+            delete this.data[key];
+        }
+        this.order.splice(this.order.indexOf(key), 1);
+
+        return data.value;
+    }
+
+    /*
+     * Get the value with the specified (wrapped tile) key.
+     */
+    getByKey(key: string): ?Tile {
+        const data = this.data[key];
+        return data ? data[0].value : null;
+    }
+
+    /**
+     * Get the value attached to a specific key without removing data
+     * from the cache. If the key is not found, returns `null`
+     *
+     * @param {OverscaledTileID} tileID the key to look up
+     * @returns {*} the data, or null if it isn't found
+     * @private
+     */
+    get(tileID: OverscaledTileID): ?Tile {
+        if (!this.has(tileID)) { return null; }
+
+        const data = this.data[tileID.wrapped().key][0];
+        return data.value;
+    }
+
+    /**
+     * Remove a key/value combination from the cache.
+     *
+     * @param {OverscaledTileID} tileID the key for the pair to delete
+     * @param {Tile} value If a value is provided, remove that exact version of the value.
+     * @returns {TileCache} this cache
+     * @private
+     */
+    remove(tileID: OverscaledTileID, value: ?{ value: Tile, timeout: ?TimeoutID}) {
+        if (!this.has(tileID)) { return this; }
+        const key = tileID.wrapped().key;
+
+        const dataIndex = value === undefined ? 0 : this.data[key].indexOf(value);
+        const data = this.data[key][dataIndex];
+        this.data[key].splice(dataIndex, 1);
+        if (data.timeout) clearTimeout(data.timeout);
+        if (this.data[key].length === 0) {
+            delete this.data[key];
+        }
+        this.onRemove(data.value);
+        this.order.splice(this.order.indexOf(key), 1);
+
+        return this;
+    }
+
+    /**
+     * Change the max size of the cache.
+     *
+     * @param {number} max the max size of the cache
+     * @returns {TileCache} this cache
+     * @private
+     */
+    setMaxSize(max: number): TileCache {
+        this.max = max;
+
+        while (this.order.length > this.max) {
+            const removedData = this._getAndRemoveByKey(this.order[0]);
+            if (removedData) this.onRemove(removedData);
+        }
+
+        return this;
+    }
+
+    /**
+     * Remove entries that do not pass a filter function. Used for removing
+     * stale tiles from the cache.
+     *
+     * @param {function} filterFn Determines whether the tile is filtered. If the supplied function returns false, the tile will be filtered out.
+     */
+    filter(filterFn: (tile: Tile) => boolean) {
+        const removed = [];
+        for (const key in this.data) {
+            for (const entry of this.data[key]) {
+                if (!filterFn(entry.value)) {
+                    removed.push(entry);
+                }
+            }
+        }
+        for (const r of removed) {
+            this.remove(r.value.tileID, r);
+        }
+    }
+}
+
+export default TileCache;

package/src/source/tile_id.js

@@ -0,0 +1,199 @@
+// @flow
+
+import {getTileBBox} from '@mapbox/whoots-js';
+import EXTENT from '../data/extent';
+import Point from '@mapbox/point-geometry';
+import MercatorCoordinate from '../geo/mercator_coordinate';
+
+import assert from 'assert';
+import {register} from '../util/web_worker_transfer';
+
+export class CanonicalTileID {
+    z: number;
+    x: number;
+    y: number;
+    key: string;
+
+    constructor(z: number, x: number, y: number) {
+        assert(z >= 0 && z <= 25);
+        assert(x >= 0 && x < Math.pow(2, z));
+        assert(y >= 0 && y < Math.pow(2, z));
+        this.z = z;
+        this.x = x;
+        this.y = y;
+        this.key = calculateKey(0, z, z, x, y);
+    }
+
+    equals(id: CanonicalTileID) {
+        return this.z === id.z && this.x === id.x && this.y === id.y;
+    }
+
+    // given a list of urls, choose a url template and return a tile URL
+    url(urls: Array<string>, scheme: ?string) {
+        const bbox = getTileBBox(this.x, this.y, this.z);
+        const quadkey = getQuadkey(this.z, this.x, this.y);
+
+        return urls[(this.x + this.y) % urls.length]
+            .replace('{prefix}', (this.x % 16).toString(16) + (this.y % 16).toString(16))
+            .replace('{z}', String(this.z))
+            .replace('{x}', String(this.x))
+            .replace('{y}', String(scheme === 'tms' ? (Math.pow(2, this.z) - this.y - 1) : this.y))
+            .replace('{quadkey}', quadkey)
+            .replace('{bbox-epsg-3857}', bbox);
+    }
+
+    getTilePoint(coord: MercatorCoordinate) {
+        const tilesAtZoom = Math.pow(2, this.z);
+        return new Point(
+            (coord.x * tilesAtZoom - this.x) * EXTENT,
+            (coord.y * tilesAtZoom - this.y) * EXTENT);
+    }
+
+    toString() {
+        return `${this.z}/${this.x}/${this.y}`;
+    }
+}
+
+export class UnwrappedTileID {
+    wrap: number;
+    canonical: CanonicalTileID;
+    key: string;
+
+    constructor(wrap: number, canonical: CanonicalTileID) {
+        this.wrap = wrap;
+        this.canonical = canonical;
+        this.key = calculateKey(wrap, canonical.z, canonical.z, canonical.x, canonical.y);
+    }
+}
+
+export class OverscaledTileID {
+    overscaledZ: number;
+    wrap: number;
+    canonical: CanonicalTileID;
+    key: string;
+    posMatrix: Float32Array;
+
+    constructor(overscaledZ: number, wrap: number, z: number, x: number, y: number) {
+        assert(overscaledZ >= z);
+        this.overscaledZ = overscaledZ;
+        this.wrap = wrap;
+        this.canonical = new CanonicalTileID(z, +x, +y);
+        this.key = calculateKey(wrap, overscaledZ, z, x, y);
+    }
+
+    equals(id: OverscaledTileID) {
+        return this.overscaledZ === id.overscaledZ && this.wrap === id.wrap && this.canonical.equals(id.canonical);
+    }
+
+    scaledTo(targetZ: number) {
+        assert(targetZ <= this.overscaledZ);
+        const zDifference = this.canonical.z - targetZ;
+        if (targetZ > this.canonical.z) {
+            return new OverscaledTileID(targetZ, this.wrap, this.canonical.z, this.canonical.x, this.canonical.y);
+        } else {
+            return new OverscaledTileID(targetZ, this.wrap, targetZ, this.canonical.x >> zDifference, this.canonical.y >> zDifference);
+        }
+    }
+
+    /*
+     * calculateScaledKey is an optimization:
+     * when withWrap == true, implements the same as this.scaledTo(z).key,
+     * when withWrap == false, implements the same as this.scaledTo(z).wrapped().key.
+     */
+    calculateScaledKey(targetZ: number, withWrap: boolean): string {
+        assert(targetZ <= this.overscaledZ);
+        const zDifference = this.canonical.z - targetZ;
+        if (targetZ > this.canonical.z) {
+            return calculateKey(this.wrap * +withWrap, targetZ, this.canonical.z, this.canonical.x, this.canonical.y);
+        } else {
+            return calculateKey(this.wrap * +withWrap, targetZ, targetZ, this.canonical.x >> zDifference, this.canonical.y >> zDifference);
+        }
+    }
+
+    isChildOf(parent: OverscaledTileID) {
+        if (parent.wrap !== this.wrap) {
+            // We can't be a child if we're in a different world copy
+            return false;
+        }
+        const zDifference = this.canonical.z - parent.canonical.z;
+        // We're first testing for z == 0, to avoid a 32 bit shift, which is undefined.
+        return parent.overscaledZ === 0 || (
+            parent.overscaledZ < this.overscaledZ &&
+                parent.canonical.x === (this.canonical.x >> zDifference) &&
+                parent.canonical.y === (this.canonical.y >> zDifference));
+    }
+
+    children(sourceMaxZoom: number) {
+        if (this.overscaledZ >= sourceMaxZoom) {
+            // return a single tile coord representing a an overscaled tile
+            return [new OverscaledTileID(this.overscaledZ + 1, this.wrap, this.canonical.z, this.canonical.x, this.canonical.y)];
+        }
+
+        const z = this.canonical.z + 1;
+        const x = this.canonical.x * 2;
+        const y = this.canonical.y * 2;
+        return [
+            new OverscaledTileID(z, this.wrap, z, x, y),
+            new OverscaledTileID(z, this.wrap, z, x + 1, y),
+            new OverscaledTileID(z, this.wrap, z, x, y + 1),
+            new OverscaledTileID(z, this.wrap, z, x + 1, y + 1)
+        ];
+    }
+
+    isLessThan(rhs: OverscaledTileID) {
+        if (this.wrap < rhs.wrap) return true;
+        if (this.wrap > rhs.wrap) return false;
+
+        if (this.overscaledZ < rhs.overscaledZ) return true;
+        if (this.overscaledZ > rhs.overscaledZ) return false;
+
+        if (this.canonical.x < rhs.canonical.x) return true;
+        if (this.canonical.x > rhs.canonical.x) return false;
+
+        if (this.canonical.y < rhs.canonical.y) return true;
+        return false;
+    }
+
+    wrapped() {
+        return new OverscaledTileID(this.overscaledZ, 0, this.canonical.z, this.canonical.x, this.canonical.y);
+    }
+
+    unwrapTo(wrap: number) {
+        return new OverscaledTileID(this.overscaledZ, wrap, this.canonical.z, this.canonical.x, this.canonical.y);
+    }
+
+    overscaleFactor() {
+        return Math.pow(2, this.overscaledZ - this.canonical.z);
+    }
+
+    toUnwrapped() {
+        return new UnwrappedTileID(this.wrap, this.canonical);
+    }
+
+    toString() {
+        return `${this.overscaledZ}/${this.canonical.x}/${this.canonical.y}`;
+    }
+
+    getTilePoint(coord: MercatorCoordinate) {
+        return this.canonical.getTilePoint(new MercatorCoordinate(coord.x - this.wrap, coord.y));
+    }
+}
+
+function calculateKey(wrap: number, overscaledZ: number, z: number, x: number, y: number): string {
+    wrap *= 2;
+    if (wrap < 0) wrap = wrap * -1 - 1;
+    const dim = 1 << z;
+    return (dim * dim * wrap + dim * y + x).toString(36) + z.toString(36) + overscaledZ.toString(36);
+}
+
+function getQuadkey(z, x, y) {
+    let quadkey = '', mask;
+    for (let i = z; i > 0; i--) {
+        mask = 1 << (i - 1);
+        quadkey += ((x & mask ? 1 : 0) + (y & mask ? 2 : 0));
+    }
+    return quadkey;
+}
+
+register('CanonicalTileID', CanonicalTileID);
+register('OverscaledTileID', OverscaledTileID, {omit: ['posMatrix']});

package/src/source/vector_tile_source.js

@@ -0,0 +1,259 @@
+// @flow
+
+import {Event, ErrorEvent, Evented} from '../util/evented';
+
+import {extend, pick} from '../util/util';
+import loadTileJSON from './load_tilejson';
+import {postTurnstileEvent, postMapLoadEvent} from '../util/mapbox';
+import TileBounds from './tile_bounds';
+import {ResourceType} from '../util/ajax';
+import browser from '../util/browser';
+import {cacheEntryPossiblyAdded} from '../util/tile_request_cache';
+
+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 {Callback} from '../types/callback';
+import type {Cancelable} from '../types/cancelable';
+import type {VectorSourceSpecification, PromoteIdSpecification} from '../style-spec/types';
+
+/**
+ * A source containing vector tiles in [Mapbox Vector Tile format](https://docs.mapbox.com/vector-tiles/reference/).
+ * (See the [Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/sources/#vector) for detailed documentation of options.)
+ *
+ * @example
+ * map.addSource('some id', {
+ *     type: 'vector',
+ *     url: 'mapbox://mapbox.mapbox-streets-v6'
+ * });
+ *
+ * @example
+ * map.addSource('some id', {
+ *     type: 'vector',
+ *     tiles: ['https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt'],
+ *     minzoom: 6,
+ *     maxzoom: 14
+ * });
+ *
+ * @example
+ * map.getSource('some id').setUrl("mapbox://mapbox.mapbox-streets-v6");
+ *
+ * @example
+ * map.getSource('some id').setTiles(['https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt']);
+ * @see [Add a vector tile source](https://docs.mapbox.com/mapbox-gl-js/example/vector-source/)
+ * @see [Add a third party vector tile source](https://docs.mapbox.com/mapbox-gl-js/example/third-party/)
+ */
+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: ?Cancelable;
+    _loaded: boolean;
+
+    constructor(id: string, options: VectorSourceSpecification & {collectResourceTiming: boolean}, 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);
+    }
+
+    load() {
+        this._loaded = false;
+        this.fire(new Event('dataloading', {dataType: 'source'}));
+        this._tileJSONRequest = loadTileJSON(this._options, this.map._requestManager, (err, tileJSON) => {
+            this._tileJSONRequest = null;
+            this._loaded = true;
+            if (err) {
+                this.fire(new ErrorEvent(err));
+            } else if (tileJSON) {
+                extend(this, tileJSON);
+                if (tileJSON.bounds) this.tileBounds = new TileBounds(tileJSON.bounds, this.minzoom, this.maxzoom);
+                postTurnstileEvent(tileJSON.tiles, this.map._requestManager._customAccessToken);
+                postMapLoadEvent(tileJSON.tiles, this.map._getMapId(), this.map._requestManager._skuToken, this.map._requestManager._customAccessToken);
+
+                // `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'}));
+            }
+        });
+    }
+
+    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.cancel();
+        }
+
+        callback();
+
+        const sourceCache = this.map.style.sourceCaches[this.id];
+        sourceCache.clearTiles();
+        this.load();
+    }
+
+    /**
+     * Sets the source `tiles` property and re-renders the map.
+     *
+     * @param {string[]} tiles An array of one or more tile source URLs, as in the TileJSON spec.
+     * @returns {VectorTileSource} this
+     */
+    setTiles(tiles: Array<string>) {
+        this.setSourceProperty(() => {
+            this._options.tiles = tiles;
+        });
+
+        return this;
+    }
+
+    /**
+     * Sets the source `url` property and re-renders the map.
+     *
+     * @param {string} url A URL to a TileJSON resource. Supported protocols are `http:`, `https:`, and `mapbox://<Tileset ID>`.
+     * @returns {VectorTileSource} this
+     */
+    setUrl(url: string) {
+        this.setSourceProperty(() => {
+            this.url = url;
+            this._options.url = url;
+        });
+
+        return this;
+    }
+
+    onRemove() {
+        if (this._tileJSONRequest) {
+            this._tileJSONRequest.cancel();
+            this._tileJSONRequest = null;
+        }
+    }
+
+    serialize() {
+        return extend({}, this._options);
+    }
+
+    loadTile(tile: Tile, callback: Callback<void>) {
+        const url = this.map._requestManager.normalizeTileURL(tile.tileID.canonical.url(this.tiles, 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: browser.devicePixelRatio,
+            showCollisionBoxes: this.map.showCollisionBoxes,
+            promoteId: this.promoteId
+        };
+        params.request.collectResourceTiming = this._collectResourceTiming;
+
+        if (!tile.actor || tile.state === 'expired') {
+            tile.actor = this.dispatcher.getActor();
+            tile.request = tile.actor.send('loadTile', params, done.bind(this));
+        } else if (tile.state === 'loading') {
+            // schedule tile reloading after it has been loaded
+            tile.reloadCallback = callback;
+        } else {
+            tile.request = tile.actor.send('reloadTile', params, done.bind(this));
+        }
+
+        function done(err, data) {
+            delete tile.request;
+
+            if (tile.aborted)
+                return callback(null);
+
+            if (err && err.status !== 404) {
+                return callback(err);
+            }
+
+            if (data && data.resourceTiming)
+                tile.resourceTiming = data.resourceTiming;
+
+            if (this.map._refreshExpiredTiles && data) tile.setExpiryData(data);
+            tile.loadVectorData(data, this.map.painter);
+
+            cacheEntryPossiblyAdded(this.dispatcher);
+
+            callback(null);
+
+            if (tile.reloadCallback) {
+                this.loadTile(tile, tile.reloadCallback);
+                tile.reloadCallback = null;
+            }
+        }
+    }
+
+    abortTile(tile: Tile) {
+        if (tile.request) {
+            tile.request.cancel();
+            delete tile.request;
+        }
+        if (tile.actor) {
+            tile.actor.send('abortTile', {uid: tile.uid, type: this.type, source: this.id}, undefined);
+        }
+    }
+
+    unloadTile(tile: Tile) {
+        tile.unloadVectorData();
+        if (tile.actor) {
+            tile.actor.send('removeTile', {uid: tile.uid, type: this.type, source: this.id}, undefined);
+        }
+    }
+
+    hasTransition() {
+        return false;
+    }
+}
+
+export default VectorTileSource;