mapbox-gl 1.13.2

package/src/style/style_glyph.js

@@ -0,0 +1,17 @@
+// @flow
+
+import type {AlphaImage} from '../util/image';
+
+export type GlyphMetrics = {
+    width: number,
+    height: number,
+    left: number,
+    top: number,
+    advance: number
+};
+
+export type StyleGlyph = {
+    id: number,
+    bitmap: AlphaImage,
+    metrics: GlyphMetrics
+};

package/src/style/style_image.js

@@ -0,0 +1,137 @@
+// @flow
+
+import {RGBAImage} from '../util/image';
+
+import type Map from '../ui/map';
+
+export type StyleImageData = {
+    data: RGBAImage,
+    version: number,
+    hasRenderCallback?: boolean,
+    userImage?: StyleImageInterface
+};
+
+export type StyleImageMetadata = {
+    pixelRatio: number,
+    sdf: boolean,
+    stretchX?: Array<[number, number]>,
+    stretchY?: Array<[number, number]>,
+    content?: [number, number, number, number]
+};
+
+export type StyleImage = StyleImageData & StyleImageMetadata;
+
+export type StyleImageInterface = {
+    width: number,
+    height: number,
+    data: Uint8Array | Uint8ClampedArray,
+    render?: () => boolean,
+    onAdd?: (map: Map, id: string) => void,
+    onRemove?: () => void
+};
+
+export function renderStyleImage(image: StyleImage) {
+    const {userImage} = image;
+    if (userImage && userImage.render) {
+        const updated = userImage.render();
+        if (updated) {
+            image.data.replace(new Uint8Array(userImage.data.buffer));
+            return true;
+        }
+    }
+    return false;
+}
+
+/**
+ * Interface for dynamically generated style images. This is a specification for
+ * implementers to model: it is not an exported method or class.
+ *
+ * Images implementing this interface can be redrawn for every frame. They can be used to animate
+ * icons and patterns or make them respond to user input. Style images can implement a
+ * {@link StyleImageInterface#render} method. The method is called every frame and
+ * can be used to update the image.
+ *
+ * @interface StyleImageInterface
+ * @property {number} width
+ * @property {number} height
+ * @property {Uint8Array | Uint8ClampedArray} data
+ *
+ * @see [Add an animated icon to the map.](https://docs.mapbox.com/mapbox-gl-js/example/add-image-animated/)
+ *
+ * @example
+ * var flashingSquare = {
+ *     width: 64,
+ *     height: 64,
+ *     data: new Uint8Array(64 * 64 * 4),
+ *
+ *     onAdd: function(map) {
+ *         this.map = map;
+ *     },
+ *
+ *     render: function() {
+ *         // keep repainting while the icon is on the map
+ *         this.map.triggerRepaint();
+ *
+ *         // alternate between black and white based on the time
+ *         var value = Math.round(Date.now() / 1000) % 2 === 0  ? 255 : 0;
+ *
+ *         // check if image needs to be changed
+ *         if (value !== this.previousValue) {
+ *             this.previousValue = value;
+ *
+ *             var bytesPerPixel = 4;
+ *             for (var x = 0; x < this.width; x++) {
+ *                 for (var y = 0; y < this.height; y++) {
+ *                     var offset = (y * this.width + x) * bytesPerPixel;
+ *                     this.data[offset + 0] = value;
+ *                     this.data[offset + 1] = value;
+ *                     this.data[offset + 2] = value;
+ *                     this.data[offset + 3] = 255;
+ *                 }
+ *             }
+ *
+ *             // return true to indicate that the image changed
+ *             return true;
+ *         }
+ *     }
+ *  }
+ *
+ *  map.addImage('flashing_square', flashingSquare);
+ */
+
+/**
+ * This method is called once before every frame where the icon will be used.
+ * The method can optionally update the image's `data` member with a new image.
+ *
+ * If the method updates the image it must return `true` to commit the change.
+ * If the method returns `false` or nothing the image is assumed to not have changed.
+ *
+ * If updates are infrequent it maybe easier to use {@link Map#updateImage} to update
+ * the image instead of implementing this method.
+ *
+ * @function
+ * @memberof StyleImageInterface
+ * @instance
+ * @name render
+ * @return {boolean} `true` if this method updated the image. `false` if the image was not changed.
+ */
+
+/**
+ * Optional method called when the layer has been added to the Map with {@link Map#addImage}.
+ *
+ * @function
+ * @memberof StyleImageInterface
+ * @instance
+ * @name onAdd
+ * @param {Map} map The Map this custom layer was just added to.
+ */
+
+/**
+ * Optional method called when the icon is removed from the map with {@link Map#removeImage}.
+ * This gives the image a chance to clean up resources and event listeners.
+ *
+ * @function
+ * @memberof StyleImageInterface
+ * @instance
+ * @name onRemove
+ */

package/src/style/style_layer/background_style_layer.js

@@ -0,0 +1,21 @@
+// @flow
+
+import StyleLayer from '../style_layer';
+
+import properties from './background_style_layer_properties';
+import {Transitionable, Transitioning, PossiblyEvaluated} from '../properties';
+
+import type {PaintProps} from './background_style_layer_properties';
+import type {LayerSpecification} from '../../style-spec/types';
+
+class BackgroundStyleLayer extends StyleLayer {
+    _transitionablePaint: Transitionable<PaintProps>;
+    _transitioningPaint: Transitioning<PaintProps>;
+    paint: PossiblyEvaluated<PaintProps>;
+
+    constructor(layer: LayerSpecification) {
+        super(layer, properties);
+    }
+}
+
+export default BackgroundStyleLayer;

package/src/style/style_layer/background_style_layer_properties.js

@@ -0,0 +1,40 @@
+// This file is generated. Edit build/generate-style-code.js, then run `yarn run codegen`.
+// @flow
+/* eslint-disable */
+
+import styleSpec from '../../style-spec/reference/latest';
+
+import {
+    Properties,
+    DataConstantProperty,
+    DataDrivenProperty,
+    CrossFadedDataDrivenProperty,
+    CrossFadedProperty,
+    ColorRampProperty
+} from '../properties';
+
+import type Color from '../../style-spec/util/color';
+
+import type Formatted from '../../style-spec/expression/types/formatted';
+
+import type ResolvedImage from '../../style-spec/expression/types/resolved_image';
+
+
+export type PaintProps = {|
+    "background-color": DataConstantProperty<Color>,
+    "background-pattern": CrossFadedProperty<ResolvedImage>,
+    "background-opacity": DataConstantProperty<number>,
+|};
+
+const paint: Properties<PaintProps> = new Properties({
+    "background-color": new DataConstantProperty(styleSpec["paint_background"]["background-color"]),
+    "background-pattern": new CrossFadedProperty(styleSpec["paint_background"]["background-pattern"]),
+    "background-opacity": new DataConstantProperty(styleSpec["paint_background"]["background-opacity"]),
+});
+
+// Note: without adding the explicit type annotation, Flow infers weaker types
+// for these objects from their use in the constructor to StyleLayer, as
+// {layout?: Properties<...>, paint: Properties<...>}
+export default ({ paint }: $Exact<{
+  paint: Properties<PaintProps>
+}>);

package/src/style/style_layer/circle_style_layer.js

@@ -0,0 +1,98 @@
+// @flow
+
+import StyleLayer from '../style_layer';
+
+import CircleBucket from '../../data/bucket/circle_bucket';
+import {polygonIntersectsBufferedPoint} from '../../util/intersection_tests';
+import {getMaximumPaintValue, translateDistance, translate} from '../query_utils';
+import properties from './circle_style_layer_properties';
+import {Transitionable, Transitioning, Layout, PossiblyEvaluated} from '../properties';
+import {vec4} from 'gl-matrix';
+import Point from '@mapbox/point-geometry';
+
+import type {FeatureState} from '../../style-spec/expression';
+import type Transform from '../../geo/transform';
+import type {Bucket, BucketParameters} from '../../data/bucket';
+import type {LayoutProps, PaintProps} from './circle_style_layer_properties';
+import type {LayerSpecification} from '../../style-spec/types';
+
+class CircleStyleLayer extends StyleLayer {
+    _unevaluatedLayout: Layout<LayoutProps>;
+    layout: PossiblyEvaluated<LayoutProps>;
+
+    _transitionablePaint: Transitionable<PaintProps>;
+    _transitioningPaint: Transitioning<PaintProps>;
+    paint: PossiblyEvaluated<PaintProps>;
+
+    constructor(layer: LayerSpecification) {
+        super(layer, properties);
+    }
+
+    createBucket(parameters: BucketParameters<*>) {
+        return new CircleBucket(parameters);
+    }
+
+    queryRadius(bucket: Bucket): number {
+        const circleBucket: CircleBucket<CircleStyleLayer> = (bucket: any);
+        return getMaximumPaintValue('circle-radius', this, circleBucket) +
+            getMaximumPaintValue('circle-stroke-width', this, circleBucket) +
+            translateDistance(this.paint.get('circle-translate'));
+    }
+
+    queryIntersectsFeature(queryGeometry: Array<Point>,
+                           feature: VectorTileFeature,
+                           featureState: FeatureState,
+                           geometry: Array<Array<Point>>,
+                           zoom: number,
+                           transform: Transform,
+                           pixelsToTileUnits: number,
+                           pixelPosMatrix: Float32Array): boolean {
+        const translatedPolygon = translate(queryGeometry,
+            this.paint.get('circle-translate'),
+            this.paint.get('circle-translate-anchor'),
+            transform.angle, pixelsToTileUnits);
+        const radius = this.paint.get('circle-radius').evaluate(feature, featureState);
+        const stroke = this.paint.get('circle-stroke-width').evaluate(feature, featureState);
+        const size  = radius + stroke;
+
+        // For pitch-alignment: map, compare feature geometry to query geometry in the plane of the tile
+        // // Otherwise, compare geometry in the plane of the viewport
+        // // A circle with fixed scaling relative to the viewport gets larger in tile space as it moves into the distance
+        // // A circle with fixed scaling relative to the map gets smaller in viewport space as it moves into the distance
+        const alignWithMap = this.paint.get('circle-pitch-alignment') === 'map';
+        const transformedPolygon = alignWithMap ? translatedPolygon : projectQueryGeometry(translatedPolygon, pixelPosMatrix);
+        const transformedSize = alignWithMap ? size * pixelsToTileUnits : size;
+
+        for (const ring of geometry) {
+            for (const point of ring) {
+
+                const transformedPoint = alignWithMap ? point : projectPoint(point, pixelPosMatrix);
+
+                let adjustedSize = transformedSize;
+                const projectedCenter = vec4.transformMat4([], [point.x, point.y, 0, 1], pixelPosMatrix);
+                if (this.paint.get('circle-pitch-scale') === 'viewport' && this.paint.get('circle-pitch-alignment') === 'map') {
+                    adjustedSize *= projectedCenter[3] / transform.cameraToCenterDistance;
+                } else if (this.paint.get('circle-pitch-scale') === 'map' && this.paint.get('circle-pitch-alignment') === 'viewport') {
+                    adjustedSize *= transform.cameraToCenterDistance / projectedCenter[3];
+                }
+
+                if (polygonIntersectsBufferedPoint(transformedPolygon, transformedPoint, adjustedSize)) return true;
+            }
+        }
+
+        return false;
+    }
+}
+
+function projectPoint(p: Point, pixelPosMatrix: Float32Array) {
+    const point = vec4.transformMat4([], [p.x, p.y, 0, 1], pixelPosMatrix);
+    return new Point(point[0] / point[3], point[1] / point[3]);
+}
+
+function projectQueryGeometry(queryGeometry: Array<Point>, pixelPosMatrix: Float32Array) {
+    return queryGeometry.map((p) => {
+        return projectPoint(p, pixelPosMatrix);
+    });
+}
+
+export default CircleStyleLayer;

package/src/style/style_layer/circle_style_layer_properties.js

@@ -0,0 +1,63 @@
+// This file is generated. Edit build/generate-style-code.js, then run `yarn run codegen`.
+// @flow
+/* eslint-disable */
+
+import styleSpec from '../../style-spec/reference/latest';
+
+import {
+    Properties,
+    DataConstantProperty,
+    DataDrivenProperty,
+    CrossFadedDataDrivenProperty,
+    CrossFadedProperty,
+    ColorRampProperty
+} from '../properties';
+
+import type Color from '../../style-spec/util/color';
+
+import type Formatted from '../../style-spec/expression/types/formatted';
+
+import type ResolvedImage from '../../style-spec/expression/types/resolved_image';
+
+export type LayoutProps = {|
+    "circle-sort-key": DataDrivenProperty<number>,
+|};
+
+const layout: Properties<LayoutProps> = new Properties({
+    "circle-sort-key": new DataDrivenProperty(styleSpec["layout_circle"]["circle-sort-key"]),
+});
+
+export type PaintProps = {|
+    "circle-radius": DataDrivenProperty<number>,
+    "circle-color": DataDrivenProperty<Color>,
+    "circle-blur": DataDrivenProperty<number>,
+    "circle-opacity": DataDrivenProperty<number>,
+    "circle-translate": DataConstantProperty<[number, number]>,
+    "circle-translate-anchor": DataConstantProperty<"map" | "viewport">,
+    "circle-pitch-scale": DataConstantProperty<"map" | "viewport">,
+    "circle-pitch-alignment": DataConstantProperty<"map" | "viewport">,
+    "circle-stroke-width": DataDrivenProperty<number>,
+    "circle-stroke-color": DataDrivenProperty<Color>,
+    "circle-stroke-opacity": DataDrivenProperty<number>,
+|};
+
+const paint: Properties<PaintProps> = new Properties({
+    "circle-radius": new DataDrivenProperty(styleSpec["paint_circle"]["circle-radius"]),
+    "circle-color": new DataDrivenProperty(styleSpec["paint_circle"]["circle-color"]),
+    "circle-blur": new DataDrivenProperty(styleSpec["paint_circle"]["circle-blur"]),
+    "circle-opacity": new DataDrivenProperty(styleSpec["paint_circle"]["circle-opacity"]),
+    "circle-translate": new DataConstantProperty(styleSpec["paint_circle"]["circle-translate"]),
+    "circle-translate-anchor": new DataConstantProperty(styleSpec["paint_circle"]["circle-translate-anchor"]),
+    "circle-pitch-scale": new DataConstantProperty(styleSpec["paint_circle"]["circle-pitch-scale"]),
+    "circle-pitch-alignment": new DataConstantProperty(styleSpec["paint_circle"]["circle-pitch-alignment"]),
+    "circle-stroke-width": new DataDrivenProperty(styleSpec["paint_circle"]["circle-stroke-width"]),
+    "circle-stroke-color": new DataDrivenProperty(styleSpec["paint_circle"]["circle-stroke-color"]),
+    "circle-stroke-opacity": new DataDrivenProperty(styleSpec["paint_circle"]["circle-stroke-opacity"]),
+});
+
+// Note: without adding the explicit type annotation, Flow infers weaker types
+// for these objects from their use in the constructor to StyleLayer, as
+// {layout?: Properties<...>, paint: Properties<...>}
+export default ({ paint, layout }: $Exact<{
+  paint: Properties<PaintProps>, layout: Properties<LayoutProps>
+}>);

package/src/style/style_layer/custom_style_layer.js

@@ -0,0 +1,223 @@
+// @flow
+
+import StyleLayer from '../style_layer';
+import type Map from '../../ui/map';
+import assert from 'assert';
+
+type CustomRenderMethod = (gl: WebGLRenderingContext, matrix: Array<number>) => void;
+
+/**
+ * Interface for custom style layers. This is a specification for
+ * implementers to model: it is not an exported method or class.
+ *
+ * Custom layers allow a user to render directly into the map's GL context using the map's camera.
+ * These layers can be added between any regular layers using {@link Map#addLayer}.
+ *
+ * Custom layers must have a unique `id` and must have the `type` of `"custom"`.
+ * They must implement `render` and may implement `prerender`, `onAdd` and `onRemove`.
+ * They can trigger rendering using {@link Map#triggerRepaint}
+ * and they should appropriately handle {@link Map.event:webglcontextlost} and
+ * {@link Map.event:webglcontextrestored}.
+ *
+ * The `renderingMode` property controls whether the layer is treated as a `"2d"` or `"3d"` map layer. Use:
+ * - `"renderingMode": "3d"` to use the depth buffer and share it with other layers
+ * - `"renderingMode": "2d"` to add a layer with no depth. If you need to use the depth buffer for a `"2d"` layer you must use an offscreen
+ *   framebuffer and {@link CustomLayerInterface#prerender}
+ *
+ * @interface CustomLayerInterface
+ * @property {string} id A unique layer id.
+ * @property {string} type The layer's type. Must be `"custom"`.
+ * @property {string} renderingMode Either `"2d"` or `"3d"`. Defaults to `"2d"`.
+ * @example
+ * // Custom layer implemented as ES6 class
+ * class NullIslandLayer {
+ *     constructor() {
+ *         this.id = 'null-island';
+ *         this.type = 'custom';
+ *         this.renderingMode = '2d';
+ *     }
+ *
+ *     onAdd(map, gl) {
+ *         const vertexSource = `
+ *         uniform mat4 u_matrix;
+ *         void main() {
+ *             gl_Position = u_matrix * vec4(0.5, 0.5, 0.0, 1.0);
+ *             gl_PointSize = 20.0;
+ *         }`;
+ *
+ *         const fragmentSource = `
+ *         void main() {
+ *             gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
+ *         }`;
+ *
+ *         const vertexShader = gl.createShader(gl.VERTEX_SHADER);
+ *         gl.shaderSource(vertexShader, vertexSource);
+ *         gl.compileShader(vertexShader);
+ *         const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
+ *         gl.shaderSource(fragmentShader, fragmentSource);
+ *         gl.compileShader(fragmentShader);
+ *
+ *         this.program = gl.createProgram();
+ *         gl.attachShader(this.program, vertexShader);
+ *         gl.attachShader(this.program, fragmentShader);
+ *         gl.linkProgram(this.program);
+ *     }
+ *
+ *     render(gl, matrix) {
+ *         gl.useProgram(this.program);
+ *         gl.uniformMatrix4fv(gl.getUniformLocation(this.program, "u_matrix"), false, matrix);
+ *         gl.drawArrays(gl.POINTS, 0, 1);
+ *     }
+ * }
+ *
+ * map.on('load', function() {
+ *     map.addLayer(new NullIslandLayer());
+ * });
+ */
+
+/**
+ * Optional method called when the layer has been added to the Map with {@link Map#addLayer}. This
+ * gives the layer a chance to initialize gl resources and register event listeners.
+ *
+ * @function
+ * @memberof CustomLayerInterface
+ * @instance
+ * @name onAdd
+ * @param {Map} map The Map this custom layer was just added to.
+ * @param {WebGLRenderingContext} gl The gl context for the map.
+ */
+
+/**
+ * Optional method called when the layer has been removed from the Map with {@link Map#removeLayer}. This
+ * gives the layer a chance to clean up gl resources and event listeners.
+ *
+ * @function
+ * @memberof CustomLayerInterface
+ * @instance
+ * @name onRemove
+ * @param {Map} map The Map this custom layer was just added to.
+ * @param {WebGLRenderingContext} gl The gl context for the map.
+ */
+
+/**
+ * Optional method called during a render frame to allow a layer to prepare resources or render into a texture.
+ *
+ * The layer cannot make any assumptions about the current GL state and must bind a framebuffer before rendering.
+ *
+ * @function
+ * @memberof CustomLayerInterface
+ * @instance
+ * @name prerender
+ * @param {WebGLRenderingContext} gl The map's gl context.
+ * @param {Array<number>} matrix The map's camera matrix. It projects spherical mercator
+ * coordinates to gl coordinates. The mercator coordinate `[0, 0]` represents the
+ * top left corner of the mercator world and `[1, 1]` represents the bottom right corner. When
+ * the `renderingMode` is `"3d"`, the z coordinate is conformal. A box with identical x, y, and z
+ * lengths in mercator units would be rendered as a cube. {@link MercatorCoordinate}.fromLngLat
+ * can be used to project a `LngLat` to a mercator coordinate.
+ */
+
+/**
+ * Called during a render frame allowing the layer to draw into the GL context.
+ *
+ * The layer can assume blending and depth state is set to allow the layer to properly
+ * blend and clip other layers. The layer cannot make any other assumptions about the
+ * current GL state.
+ *
+ * If the layer needs to render to a texture, it should implement the `prerender` method
+ * to do this and only use the `render` method for drawing directly into the main framebuffer.
+ *
+ * The blend function is set to `gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA)`. This expects
+ * colors to be provided in premultiplied alpha form where the `r`, `g` and `b` values are already
+ * multiplied by the `a` value. If you are unable to provide colors in premultiplied form you
+ * may want to change the blend function to
+ * `gl.blendFuncSeparate(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.ONE, gl.ONE_MINUS_SRC_ALPHA)`.
+ *
+ * @function
+ * @memberof CustomLayerInterface
+ * @instance
+ * @name render
+ * @param {WebGLRenderingContext} gl The map's gl context.
+ * @param {Array<number>} matrix The map's camera matrix. It projects spherical mercator
+ * coordinates to gl coordinates. The spherical mercator coordinate `[0, 0]` represents the
+ * top left corner of the mercator world and `[1, 1]` represents the bottom right corner. When
+ * the `renderingMode` is `"3d"`, the z coordinate is conformal. A box with identical x, y, and z
+ * lengths in mercator units would be rendered as a cube. {@link MercatorCoordinate}.fromLngLat
+ * can be used to project a `LngLat` to a mercator coordinate.
+ */
+export type CustomLayerInterface = {
+    id: string,
+    type: "custom",
+    renderingMode: "2d" | "3d",
+    render: CustomRenderMethod,
+    prerender: ?CustomRenderMethod,
+    onAdd: ?(map: Map, gl: WebGLRenderingContext) => void,
+    onRemove: ?(map: Map, gl: WebGLRenderingContext) => void
+}
+
+export function validateCustomStyleLayer(layerObject: CustomLayerInterface) {
+    const errors = [];
+    const id = layerObject.id;
+
+    if (id === undefined) {
+        errors.push({
+            message: `layers.${id}: missing required property "id"`
+        });
+    }
+
+    if (layerObject.render === undefined) {
+        errors.push({
+            message: `layers.${id}: missing required method "render"`
+        });
+    }
+
+    if (layerObject.renderingMode &&
+        layerObject.renderingMode !== '2d' &&
+        layerObject.renderingMode !== '3d') {
+        errors.push({
+            message: `layers.${id}: property "renderingMode" must be either "2d" or "3d"`
+        });
+    }
+
+    return errors;
+}
+
+class CustomStyleLayer extends StyleLayer {
+
+    implementation: CustomLayerInterface;
+
+    constructor(implementation: CustomLayerInterface) {
+        super(implementation, {});
+        this.implementation = implementation;
+    }
+
+    is3D() {
+        return this.implementation.renderingMode === '3d';
+    }
+
+    hasOffscreenPass() {
+        return this.implementation.prerender !== undefined;
+    }
+
+    recalculate() {}
+    updateTransitions() {}
+    hasTransition() {}
+
+    serialize() {
+        assert(false, "Custom layers cannot be serialized");
+    }
+
+    onAdd(map: Map) {
+        if (this.implementation.onAdd) {
+            this.implementation.onAdd(map, map.painter.context.gl);
+        }
+    }
+
+    onRemove(map: Map) {
+        if (this.implementation.onRemove) {
+            this.implementation.onRemove(map, map.painter.context.gl);
+        }
+    }
+}
+
+export default CustomStyleLayer;