mapbox-gl 1.13.2

package/src/source/vector_tile_worker_source.js

@@ -0,0 +1,216 @@
+// @flow
+
+import {getArrayBuffer} from '../util/ajax';
+
+import vt from '@mapbox/vector-tile';
+import Protobuf from 'pbf';
+import WorkerTile from './worker_tile';
+import {extend} from '../util/util';
+import {RequestPerformance} from '../util/performance';
+
+import type {
+    WorkerSource,
+    WorkerTileParameters,
+    WorkerTileCallback,
+    TileParameters
+} from '../source/worker_source';
+
+import type Actor from '../util/actor';
+import type StyleLayerIndex from '../style/style_layer_index';
+import type {Callback} from '../types/callback';
+
+export type LoadVectorTileResult = {
+    vectorTile: VectorTile;
+    rawData: ArrayBuffer;
+    expires?: any;
+    cacheControl?: any;
+    resourceTiming?: Array<PerformanceResourceTiming>;
+};
+
+/**
+ * @callback LoadVectorDataCallback
+ * @param error
+ * @param vectorTile
+ * @private
+ */
+export type LoadVectorDataCallback = Callback<?LoadVectorTileResult>;
+
+export type AbortVectorData = () => void;
+export type LoadVectorData = (params: WorkerTileParameters, callback: LoadVectorDataCallback) => ?AbortVectorData;
+
+/**
+ * @private
+ */
+function loadVectorTile(params: WorkerTileParameters, callback: LoadVectorDataCallback) {
+    const request = getArrayBuffer(params.request, (err: ?Error, data: ?ArrayBuffer, cacheControl: ?string, expires: ?string) => {
+        if (err) {
+            callback(err);
+        } else if (data) {
+            callback(null, {
+                vectorTile: new vt.VectorTile(new Protobuf(data)),
+                rawData: data,
+                cacheControl,
+                expires
+            });
+        }
+    });
+    return () => {
+        request.cancel();
+        callback();
+    };
+}
+
+/**
+ * The {@link WorkerSource} implementation that supports {@link VectorTileSource}.
+ * This class is designed to be easily reused to support custom source types
+ * for data formats that can be parsed/converted into an in-memory VectorTile
+ * representation.  To do so, create it with
+ * `new VectorTileWorkerSource(actor, styleLayers, customLoadVectorDataFunction)`.
+ *
+ * @private
+ */
+class VectorTileWorkerSource implements WorkerSource {
+    actor: Actor;
+    layerIndex: StyleLayerIndex;
+    availableImages: Array<string>;
+    loadVectorData: LoadVectorData;
+    loading: {[_: string]: WorkerTile };
+    loaded: {[_: string]: WorkerTile };
+
+    /**
+     * @param [loadVectorData] Optional method for custom loading of a VectorTile
+     * object based on parameters passed from the main-thread Source. See
+     * {@link VectorTileWorkerSource#loadTile}. The default implementation simply
+     * loads the pbf at `params.url`.
+     * @private
+     */
+    constructor(actor: Actor, layerIndex: StyleLayerIndex, availableImages: Array<string>, loadVectorData: ?LoadVectorData) {
+        this.actor = actor;
+        this.layerIndex = layerIndex;
+        this.availableImages = availableImages;
+        this.loadVectorData = loadVectorData || loadVectorTile;
+        this.loading = {};
+        this.loaded = {};
+    }
+
+    /**
+     * Implements {@link WorkerSource#loadTile}. Delegates to
+     * {@link VectorTileWorkerSource#loadVectorData} (which by default expects
+     * a `params.url` property) for fetching and producing a VectorTile object.
+     * @private
+     */
+    loadTile(params: WorkerTileParameters, callback: WorkerTileCallback) {
+        const uid = params.uid;
+
+        if (!this.loading)
+            this.loading = {};
+
+        const perf = (params && params.request && params.request.collectResourceTiming) ?
+            new RequestPerformance(params.request) : false;
+
+        const workerTile = this.loading[uid] = new WorkerTile(params);
+        workerTile.abort = this.loadVectorData(params, (err, response) => {
+            delete this.loading[uid];
+
+            if (err || !response) {
+                workerTile.status = 'done';
+                this.loaded[uid] = workerTile;
+                return callback(err);
+            }
+
+            const rawTileData = response.rawData;
+            const cacheControl = {};
+            if (response.expires) cacheControl.expires = response.expires;
+            if (response.cacheControl) cacheControl.cacheControl = response.cacheControl;
+
+            const resourceTiming = {};
+            if (perf) {
+                const resourceTimingData = perf.finish();
+                // it's necessary to eval the result of getEntriesByName() here via parse/stringify
+                // late evaluation in the main thread causes TypeError: illegal invocation
+                if (resourceTimingData)
+                    resourceTiming.resourceTiming = JSON.parse(JSON.stringify(resourceTimingData));
+            }
+
+            workerTile.vectorTile = response.vectorTile;
+            workerTile.parse(response.vectorTile, this.layerIndex, this.availableImages, this.actor, (err, result) => {
+                if (err || !result) return callback(err);
+
+                // Transferring a copy of rawTileData because the worker needs to retain its copy.
+                callback(null, extend({rawTileData: rawTileData.slice(0)}, result, cacheControl, resourceTiming));
+            });
+
+            this.loaded = this.loaded || {};
+            this.loaded[uid] = workerTile;
+        });
+    }
+
+    /**
+     * Implements {@link WorkerSource#reloadTile}.
+     * @private
+     */
+    reloadTile(params: WorkerTileParameters, callback: WorkerTileCallback) {
+        const loaded = this.loaded,
+            uid = params.uid,
+            vtSource = this;
+        if (loaded && loaded[uid]) {
+            const workerTile = loaded[uid];
+            workerTile.showCollisionBoxes = params.showCollisionBoxes;
+
+            const done = (err, data) => {
+                const reloadCallback = workerTile.reloadCallback;
+                if (reloadCallback) {
+                    delete workerTile.reloadCallback;
+                    workerTile.parse(workerTile.vectorTile, vtSource.layerIndex, this.availableImages, vtSource.actor, reloadCallback);
+                }
+                callback(err, data);
+            };
+
+            if (workerTile.status === 'parsing') {
+                workerTile.reloadCallback = done;
+            } else if (workerTile.status === 'done') {
+                // if there was no vector tile data on the initial load, don't try and re-parse tile
+                if (workerTile.vectorTile) {
+                    workerTile.parse(workerTile.vectorTile, this.layerIndex, this.availableImages, this.actor, done);
+                } else {
+                    done();
+                }
+            }
+        }
+    }
+
+    /**
+     * Implements {@link WorkerSource#abortTile}.
+     *
+     * @param params
+     * @param params.uid The UID for this tile.
+     * @private
+     */
+    abortTile(params: TileParameters, callback: WorkerTileCallback) {
+        const loading = this.loading,
+            uid = params.uid;
+        if (loading && loading[uid] && loading[uid].abort) {
+            loading[uid].abort();
+            delete loading[uid];
+        }
+        callback();
+    }
+
+    /**
+     * Implements {@link WorkerSource#removeTile}.
+     *
+     * @param params
+     * @param params.uid The UID for this tile.
+     * @private
+     */
+    removeTile(params: TileParameters, callback: WorkerTileCallback) {
+        const loaded = this.loaded,
+            uid = params.uid;
+        if (loaded && loaded[uid]) {
+            delete loaded[uid];
+        }
+        callback();
+    }
+}
+
+export default VectorTileWorkerSource;

package/src/source/video_source.js

@@ -0,0 +1,203 @@
+// @flow
+
+import {getVideo, ResourceType} from '../util/ajax';
+
+import ImageSource from './image_source';
+import rasterBoundsAttributes from '../data/raster_bounds_attributes';
+import SegmentVector from '../data/segment';
+import Texture from '../render/texture';
+import {ErrorEvent} from '../util/evented';
+import ValidationError from '../style-spec/error/validation_error';
+
+import type Map from '../ui/map';
+import type Dispatcher from '../util/dispatcher';
+import type {Evented} from '../util/evented';
+import type {VideoSourceSpecification} from '../style-spec/types';
+
+/**
+ * A data source containing video.
+ * (See the [Style Specification](https://www.mapbox.com/mapbox-gl-style-spec/#sources-video) for detailed documentation of options.)
+ *
+ * @example
+ * // add to map
+ * map.addSource('some id', {
+ *    type: 'video',
+ *    url: [
+ *        'https://www.mapbox.com/blog/assets/baltimore-smoke.mp4',
+ *        'https://www.mapbox.com/blog/assets/baltimore-smoke.webm'
+ *    ],
+ *    coordinates: [
+ *        [-76.54, 39.18],
+ *        [-76.52, 39.18],
+ *        [-76.52, 39.17],
+ *        [-76.54, 39.17]
+ *    ]
+ * });
+ *
+ * // update
+ * var mySource = map.getSource('some id');
+ * mySource.setCoordinates([
+ *     [-76.54335737228394, 39.18579907229748],
+ *     [-76.52803659439087, 39.1838364847587],
+ *     [-76.5295386314392, 39.17683392507606],
+ *     [-76.54520273208618, 39.17876344106642]
+ * ]);
+ *
+ * map.removeSource('some id');  // remove
+ * @see [Add a video](https://www.mapbox.com/mapbox-gl-js/example/video-on-a-map/)
+ */
+class VideoSource extends ImageSource {
+    options: VideoSourceSpecification;
+    urls: Array<string>;
+    video: HTMLVideoElement;
+    roundZoom: boolean;
+
+    /**
+     * @private
+     */
+    constructor(id: string, options: VideoSourceSpecification, dispatcher: Dispatcher, eventedParent: Evented) {
+        super(id, options, dispatcher, eventedParent);
+        this.roundZoom = true;
+        this.type = 'video';
+        this.options = options;
+    }
+
+    load() {
+        this._loaded = false;
+        const options = this.options;
+
+        this.urls = [];
+        for (const url of options.urls) {
+            this.urls.push(this.map._requestManager.transformRequest(url, ResourceType.Source).url);
+        }
+
+        getVideo(this.urls, (err, video) => {
+            this._loaded = true;
+            if (err) {
+                this.fire(new ErrorEvent(err));
+            } else if (video) {
+                this.video = video;
+                this.video.loop = true;
+
+                // Start repainting when video starts playing. hasTransition() will then return
+                // true to trigger additional frames as long as the videos continues playing.
+                this.video.addEventListener('playing', () => {
+                    this.map.triggerRepaint();
+                });
+
+                if (this.map) {
+                    this.video.play();
+                }
+
+                this._finishLoading();
+            }
+        });
+    }
+
+    /**
+     * Pauses the video.
+     */
+    pause() {
+        if (this.video) {
+            this.video.pause();
+        }
+    }
+
+    /**
+     * Plays the video.
+     */
+    play() {
+        if (this.video) {
+            this.video.play();
+        }
+    }
+
+    /**
+     * Sets playback to a timestamp, in seconds.
+     * @private
+     */
+    seek(seconds: number) {
+        if (this.video) {
+            const seekableRange = this.video.seekable;
+            if (seconds < seekableRange.start(0) || seconds > seekableRange.end(0)) {
+                this.fire(new ErrorEvent(new ValidationError(`sources.${this.id}`, null, `Playback for this video can be set only between the ${seekableRange.start(0)} and ${seekableRange.end(0)}-second mark.`)));
+            } else this.video.currentTime = seconds;
+        }
+    }
+
+    /**
+     * Returns the HTML `video` element.
+     *
+     * @returns {HTMLVideoElement} The HTML `video` element.
+     */
+    getVideo() {
+        return this.video;
+    }
+
+    onAdd(map: Map) {
+        if (this.map) return;
+        this.map = map;
+        this.load();
+        if (this.video) {
+            this.video.play();
+            this.setCoordinates(this.coordinates);
+        }
+    }
+
+    /**
+     * Sets the video's coordinates and re-renders the map.
+     *
+     * @method setCoordinates
+     * @instance
+     * @memberof VideoSource
+     * @returns {VideoSource} this
+     */
+    // setCoordinates inherited from ImageSource
+
+    prepare() {
+        if (Object.keys(this.tiles).length === 0 || this.video.readyState < 2) {
+            return; // not enough data for current position
+        }
+
+        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.video, gl.RGBA);
+            this.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+        } else if (!this.video.paused) {
+            this.texture.bind(gl.LINEAR, gl.CLAMP_TO_EDGE);
+            gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, gl.RGBA, gl.UNSIGNED_BYTE, this.video);
+        }
+
+        for (const w in this.tiles) {
+            const tile = this.tiles[w];
+            if (tile.state !== 'loaded') {
+                tile.state = 'loaded';
+                tile.texture = this.texture;
+            }
+        }
+    }
+
+    serialize() {
+        return {
+            type: 'video',
+            urls: this.urls,
+            coordinates: this.coordinates
+        };
+    }
+
+    hasTransition() {
+        return this.video && !this.video.paused;
+    }
+}
+
+export default VideoSource;

package/src/source/worker.js

@@ -0,0 +1,240 @@
+// @flow
+
+import Actor from '../util/actor';
+
+import StyleLayerIndex from '../style/style_layer_index';
+import VectorTileWorkerSource from './vector_tile_worker_source';
+import RasterDEMTileWorkerSource from './raster_dem_tile_worker_source';
+import GeoJSONWorkerSource from './geojson_worker_source';
+import assert from 'assert';
+import {plugin as globalRTLTextPlugin} from './rtl_text_plugin';
+import {enforceCacheSizeLimit} from '../util/tile_request_cache';
+
+import type {
+    WorkerSource,
+    WorkerTileParameters,
+    WorkerDEMTileParameters,
+    WorkerTileCallback,
+    WorkerDEMTileCallback,
+    TileParameters
+} from '../source/worker_source';
+
+import type {WorkerGlobalScopeInterface} from '../util/web_worker';
+import type {Callback} from '../types/callback';
+import type {LayerSpecification} from '../style-spec/types';
+import type {PluginState} from './rtl_text_plugin';
+
+/**
+ * @private
+ */
+export default class Worker {
+    self: WorkerGlobalScopeInterface;
+    actor: Actor;
+    layerIndexes: {[_: string]: StyleLayerIndex };
+    availableImages: {[_: string]: Array<string> };
+    workerSourceTypes: {[_: string]: Class<WorkerSource> };
+    workerSources: {[_: string]: {[_: string]: {[_: string]: WorkerSource } } };
+    demWorkerSources: {[_: string]: {[_: string]: RasterDEMTileWorkerSource } };
+    referrer: ?string;
+
+    constructor(self: WorkerGlobalScopeInterface) {
+        this.self = self;
+        this.actor = new Actor(self, this);
+
+        this.layerIndexes = {};
+        this.availableImages = {};
+
+        this.workerSourceTypes = {
+            vector: VectorTileWorkerSource,
+            geojson: GeoJSONWorkerSource
+        };
+
+        // [mapId][sourceType][sourceName] => worker source instance
+        this.workerSources = {};
+        this.demWorkerSources = {};
+
+        this.self.registerWorkerSource = (name: string, WorkerSource: Class<WorkerSource>) => {
+            if (this.workerSourceTypes[name]) {
+                throw new Error(`Worker source with name "${name}" already registered.`);
+            }
+            this.workerSourceTypes[name] = WorkerSource;
+        };
+
+        // This is invoked by the RTL text plugin when the download via the `importScripts` call has finished, and the code has been parsed.
+        this.self.registerRTLTextPlugin = (rtlTextPlugin: {applyArabicShaping: Function, processBidirectionalText: Function, processStyledBidirectionalText?: Function}) => {
+            if (globalRTLTextPlugin.isParsed()) {
+                throw new Error('RTL text plugin already registered.');
+            }
+            globalRTLTextPlugin['applyArabicShaping'] = rtlTextPlugin.applyArabicShaping;
+            globalRTLTextPlugin['processBidirectionalText'] = rtlTextPlugin.processBidirectionalText;
+            globalRTLTextPlugin['processStyledBidirectionalText'] = rtlTextPlugin.processStyledBidirectionalText;
+        };
+    }
+
+    setReferrer(mapID: string, referrer: string) {
+        this.referrer = referrer;
+    }
+
+    setImages(mapId: string, images: Array<string>, callback: WorkerTileCallback) {
+        this.availableImages[mapId] = images;
+        for (const workerSource in this.workerSources[mapId]) {
+            const ws = this.workerSources[mapId][workerSource];
+            for (const source in ws) {
+                ws[source].availableImages = images;
+            }
+        }
+        callback();
+    }
+
+    setLayers(mapId: string, layers: Array<LayerSpecification>, callback: WorkerTileCallback) {
+        this.getLayerIndex(mapId).replace(layers);
+        callback();
+    }
+
+    updateLayers(mapId: string, params: {layers: Array<LayerSpecification>, removedIds: Array<string>}, callback: WorkerTileCallback) {
+        this.getLayerIndex(mapId).update(params.layers, params.removedIds);
+        callback();
+    }
+
+    loadTile(mapId: string, params: WorkerTileParameters & {type: string}, callback: WorkerTileCallback) {
+        assert(params.type);
+        this.getWorkerSource(mapId, params.type, params.source).loadTile(params, callback);
+    }
+
+    loadDEMTile(mapId: string, params: WorkerDEMTileParameters, callback: WorkerDEMTileCallback) {
+        this.getDEMWorkerSource(mapId, params.source).loadTile(params, callback);
+    }
+
+    reloadTile(mapId: string, params: WorkerTileParameters & {type: string}, callback: WorkerTileCallback) {
+        assert(params.type);
+        this.getWorkerSource(mapId, params.type, params.source).reloadTile(params, callback);
+    }
+
+    abortTile(mapId: string, params: TileParameters & {type: string}, callback: WorkerTileCallback) {
+        assert(params.type);
+        this.getWorkerSource(mapId, params.type, params.source).abortTile(params, callback);
+    }
+
+    removeTile(mapId: string, params: TileParameters & {type: string}, callback: WorkerTileCallback) {
+        assert(params.type);
+        this.getWorkerSource(mapId, params.type, params.source).removeTile(params, callback);
+    }
+
+    removeDEMTile(mapId: string, params: TileParameters) {
+        this.getDEMWorkerSource(mapId, params.source).removeTile(params);
+    }
+
+    removeSource(mapId: string, params: {source: string} & {type: string}, callback: WorkerTileCallback) {
+        assert(params.type);
+        assert(params.source);
+
+        if (!this.workerSources[mapId] ||
+            !this.workerSources[mapId][params.type] ||
+            !this.workerSources[mapId][params.type][params.source]) {
+            return;
+        }
+
+        const worker = this.workerSources[mapId][params.type][params.source];
+        delete this.workerSources[mapId][params.type][params.source];
+
+        if (worker.removeSource !== undefined) {
+            worker.removeSource(params, callback);
+        } else {
+            callback();
+        }
+    }
+
+    /**
+     * Load a {@link WorkerSource} script at params.url.  The script is run
+     * (using importScripts) with `registerWorkerSource` in scope, which is a
+     * function taking `(name, workerSourceObject)`.
+     *  @private
+     */
+    loadWorkerSource(map: string, params: { url: string }, callback: Callback<void>) {
+        try {
+            this.self.importScripts(params.url);
+            callback();
+        } catch (e) {
+            callback(e.toString());
+        }
+    }
+
+    syncRTLPluginState(map: string, state: PluginState, callback: Callback<boolean>) {
+        try {
+            globalRTLTextPlugin.setState(state);
+            const pluginURL = globalRTLTextPlugin.getPluginURL();
+            if (
+                globalRTLTextPlugin.isLoaded() &&
+                !globalRTLTextPlugin.isParsed() &&
+                pluginURL != null // Not possible when `isLoaded` is true, but keeps flow happy
+            ) {
+                this.self.importScripts(pluginURL);
+                const complete = globalRTLTextPlugin.isParsed();
+                const error = complete ? undefined : new Error(`RTL Text Plugin failed to import scripts from ${pluginURL}`);
+                callback(error, complete);
+            }
+        } catch (e) {
+            callback(e.toString());
+        }
+    }
+
+    getAvailableImages(mapId: string) {
+        let availableImages = this.availableImages[mapId];
+
+        if (!availableImages) {
+            availableImages = [];
+        }
+
+        return availableImages;
+    }
+
+    getLayerIndex(mapId: string) {
+        let layerIndexes = this.layerIndexes[mapId];
+        if (!layerIndexes) {
+            layerIndexes = this.layerIndexes[mapId] = new StyleLayerIndex();
+        }
+        return layerIndexes;
+    }
+
+    getWorkerSource(mapId: string, type: string, source: string) {
+        if (!this.workerSources[mapId])
+            this.workerSources[mapId] = {};
+        if (!this.workerSources[mapId][type])
+            this.workerSources[mapId][type] = {};
+
+        if (!this.workerSources[mapId][type][source]) {
+            // use a wrapped actor so that we can attach a target mapId param
+            // to any messages invoked by the WorkerSource
+            const actor = {
+                send: (type, data, callback) => {
+                    this.actor.send(type, data, callback, mapId);
+                }
+            };
+            this.workerSources[mapId][type][source] = new (this.workerSourceTypes[type]: any)((actor: any), this.getLayerIndex(mapId), this.getAvailableImages(mapId));
+        }
+
+        return this.workerSources[mapId][type][source];
+    }
+
+    getDEMWorkerSource(mapId: string, source: string) {
+        if (!this.demWorkerSources[mapId])
+            this.demWorkerSources[mapId] = {};
+
+        if (!this.demWorkerSources[mapId][source]) {
+            this.demWorkerSources[mapId][source] = new RasterDEMTileWorkerSource();
+        }
+
+        return this.demWorkerSources[mapId][source];
+    }
+
+    enforceCacheSizeLimit(mapId: string, limit: number) {
+        enforceCacheSizeLimit(limit);
+    }
+}
+
+/* global self, WorkerGlobalScope */
+if (typeof WorkerGlobalScope !== 'undefined' &&
+    typeof self !== 'undefined' &&
+    self instanceof WorkerGlobalScope) {
+    self.worker = new Worker(self);
+}