mapbox-gl 1.13.2

package/src/source/worker_source.js

@@ -0,0 +1,107 @@
+// @flow
+
+import type {RequestParameters} from '../util/ajax';
+import type {RGBAImage, AlphaImage} from '../util/image';
+import type {GlyphPositions} from '../render/glyph_atlas';
+import type ImageAtlas from '../render/image_atlas';
+import type {OverscaledTileID} from './tile_id';
+import type {Bucket} from '../data/bucket';
+import type FeatureIndex from '../data/feature_index';
+import type {CollisionBoxArray} from '../data/array_types';
+import type DEMData from '../data/dem_data';
+import type {StyleGlyph} from '../style/style_glyph';
+import type {StyleImage} from '../style/style_image';
+import type {PromoteIdSpecification} from '../style-spec/types';
+import window from '../util/window';
+const {ImageBitmap} = window;
+
+export type TileParameters = {
+    source: string,
+    uid: string,
+};
+
+export type WorkerTileParameters = TileParameters & {
+    tileID: OverscaledTileID,
+    request: RequestParameters,
+    zoom: number,
+    maxZoom: number,
+    tileSize: number,
+    promoteId: ?PromoteIdSpecification,
+    pixelRatio: number,
+    showCollisionBoxes: boolean,
+    collectResourceTiming?: boolean,
+    returnDependencies?: boolean
+};
+
+export type WorkerDEMTileParameters = TileParameters & {
+    coord: { z: number, x: number, y: number, w: number },
+    rawImageData: RGBAImage | ImageBitmap,
+    encoding: "mapbox" | "terrarium"
+};
+
+export type WorkerTileResult = {
+    buckets: Array<Bucket>,
+    imageAtlas: ImageAtlas,
+    glyphAtlasImage: AlphaImage,
+    featureIndex: FeatureIndex,
+    collisionBoxArray: CollisionBoxArray,
+    rawTileData?: ArrayBuffer,
+    resourceTiming?: Array<PerformanceResourceTiming>,
+    // Only used for benchmarking:
+    glyphMap?: {[_: string]: {[_: number]: ?StyleGlyph}} | null,
+    iconMap?: {[_: string]: StyleImage} | null,
+    glyphPositions?: GlyphPositions | null
+};
+
+export type WorkerTileCallback = (error: ?Error, result: ?WorkerTileResult) => void;
+export type WorkerDEMTileCallback = (err: ?Error, result: ?DEMData) => void;
+
+/**
+ * May be implemented by custom source types to provide code that can be run on
+ * the WebWorkers. In addition to providing a custom
+ * {@link WorkerSource#loadTile}, any other methods attached to a `WorkerSource`
+ * implementation may also be targeted by the {@link Source} via
+ * `dispatcher.getActor().send('source-type.methodname', params, callback)`.
+ *
+ * @see {@link Map#addSourceType}
+ * @private
+ *
+ * @class WorkerSource
+ * @param actor
+ * @param layerIndex
+ */
+export interface WorkerSource {
+    availableImages: Array<string>,
+    // Disabled due to https://github.com/facebook/flow/issues/5208
+    // constructor(actor: Actor, layerIndex: StyleLayerIndex): WorkerSource;
+
+    /**
+     * Loads a tile from the given params and parse it into buckets ready to send
+     * back to the main thread for rendering.  Should call the callback with:
+     * `{ buckets, featureIndex, collisionIndex, rawTileData}`.
+     */
+    loadTile(params: WorkerTileParameters, callback: WorkerTileCallback): void;
+
+    /**
+     * Re-parses a tile that has already been loaded.  Yields the same data as
+     * {@link WorkerSource#loadTile}.
+     */
+    reloadTile(params: WorkerTileParameters, callback: WorkerTileCallback): void;
+
+    /**
+     * Aborts loading a tile that is in progress.
+     */
+    abortTile(params: TileParameters, callback: WorkerTileCallback): void;
+
+    /**
+     * Removes this tile from any local caches.
+     */
+    removeTile(params: TileParameters, callback: WorkerTileCallback): void;
+
+    /**
+     * Tells the WorkerSource to abort in-progress tasks and release resources.
+     * The foreground Source is responsible for ensuring that 'removeSource' is
+     * the last message sent to the WorkerSource.
+     */
+    removeSource?: (params: {source: string}, callback: WorkerTileCallback) => void;
+}

package/src/source/worker_tile.js

@@ -0,0 +1,224 @@
+// @flow
+
+import FeatureIndex from '../data/feature_index';
+
+import {performSymbolLayout} from '../symbol/symbol_layout';
+import {CollisionBoxArray} from '../data/array_types';
+import DictionaryCoder from '../util/dictionary_coder';
+import SymbolBucket from '../data/bucket/symbol_bucket';
+import LineBucket from '../data/bucket/line_bucket';
+import FillBucket from '../data/bucket/fill_bucket';
+import FillExtrusionBucket from '../data/bucket/fill_extrusion_bucket';
+import {warnOnce, mapObject, values} from '../util/util';
+import assert from 'assert';
+import ImageAtlas from '../render/image_atlas';
+import GlyphAtlas from '../render/glyph_atlas';
+import EvaluationParameters from '../style/evaluation_parameters';
+import {OverscaledTileID} from './tile_id';
+
+import type {Bucket} from '../data/bucket';
+import type Actor from '../util/actor';
+import type StyleLayer from '../style/style_layer';
+import type StyleLayerIndex from '../style/style_layer_index';
+import type {StyleImage} from '../style/style_image';
+import type {StyleGlyph} from '../style/style_glyph';
+import type {
+    WorkerTileParameters,
+    WorkerTileCallback,
+} from '../source/worker_source';
+import type {PromoteIdSpecification} from '../style-spec/types';
+
+class WorkerTile {
+    tileID: OverscaledTileID;
+    uid: string;
+    zoom: number;
+    pixelRatio: number;
+    tileSize: number;
+    source: string;
+    promoteId: ?PromoteIdSpecification;
+    overscaling: number;
+    showCollisionBoxes: boolean;
+    collectResourceTiming: boolean;
+    returnDependencies: boolean;
+
+    status: 'parsing' | 'done';
+    data: VectorTile;
+    collisionBoxArray: CollisionBoxArray;
+
+    abort: ?() => void;
+    reloadCallback: WorkerTileCallback;
+    vectorTile: VectorTile;
+
+    constructor(params: WorkerTileParameters) {
+        this.tileID = new OverscaledTileID(params.tileID.overscaledZ, params.tileID.wrap, params.tileID.canonical.z, params.tileID.canonical.x, params.tileID.canonical.y);
+        this.uid = params.uid;
+        this.zoom = params.zoom;
+        this.pixelRatio = params.pixelRatio;
+        this.tileSize = params.tileSize;
+        this.source = params.source;
+        this.overscaling = this.tileID.overscaleFactor();
+        this.showCollisionBoxes = params.showCollisionBoxes;
+        this.collectResourceTiming = !!params.collectResourceTiming;
+        this.returnDependencies = !!params.returnDependencies;
+        this.promoteId = params.promoteId;
+    }
+
+    parse(data: VectorTile, layerIndex: StyleLayerIndex, availableImages: Array<string>, actor: Actor, callback: WorkerTileCallback) {
+        this.status = 'parsing';
+        this.data = data;
+
+        this.collisionBoxArray = new CollisionBoxArray();
+        const sourceLayerCoder = new DictionaryCoder(Object.keys(data.layers).sort());
+
+        const featureIndex = new FeatureIndex(this.tileID, this.promoteId);
+        featureIndex.bucketLayerIDs = [];
+
+        const buckets: {[_: string]: Bucket} = {};
+
+        const options = {
+            featureIndex,
+            iconDependencies: {},
+            patternDependencies: {},
+            glyphDependencies: {},
+            availableImages
+        };
+
+        const layerFamilies = layerIndex.familiesBySource[this.source];
+        for (const sourceLayerId in layerFamilies) {
+            const sourceLayer = data.layers[sourceLayerId];
+            if (!sourceLayer) {
+                continue;
+            }
+
+            if (sourceLayer.version === 1) {
+                warnOnce(`Vector tile source "${this.source}" layer "${sourceLayerId}" ` +
+                    `does not use vector tile spec v2 and therefore may have some rendering errors.`);
+            }
+
+            const sourceLayerIndex = sourceLayerCoder.encode(sourceLayerId);
+            const features = [];
+            for (let index = 0; index < sourceLayer.length; index++) {
+                const feature = sourceLayer.feature(index);
+                const id = featureIndex.getId(feature, sourceLayerId);
+                features.push({feature, id, index, sourceLayerIndex});
+            }
+
+            for (const family of layerFamilies[sourceLayerId]) {
+                const layer = family[0];
+
+                assert(layer.source === this.source);
+                if (layer.minzoom && this.zoom < Math.floor(layer.minzoom)) continue;
+                if (layer.maxzoom && this.zoom >= layer.maxzoom) continue;
+                if (layer.visibility === 'none') continue;
+
+                recalculateLayers(family, this.zoom, availableImages);
+
+                const bucket = buckets[layer.id] = layer.createBucket({
+                    index: featureIndex.bucketLayerIDs.length,
+                    layers: family,
+                    zoom: this.zoom,
+                    pixelRatio: this.pixelRatio,
+                    overscaling: this.overscaling,
+                    collisionBoxArray: this.collisionBoxArray,
+                    sourceLayerIndex,
+                    sourceID: this.source
+                });
+
+                bucket.populate(features, options, this.tileID.canonical);
+                featureIndex.bucketLayerIDs.push(family.map((l) => l.id));
+            }
+        }
+
+        let error: ?Error;
+        let glyphMap: ?{[_: string]: {[_: number]: ?StyleGlyph}};
+        let iconMap: ?{[_: string]: StyleImage};
+        let patternMap: ?{[_: string]: StyleImage};
+
+        const stacks = mapObject(options.glyphDependencies, (glyphs) => Object.keys(glyphs).map(Number));
+        if (Object.keys(stacks).length) {
+            actor.send('getGlyphs', {uid: this.uid, stacks}, (err, result) => {
+                if (!error) {
+                    error = err;
+                    glyphMap = result;
+                    maybePrepare.call(this);
+                }
+            });
+        } else {
+            glyphMap = {};
+        }
+
+        const icons = Object.keys(options.iconDependencies);
+        if (icons.length) {
+            actor.send('getImages', {icons, source: this.source, tileID: this.tileID, type: 'icons'}, (err, result) => {
+                if (!error) {
+                    error = err;
+                    iconMap = result;
+                    maybePrepare.call(this);
+                }
+            });
+        } else {
+            iconMap = {};
+        }
+
+        const patterns = Object.keys(options.patternDependencies);
+        if (patterns.length) {
+            actor.send('getImages', {icons: patterns, source: this.source, tileID: this.tileID, type: 'patterns'}, (err, result) => {
+                if (!error) {
+                    error = err;
+                    patternMap = result;
+                    maybePrepare.call(this);
+                }
+            });
+        } else {
+            patternMap = {};
+        }
+
+        maybePrepare.call(this);
+
+        function maybePrepare() {
+            if (error) {
+                return callback(error);
+            } else if (glyphMap && iconMap && patternMap) {
+                const glyphAtlas = new GlyphAtlas(glyphMap);
+                const imageAtlas = new ImageAtlas(iconMap, patternMap);
+
+                for (const key in buckets) {
+                    const bucket = buckets[key];
+                    if (bucket instanceof SymbolBucket) {
+                        recalculateLayers(bucket.layers, this.zoom, availableImages);
+                        performSymbolLayout(bucket, glyphMap, glyphAtlas.positions, iconMap, imageAtlas.iconPositions, this.showCollisionBoxes, this.tileID.canonical);
+                    } else if (bucket.hasPattern &&
+                        (bucket instanceof LineBucket ||
+                         bucket instanceof FillBucket ||
+                         bucket instanceof FillExtrusionBucket)) {
+                        recalculateLayers(bucket.layers, this.zoom, availableImages);
+                        bucket.addFeatures(options, this.tileID.canonical, imageAtlas.patternPositions);
+                    }
+                }
+
+                this.status = 'done';
+                callback(null, {
+                    buckets: values(buckets).filter(b => !b.isEmpty()),
+                    featureIndex,
+                    collisionBoxArray: this.collisionBoxArray,
+                    glyphAtlasImage: glyphAtlas.image,
+                    imageAtlas,
+                    // Only used for benchmarking:
+                    glyphMap: this.returnDependencies ? glyphMap : null,
+                    iconMap: this.returnDependencies ? iconMap : null,
+                    glyphPositions: this.returnDependencies ? glyphAtlas.positions : null
+                });
+            }
+        }
+    }
+}
+
+function recalculateLayers(layers: $ReadOnlyArray<StyleLayer>, zoom: number, availableImages: Array<string>) {
+    // Layers are shared and may have been used by a WorkerTile with a different zoom.
+    const parameters = new EvaluationParameters(zoom);
+    for (const layer of layers) {
+        layer.recalculate(parameters, availableImages);
+    }
+}
+
+export default WorkerTile;

package/src/style/create_style_layer.js

@@ -0,0 +1,36 @@
+// @flow
+
+import circle from './style_layer/circle_style_layer';
+import heatmap from './style_layer/heatmap_style_layer';
+import hillshade from './style_layer/hillshade_style_layer';
+import fill from './style_layer/fill_style_layer';
+import fillExtrusion from './style_layer/fill_extrusion_style_layer';
+import line from './style_layer/line_style_layer';
+import symbol from './style_layer/symbol_style_layer';
+import background from './style_layer/background_style_layer';
+import raster from './style_layer/raster_style_layer';
+import CustomStyleLayer from './style_layer/custom_style_layer';
+import type {CustomLayerInterface} from './style_layer/custom_style_layer';
+
+import type {LayerSpecification} from '../style-spec/types';
+
+const subclasses = {
+    circle,
+    heatmap,
+    hillshade,
+    fill,
+    'fill-extrusion': fillExtrusion,
+    line,
+    symbol,
+    background,
+    raster
+};
+
+export default function createStyleLayer(layer: LayerSpecification | CustomLayerInterface) {
+    if (layer.type === 'custom') {
+        return new CustomStyleLayer(layer);
+    } else {
+        return new subclasses[layer.type](layer);
+    }
+}
+

package/src/style/evaluation_parameters.js

@@ -0,0 +1,62 @@
+// @flow
+
+import ZoomHistory from './zoom_history';
+import {isStringInSupportedScript} from '../util/script_detection';
+import {plugin as rtlTextPlugin} from '../source/rtl_text_plugin';
+
+import type {TransitionSpecification} from '../style-spec/types';
+
+export type CrossfadeParameters = {
+    fromScale: number,
+    toScale: number,
+    t: number
+};
+
+class EvaluationParameters {
+    zoom: number;
+    now: number;
+    fadeDuration: number;
+    zoomHistory: ZoomHistory;
+    transition: TransitionSpecification;
+
+    // "options" may also be another EvaluationParameters to copy, see CrossFadedProperty.possiblyEvaluate
+    constructor(zoom: number, options?: *) {
+        this.zoom = zoom;
+
+        if (options) {
+            this.now = options.now;
+            this.fadeDuration = options.fadeDuration;
+            this.zoomHistory = options.zoomHistory;
+            this.transition = options.transition;
+        } else {
+            this.now = 0;
+            this.fadeDuration = 0;
+            this.zoomHistory = new ZoomHistory();
+            this.transition = {};
+        }
+    }
+
+    isSupportedScript(str: string): boolean {
+        return isStringInSupportedScript(str, rtlTextPlugin.isLoaded());
+    }
+
+    crossFadingFactor() {
+        if (this.fadeDuration === 0) {
+            return 1;
+        } else {
+            return Math.min((this.now - this.zoomHistory.lastIntegerZoomTime) / this.fadeDuration, 1);
+        }
+    }
+
+    getCrossfadeParameters(): CrossfadeParameters {
+        const z = this.zoom;
+        const fraction = z - Math.floor(z);
+        const t = this.crossFadingFactor();
+
+        return z > this.zoomHistory.lastIntegerZoom ?
+            {fromScale: 2, toScale: 1, t: fraction + (1 - fraction) * t} :
+            {fromScale: 0.5, toScale: 1, t: 1 - (1 - t) * fraction};
+    }
+}
+
+export default EvaluationParameters;

package/src/style/format_section_override.js

@@ -0,0 +1,56 @@
+// @flow
+
+import assert from 'assert';
+import type {Expression} from '../style-spec/expression/expression';
+import type EvaluationContext from '../style-spec/expression/evaluation_context';
+import type {Type} from '../style-spec/expression/types';
+import type {ZoomConstantExpression} from '../style-spec/expression';
+import {NullType} from '../style-spec/expression/types';
+import {PossiblyEvaluatedPropertyValue} from './properties';
+import {register} from '../util/web_worker_transfer';
+
+// This is an internal expression class. It is only used in GL JS and
+// has GL JS dependencies which can break the standalone style-spec module
+export default class FormatSectionOverride<T> implements Expression {
+    type: Type;
+    defaultValue: PossiblyEvaluatedPropertyValue<T>;
+
+    constructor(defaultValue: PossiblyEvaluatedPropertyValue<T>) {
+        assert(defaultValue.property.overrides !== undefined);
+        this.type = defaultValue.property.overrides ? defaultValue.property.overrides.runtimeType : NullType;
+        this.defaultValue = defaultValue;
+    }
+
+    evaluate(ctx: EvaluationContext) {
+        if (ctx.formattedSection) {
+            const overrides = this.defaultValue.property.overrides;
+            if (overrides && overrides.hasOverride(ctx.formattedSection)) {
+                return overrides.getOverride(ctx.formattedSection);
+            }
+        }
+
+        if (ctx.feature && ctx.featureState) {
+            return this.defaultValue.evaluate(ctx.feature, ctx.featureState);
+        }
+
+        return this.defaultValue.property.specification.default;
+    }
+
+    eachChild(fn: (_: Expression) => void) {
+        if (!this.defaultValue.isConstant()) {
+            const expr: ZoomConstantExpression<'source'> = ((this.defaultValue.value): any);
+            fn(expr._styleExpression.expression);
+        }
+    }
+
+    // Cannot be statically evaluated, as the output depends on the evaluation context.
+    outputDefined() {
+        return false;
+    }
+
+    serialize() {
+        return null;
+    }
+}
+
+register('FormatSectionOverride', FormatSectionOverride, {omit: ['defaultValue']});

package/src/style/light.js

@@ -0,0 +1,130 @@
+// @flow
+
+import styleSpec from '../style-spec/reference/latest';
+
+import {endsWith, extend, sphericalToCartesian} from '../util/util';
+import {Evented} from '../util/evented';
+import {
+    validateStyle,
+    validateLight,
+    emitValidationErrors
+} from './validate_style';
+import Color from '../style-spec/util/color';
+import {number as interpolate} from '../style-spec/util/interpolate';
+
+import type {StylePropertySpecification} from '../style-spec/style-spec';
+import type EvaluationParameters from './evaluation_parameters';
+import type {StyleSetterOptions} from '../style/style';
+import {Properties, Transitionable, Transitioning, PossiblyEvaluated, DataConstantProperty} from './properties';
+
+import type {
+    Property,
+    PropertyValue,
+    TransitionParameters
+} from './properties';
+
+import type {LightSpecification} from '../style-spec/types';
+
+type LightPosition = {
+    x: number,
+    y: number,
+    z: number
+};
+
+class LightPositionProperty implements Property<[number, number, number], LightPosition> {
+    specification: StylePropertySpecification;
+
+    constructor() {
+        this.specification = styleSpec.light.position;
+    }
+
+    possiblyEvaluate(value: PropertyValue<[number, number, number], LightPosition>, parameters: EvaluationParameters): LightPosition {
+        return sphericalToCartesian(value.expression.evaluate(parameters));
+    }
+
+    interpolate(a: LightPosition, b: LightPosition, t: number): LightPosition {
+        return {
+            x: interpolate(a.x, b.x, t),
+            y: interpolate(a.y, b.y, t),
+            z: interpolate(a.z, b.z, t),
+        };
+    }
+}
+
+type Props = {|
+    "anchor": DataConstantProperty<"map" | "viewport">,
+    "position": LightPositionProperty,
+    "color": DataConstantProperty<Color>,
+    "intensity": DataConstantProperty<number>,
+|};
+
+const properties: Properties<Props> = new Properties({
+    "anchor": new DataConstantProperty(styleSpec.light.anchor),
+    "position": new LightPositionProperty(),
+    "color": new DataConstantProperty(styleSpec.light.color),
+    "intensity": new DataConstantProperty(styleSpec.light.intensity),
+});
+
+const TRANSITION_SUFFIX = '-transition';
+
+/*
+ * Represents the light used to light extruded features.
+ */
+class Light extends Evented {
+    _transitionable: Transitionable<Props>;
+    _transitioning: Transitioning<Props>;
+    properties: PossiblyEvaluated<Props>;
+
+    constructor(lightOptions?: LightSpecification) {
+        super();
+        this._transitionable = new Transitionable(properties);
+        this.setLight(lightOptions);
+        this._transitioning = this._transitionable.untransitioned();
+    }
+
+    getLight() {
+        return this._transitionable.serialize();
+    }
+
+    setLight(light?: LightSpecification, options: StyleSetterOptions = {}) {
+        if (this._validate(validateLight, light, options)) {
+            return;
+        }
+
+        for (const name in light) {
+            const value = light[name];
+            if (endsWith(name, TRANSITION_SUFFIX)) {
+                this._transitionable.setTransition(name.slice(0, -TRANSITION_SUFFIX.length), value);
+            } else {
+                this._transitionable.setValue(name, value);
+            }
+        }
+    }
+
+    updateTransitions(parameters: TransitionParameters) {
+        this._transitioning = this._transitionable.transitioned(parameters, this._transitioning);
+    }
+
+    hasTransition() {
+        return this._transitioning.hasTransition();
+    }
+
+    recalculate(parameters: EvaluationParameters) {
+        this.properties = this._transitioning.possiblyEvaluate(parameters);
+    }
+
+    _validate(validate: Function, value: mixed, options?: {validate?: boolean}) {
+        if (options && options.validate === false) {
+            return false;
+        }
+
+        return emitValidationErrors(this, validate.call(validateStyle, extend({
+            value,
+            // Workaround for https://github.com/mapbox/mapbox-gl-js/issues/2407
+            style: {glyphs: true, sprite: true},
+            styleSpec
+        })));
+    }
+}
+
+export default Light;

package/src/style/load_glyph_range.js

@@ -0,0 +1,38 @@
+// @flow
+
+import {getArrayBuffer, ResourceType} from '../util/ajax';
+
+import parseGlyphPBF from './parse_glyph_pbf';
+
+import type {StyleGlyph} from './style_glyph';
+import type {RequestManager} from '../util/mapbox';
+import type {Callback} from '../types/callback';
+
+export default function (fontstack: string,
+                           range: number,
+                           urlTemplate: string,
+                           requestManager: RequestManager,
+                           callback: Callback<{[_: number]: StyleGlyph | null}>) {
+    const begin = range * 256;
+    const end = begin + 255;
+
+    const request = requestManager.transformRequest(
+        requestManager.normalizeGlyphsURL(urlTemplate)
+            .replace('{fontstack}', fontstack)
+            .replace('{range}', `${begin}-${end}`),
+        ResourceType.Glyphs);
+
+    getArrayBuffer(request, (err: ?Error, data: ?ArrayBuffer) => {
+        if (err) {
+            callback(err);
+        } else if (data) {
+            const glyphs = {};
+
+            for (const glyph of parseGlyphPBF(data)) {
+                glyphs[glyph.id] = glyph;
+            }
+
+            callback(null, glyphs);
+        }
+    });
+}