@mapbox/mapbox-gl-style-spec 13.19.1 → 13.20.1

package/flow-typed/gl.js

@@ -0,0 +1,5 @@
+// @flow strict
+declare module "gl" {
+    declare function gl(width: number, height: number, attributes: WebGLContextAttributes): WebGLRenderingContext;
+    declare module.exports: typeof gl;
+}

package/flow-typed/jsdom.js

@@ -0,0 +1,18 @@
+// @flow strict
+
+import type Window from '../src/types/window';
+
+declare module "jsdom" {
+    declare class JSDOM {
+        constructor(content: string, options: Object): JSDOM;
+        window: Window;
+    }
+    declare class VirtualConsole {
+        constructor(): VirtualConsole;
+        sendTo(console: typeof console): VirtualConsole;
+    }
+    declare module.exports: {
+        JSDOM: typeof JSDOM,
+        VirtualConsole: typeof VirtualConsole
+    };
+}

package/flow-typed/mapbox-gl-supported.js

@@ -0,0 +1,16 @@
+// @flow
+'use strict';
+declare module "@mapbox/mapbox-gl-supported" {
+    declare type SupportedOptions = {failIfMajorPerformanceCaveat: boolean};
+
+    declare type SupportedFn = {
+        (options?: SupportedOptions): boolean,
+        webGLContextAttributes: WebGLContextAttributes
+    };
+    declare function notSupportedReason(options?: SupportedOptions): ?string;
+
+    declare module.exports: {
+        supported: SupportedFn;
+        notSupportedReason: typeof notSupportedReason;
+    }
+}

package/flow-typed/mapbox-unitbezier.js

@@ -0,0 +1,14 @@
+'use strict';
+// @flow
+
+declare module "@mapbox/unitbezier" {
+    declare class UnitBezier {
+        constructor(p1x: number, p1y: number, p2x: number, p2y: number): UnitBezier;
+        sampleCurveX(t: number): number;
+        sampleCurveY(t: number): number;
+        sampleCurveDerivativeX(t: number): number;
+        solveCurveX(x: number, epsilon: number | void): number;
+        solve(x: number, epsilon: number | void): number;
+    }
+    declare module.exports: typeof UnitBezier;
+}

package/flow-typed/offscreen-canvas.js

@@ -0,0 +1,9 @@
+// @flow strict
+
+declare class OffscreenCanvas {
+    width: number;
+    height: number;
+
+    constructor(width: number, height: number): OffscreenCanvas;
+    getContext(contextType: '2d'): CanvasRenderingContext2D;
+}

package/flow-typed/pbf.js

@@ -0,0 +1,25 @@
+declare module "pbf" {
+    declare type ReadFunction<T> = (tag: number, result: T, pbf: Pbf) => void;
+
+    declare class Pbf {
+        constructor(buf?: ArrayBuffer | Uint8Array): Pbf;
+
+        readFields<T>(readField: ReadFunction<T>, result: T, end?: number): T;
+        readMessage<T>(readField: ReadFunction<T>, result: T): T;
+
+        readFixed32(): number;
+        readSFixed32(): number;
+        readFixed64(): number;
+        readSFixed64(): number;
+        readFloat(): number;
+        readDouble(): number;
+        readVarint(): number;
+        readVarint64(): number;
+        readSVarint(): number;
+        readBoolean(): boolean;
+        readString(): string;
+        readBytes(): Uint8Array;
+    }
+
+    declare module.exports: typeof Pbf
+}

package/flow-typed/point-geometry.js

@@ -0,0 +1,44 @@
+declare module "@mapbox/point-geometry" {
+    declare type PointLike = Point | [number, number];
+
+    declare class Point {
+        x: number;
+        y: number;
+        constructor(x: number, y: number): Point;
+        clone(): Point;
+        add(point: Point): Point;
+        sub(point: Point): Point;
+        multByPoint(point: Point): Point;
+        divByPoint(point: Point): Point;
+        mult(k: number): Point;
+        div(k: number): Point;
+        rotate(angle: number): Point;
+        rotateAround(angle: number, point: Point): Point;
+        matMult(matrix: [number, number, number, number]): Point;
+        unit(): Point;
+        perp(): Point;
+        round(): Point;
+        mag(): number;
+        equals(point: Point): boolean;
+        dist(point: Point): number;
+        distSqr(point: Point): number;
+        angle(): number;
+        angleTo(point: Point): number;
+        angleWith(point: Point): number;
+        angleWithSep(x: number, y: number): number;
+        _matMult(matrix: [number, number, number, number]): Point;
+        _add(point: Point): Point;
+        _sub(point: Point): Point;
+        _mult(k: number): Point;
+        _div(k: number): Point;
+        _multByPoint(point: Point): Point;
+        _divByPoint(point: Point): Point;
+        _unit(): Point;
+        _perp(): Point;
+        _rotate(angle: number): Point;
+        _rotateAround(angle: number, point: Point): Point;
+        _round(): Point;
+        static convert(a: PointLike): Point;
+    }
+    declare module.exports: typeof Point;
+}

package/flow-typed/potpack.js

@@ -0,0 +1,12 @@
+declare module "potpack" {
+    declare type Bin = {
+        x: number,
+        y: number,
+        w: number,
+        h: number
+    };
+
+    declare function potpack(bins: Array<Bin>): {w: number, h: number, fill: number};
+
+    declare module.exports: typeof potpack;
+}

package/flow-typed/sinon.js

@@ -0,0 +1,28 @@
+// @flow strict
+declare module "sinon" {
+    declare type SpyCall = {
+        args: Array<mixed>
+    };
+    declare type Spy = {
+        (): any,
+        calledOnce: number,
+        getCall(i: number): SpyCall
+    };
+    declare type Stub = {
+        callsFake(fn: mixed): Spy
+    };
+    declare class FakeServer {
+        xhr: XMLHttpRequest
+    }
+    declare type Sandbox = {
+        xhr: {supportsCORS: boolean},
+        fakeServer: {create: () => FakeServer},
+
+        createSandbox(options: mixed): Sandbox,
+        stub(obj?: mixed, prop?: string): Stub,
+        spy(obj?: mixed, prop?: string): Spy,
+        restore(): void;
+    };
+
+    declare module.exports: Sandbox;
+}

package/flow-typed/vector-tile.js

@@ -0,0 +1,41 @@
+import type Pbf from 'pbf';
+import type Point from '@mapbox/point-geometry';
+import type { GeoJSONFeature } from '@mapbox/geojson-types';
+
+declare interface VectorTile {
+    layers: {[_: string]: VectorTileLayer};
+}
+
+declare interface VectorTileLayer {
+    version?: number;
+    name: string;
+    extent: number;
+    length: number;
+    feature(i: number): VectorTileFeature;
+}
+
+declare interface VectorTileFeature {
+    extent: number;
+    type: 1 | 2 | 3;
+    id: number;
+    properties: {[_: string]: string | number | boolean};
+
+    loadGeometry(): Array<Array<Point>>;
+    toGeoJSON(x: number, y: number, z: number): GeoJSONFeature;
+}
+
+declare module "@mapbox/vector-tile" {
+    declare class VectorTileImpl {
+        constructor(pbf: Pbf): VectorTile;
+    }
+
+    declare class VectorTileFeatureImpl {
+        static types: ['Unknown', 'Point', 'LineString', 'Polygon'];
+        toGeoJSON(x: number, y: number, z: number): GeoJSONFeature;
+    }
+
+    declare module.exports: {
+        VectorTile: typeof VectorTileImpl;
+        VectorTileFeature: typeof VectorTileFeatureImpl;
+    }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mapbox/mapbox-gl-style-spec",
   "description": "a specification for mapbox gl styles",
-  "version": "13.19.1",
+  "version": "13.20.1",
   "author": "Mapbox",
   "keywords": [
     "mapbox",
@@ -9,14 +9,23 @@
     "mapbox-gl-js"
   ],
   "license": "ISC",
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
   "module": "./dist/index.es.js",
   "type": "module",
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.es.js"
+    },
+    "./": {
+      "import": "./"
+    }
+  },
   "scripts": {
     "copy-flow-typed": "cp -R ../../flow-typed .",
     "build": "../../node_modules/.bin/rollup -c && ../../node_modules/.bin/rollup -c --environment esm",
-    "prepublish": "git clean -fdx && yarn copy-flow-typed && yarn build",
-    "postpublish": "rm -r flow-typed dist/index.js"
+    "prepublishOnly": "git clean -fdx && yarn copy-flow-typed && yarn build",
+    "postpublish": "rm -r flow-typed dist/index.cjs"
   },
   "repository": {
     "type": "git",

package/reference/v8.json

@@ -61,6 +61,10 @@
       "type": "terrain",
       "doc": "A global modifier that elevates layers and markers based on a DEM data source."
     },
+    "fog": {
+      "type": "fog",
+      "doc": "A global effect that fades layers and markers based on their distance to the camera. The fog can be used to approximate the effect of atmosphere on distant objects and enhance the depth perception of the map when used with terrain or 3D features."
+    },
     "sources": {
       "required": true,
       "type": "sources",
@@ -884,15 +888,19 @@
           "android": "2.0.1",
           "ios": "2.0.0",
           "macos": "0.1.0"
+        },
+        "data-driven styling": {
+          "js": "2.3.0"
         }
       },
       "expression": {
         "interpolated": false,
         "parameters": [
-          "zoom"
+          "zoom",
+          "feature"
         ]
       },
-      "property-type": "data-constant"
+      "property-type": "data-driven"
     },
     "line-join": {
       "type": "enum",
@@ -1862,15 +1870,19 @@
           "android": "2.0.1",
           "ios": "2.0.0",
           "macos": "0.1.0"
+        },
+        "data-driven styling": {
+          "js": "2.3.0"
         }
       },
       "expression": {
         "interpolated": true,
         "parameters": [
-          "zoom"
+          "zoom",
+          "feature"
         ]
       },
-      "property-type": "data-constant"
+      "property-type": "data-driven"
     },
     "text-letter-spacing": {
       "type": "number",
@@ -2733,7 +2745,7 @@
         }
       },
       "match": {
-        "doc": "Selects the output whose label value matches the input value, or the fallback value if no match is found. The input can be any expression (e.g. `[\"get\", \"building_type\"]`). Each label must be either:\n - a single literal value; or\n - an array of literal values, whose values must be all strings or all numbers (e.g. `[100, 101]` or `[\"c\", \"b\"]`). The input matches if any of the values in the array matches, similar to the `\"in\"` operator.\nEach label must be unique. If the input type does not match the type of the labels, the result will be the fallback value.",
+        "doc": "Selects the output for which the label value matches the input value, or the fallback value if no match is found. The input can be any expression (for example, `[\"get\", \"building_type\"]`). Each label must be unique, and must be either:\n - a single literal value; or\n - an array of literal values, the values of which must be all strings or all numbers (for example `[100, 101]` or `[\"c\", \"b\"]`).\n\nThe input matches if any of the values in the array matches using strict equality, similar to the `\"in\"` operator.\nIf the input type does not match the type of the labels, the result will be the fallback value.",
         "group": "Decision",
         "sdk-support": {
           "basic functionality": {
@@ -3673,6 +3685,75 @@
       }
     }
   },
+  "fog": {
+    "range": {
+      "type": "array",
+      "default": [
+        0.5,
+        10
+      ],
+      "minimum": -20,
+      "maximum": 20,
+      "length": 2,
+      "value": "number",
+      "property-type": "data-constant",
+      "transition": true,
+      "expression": {
+        "interpolated": true,
+        "parameters": [
+          "zoom"
+        ]
+      },
+      "doc": "The start and end distance range in which fog fades from fully transparent to fully opaque. The distance to the point at the center of the map is defined as zero, so that negative range values are closer to the camera, and positive values are farther away.",
+      "example": [
+        0.5,
+        10
+      ],
+      "sdk-support": {
+        "basic functionality": {
+          "js": "2.3.0"
+        }
+      }
+    },
+    "color": {
+      "type": "color",
+      "property-type": "data-constant",
+      "default": "#ffffff",
+      "expression": {
+        "interpolated": true,
+        "parameters": [
+          "zoom"
+        ]
+      },
+      "transition": true,
+      "doc": "The color of the fog. Using opacity is recommended only for smoothly transitioning fog on/off as anything less than 100% opacity results in more tiles loaded and drawn.",
+      "sdk-support": {
+        "basic functionality": {
+          "js": "2.3.0"
+        }
+      }
+    },
+    "horizon-blend": {
+      "type": "number",
+      "property-type": "data-constant",
+      "default": 0.1,
+      "minimum": 0,
+      "maximum": 1,
+      "expression": {
+        "interpolated": true,
+        "parameters": [
+          "zoom"
+        ]
+      },
+      "transition": true,
+      "doc": "Horizon blend applies a smooth fade from the color of the fog to the color of the sky. A value of zero leaves a sharp transition from fog to sky. Increasing the value blends the color of fog into increasingly high angles of the sky.",
+      "sdk-support": {
+        "basic functionality": {
+          "js": "2.3.0"
+        }
+      }
+    }
+  },
   "light": {
     "anchor": {
       "type": "enum",
@@ -4528,15 +4609,18 @@
           "ios": "2.0.0",
           "macos": "0.1.0"
         },
-        "data-driven styling": {}
+        "data-driven styling": {
+          "js": "2.3.0"
+        }
       },
       "expression": {
         "interpolated": false,
         "parameters": [
-          "zoom"
+          "zoom",
+          "feature"
         ]
       },
-      "property-type": "cross-faded"
+      "property-type": "cross-faded-data-driven"
     },
     "line-pattern": {
       "type": "resolvedImage",

package/rollup.config.js

@@ -16,7 +16,7 @@ const config = [{
     input: `${__dirname}/style-spec.js`,
     output: {
         name: 'mapboxGlStyleSpecification',
-        file: `${__dirname}/dist/${esm ? 'index.es.js' : 'index.js'}`,
+        file: `${__dirname}/dist/${esm ? 'index.es.js' : 'index.cjs'}`,
         format: esm ? 'esm' : 'umd',
         sourcemap: true
     },

package/types.js

@@ -67,6 +67,7 @@ export type StyleSpecification = {|
     "pitch"?: number,
     "light"?: LightSpecification,
     "terrain"?: TerrainSpecification,
+    "fog"?: FogSpecification,
     "sources": {[_: string]: SourceSpecification},
     "sprite"?: string,
     "glyphs"?: string,
@@ -86,6 +87,12 @@ export type TerrainSpecification = {|
     "exaggeration"?: PropertyValueSpecification<number>
 |}
 
+export type FogSpecification = {|
+    "range"?: PropertyValueSpecification<[number, number]>,
+    "color"?: PropertyValueSpecification<ColorSpecification>,
+    "horizon-blend"?: PropertyValueSpecification<number>
+|}
+
 export type VectorSourceSpecification = {
     "type": "vector",
     "url"?: string,
@@ -197,7 +204,7 @@ export type LineLayerSpecification = {|
     "maxzoom"?: number,
     "filter"?: FilterSpecification,
     "layout"?: {|
-        "line-cap"?: PropertyValueSpecification<"butt" | "round" | "square">,
+        "line-cap"?: DataDrivenPropertyValueSpecification<"butt" | "round" | "square">,
         "line-join"?: DataDrivenPropertyValueSpecification<"bevel" | "round" | "miter">,
         "line-miter-limit"?: PropertyValueSpecification<number>,
         "line-round-limit"?: PropertyValueSpecification<number>,
@@ -213,7 +220,7 @@ export type LineLayerSpecification = {|
         "line-gap-width"?: DataDrivenPropertyValueSpecification<number>,
         "line-offset"?: DataDrivenPropertyValueSpecification<number>,
         "line-blur"?: DataDrivenPropertyValueSpecification<number>,
-        "line-dasharray"?: PropertyValueSpecification<Array<number>>,
+        "line-dasharray"?: DataDrivenPropertyValueSpecification<Array<number>>,
         "line-pattern"?: DataDrivenPropertyValueSpecification<ResolvedImageSpecification>,
         "line-gradient"?: ExpressionSpecification
     |}
@@ -254,7 +261,7 @@ export type SymbolLayerSpecification = {|
         "text-font"?: DataDrivenPropertyValueSpecification<Array<string>>,
         "text-size"?: DataDrivenPropertyValueSpecification<number>,
         "text-max-width"?: DataDrivenPropertyValueSpecification<number>,
-        "text-line-height"?: PropertyValueSpecification<number>,
+        "text-line-height"?: DataDrivenPropertyValueSpecification<number>,
         "text-letter-spacing"?: DataDrivenPropertyValueSpecification<number>,
         "text-justify"?: DataDrivenPropertyValueSpecification<"auto" | "left" | "center" | "right">,
         "text-radial-offset"?: DataDrivenPropertyValueSpecification<number>,

package/validate/validate.js

@@ -18,6 +18,7 @@ import validateLayer from './validate_layer.js';
 import validateSource from './validate_source.js';
 import validateLight from './validate_light.js';
 import validateTerrain from './validate_terrain.js';
+import validateFog from './validate_fog.js';
 import validateString from './validate_string.js';
 import validateFormatted from './validate_formatted.js';
 import validateImage from './validate_image.js';
@@ -39,6 +40,7 @@ const VALIDATORS = {
     'source': validateSource,
     'light': validateLight,
     'terrain': validateTerrain,
+    'fog': validateFog,
     'string': validateString,
     'formatted': validateFormatted,
     'resolvedImage': validateImage

package/validate/validate_fog.js

@@ -0,0 +1,46 @@
+
+import ValidationError from '../error/validation_error.js';
+import validate from './validate.js';
+import getType from '../util/get_type.js';
+
+export default function validateFog(options) {
+    const fog = options.value;
+    const style = options.style;
+    const styleSpec = options.styleSpec;
+    const fogSpec = styleSpec.fog;
+    let errors = [];
+
+    const rootType = getType(fog);
+    if (fog === undefined) {
+        return errors;
+    } else if (rootType !== 'object') {
+        errors = errors.concat([new ValidationError('fog', fog, `object expected, ${rootType} found`)]);
+        return errors;
+    }
+
+    for (const key in fog) {
+        const transitionMatch = key.match(/^(.*)-transition$/);
+
+        if (transitionMatch && fogSpec[transitionMatch[1]] && fogSpec[transitionMatch[1]].transition) {
+            errors = errors.concat(validate({
+                key,
+                value: fog[key],
+                valueSpec: styleSpec.transition,
+                style,
+                styleSpec
+            }));
+        } else if (fogSpec[key]) {
+            errors = errors.concat(validate({
+                key,
+                value: fog[key],
+                valueSpec: fogSpec[key],
+                style,
+                styleSpec
+            }));
+        } else {
+            errors = errors.concat([new ValidationError(key, fog[key], `unknown property "${key}"`)]);
+        }
+    }
+
+    return errors;
+}

package/validate_mapbox_api_supported.js

@@ -34,6 +34,7 @@ function getAllowedKeyErrors(obj: Object, keys: Array<*>, path: ?string): Array<
     return errors;
 }
 
+const acceptedSourceTypes = new Set(["vector", "raster", "raster-dem"]);
 function getSourceErrors(source: Object, i: number): Array<?ValidationError> {
     const errors = [];
 
@@ -44,6 +45,13 @@ function getSourceErrors(source: Object, i: number): Array<?ValidationError> {
     const sourceKeys = ['type', 'url', 'tileSize'];
     errors.push(...getAllowedKeyErrors(source, sourceKeys, 'source'));
 
+    /*
+     * "type" is required and must be one of "vector", "raster", "raster-dem"
+     */
+    if (!acceptedSourceTypes.has(String(source.type))) {
+        errors.push(new ValidationError(`sources[${i}].type`, source.type, `Expected one of [${Array.from(acceptedSourceTypes).join(", ")}]`));
+    }
+
     /*
      * "source" is required. Valid examples:
      * mapbox://mapbox.abcd1234
@@ -51,8 +59,8 @@ function getSourceErrors(source: Object, i: number): Array<?ValidationError> {
      * mapbox://mapbox.abcd1234,penny.abcd1234
      */
     const sourceUrlPattern = /^mapbox:\/\/([^/]*)$/;
-    if (!isValid(source.url, sourceUrlPattern)) {
-        errors.push(new ValidationError(`sources[${i}]`, source.url, 'Source url must be a valid Mapbox tileset url'));
+    if (!source.url || !isValid(source.url, sourceUrlPattern)) {
+        errors.push(new ValidationError(`sources[${i}].url`, source.url, 'Expected a valid Mapbox tileset url'));
     }
 
     return errors;

package/validate_style.min.js

@@ -7,6 +7,7 @@ import validateGlyphsURL from './validate/validate_glyphs_url.js';
 import validateSource from './validate/validate_source.js';
 import validateLight from './validate/validate_light.js';
 import validateTerrain from './validate/validate_terrain.js';
+import validateFog from './validate/validate_fog.js';
 import validateLayer from './validate/validate_layer.js';
 import validateFilter from './validate/validate_filter.js';
 import validatePaintProperty from './validate/validate_paint_property.js';
@@ -60,6 +61,7 @@ function validateStyleMin(style, styleSpec = latestStyleSpec) {
 validateStyleMin.source = wrapCleanErrors(validateSource);
 validateStyleMin.light = wrapCleanErrors(validateLight);
 validateStyleMin.terrain = wrapCleanErrors(validateTerrain);
+validateStyleMin.fog = wrapCleanErrors(validateFog);
 validateStyleMin.layer = wrapCleanErrors(validateLayer);
 validateStyleMin.filter = wrapCleanErrors(validateFilter);
 validateStyleMin.paintProperty = wrapCleanErrors(validatePaintProperty);