@mapbox/mapbox-gl-style-spec 13.19.2 → 13.21.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mapbox/mapbox-gl-style-spec",
   "description": "a specification for mapbox gl styles",
-  "version": "13.19.2",
+  "version": "13.21.0",
   "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",
     "prepublishOnly": "git clean -fdx && yarn copy-flow-typed && yarn build",
-    "postpublish": "rm -r flow-typed dist/index.js"
+    "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",
@@ -612,7 +616,9 @@
           "doc": "A spherical dome around the map that is always rendered behind all other layers.",
           "sdk-support": {
             "basic functionality": {
-              "js": "2.0.0"
+              "js": "2.0.0",
+              "ios": "10.0.0",
+              "android": "10.0.0"
             }
           }
         }
@@ -708,7 +714,9 @@
       "doc": "Whether this layer is displayed.",
       "sdk-support": {
         "basic functionality": {
-          "js": "2.0.0"
+          "js": "2.0.0",
+          "ios": "10.0.0",
+          "android": "10.0.0"
         }
       },
       "property-type": "constant"
@@ -884,15 +892,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",
@@ -1823,7 +1835,12 @@
       "units": "ems",
       "doc": "The maximum line width for text wrapping.",
       "requires": [
-        "text-field"
+        "text-field",
+        {
+          "symbol-placement": [
+            "point"
+          ]
+        }
       ],
       "sdk-support": {
         "basic functionality": {
@@ -1862,15 +1879,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",
@@ -2138,20 +2159,15 @@
       "value": "enum",
       "values": {
         "horizontal": {
-          "doc": "If a text's language supports horizontal writing mode, symbols with point placement would be laid out horizontally."
+          "doc": "If a text's language supports horizontal writing mode, symbols would be laid out horizontally."
         },
         "vertical": {
-          "doc": "If a text's language supports vertical writing mode, symbols with point placement would be laid out vertically."
+          "doc": "If a text's language supports vertical writing mode, symbols would be laid out vertically."
         }
       },
-      "doc": "The property allows control over a symbol's orientation. Note that the property values act as a hint, so that a symbol whose language doesn’t support the provided orientation will be laid out in its natural orientation. Example: English point symbol will be rendered horizontally even if array value contains single 'vertical' enum value. The order of elements in an array define priority order for the placement of an orientation variant.",
+      "doc": "The property allows control over a symbol's orientation. Note that the property values act as a hint, so that a symbol whose language doesn’t support the provided orientation will be laid out in its natural orientation. Example: English point symbol will be rendered horizontally even if array value contains single 'vertical' enum value. For symbol with point placement, the order of elements in an array define priority order for the placement of an orientation variant. For symbol with line placement, the default text writing mode is either ['horizontal', 'vertical'] or ['vertical', 'horizontal'], the order doesn't affect the placement.",
       "requires": [
-        "text-field",
-        {
-          "symbol-placement": [
-            "point"
-          ]
-        }
+        "text-field"
       ],
       "sdk-support": {
         "basic functionality": {
@@ -2691,7 +2707,7 @@
         }
       },
       "in": {
-        "doc": "Determines whether an item exists in an array or a substring exists in a string.",
+        "doc": "Determines whether an item exists in an array or a substring exists in a string. In the specific case when the second and third arguments are string literals, you must wrap at least one of them in a [`literal`](#types-literal) expression to hint correct interpretation to the [type system](#type-system).",
         "group": "Lookup",
         "sdk-support": {
           "basic functionality": {
@@ -2733,7 +2749,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": {
@@ -2959,7 +2975,10 @@
         "group": "Types",
         "sdk-support": {
           "basic functionality": {
-            "js": "0.54.0"
+            "js": "0.54.0",
+            "android" : "8.4.0",
+            "ios": "5.4.0",
+            "macos": "0.15.0"
           }
         }
       },
@@ -3105,7 +3124,7 @@
         }
       },
       "geometry-type": {
-        "doc": "Gets the feature's geometry type: `Point`, `MultiPoint`, `LineString`, `MultiLineString`, `Polygon`, `MultiPolygon`.",
+        "doc": "Gets the feature's geometry type: `Point`, `MultiPoint`, `LineString`, `MultiLineString`, `Polygon`, `MultiPolygon`. `Multi*` feature types are only returned in GeoJSON sources. When working with vector tile sources, use the singular forms.",
         "group": "Feature data",
         "sdk-support": {
           "basic functionality": {
@@ -3169,7 +3188,9 @@
         "group": "sky",
         "sdk-support": {
           "basic functionality": {
-            "js": "2.0.0"
+            "js": "2.0.0",
+            "ios": "10.0.0",
+            "android": "10.0.0"
           }
         }
       },
@@ -3178,7 +3199,10 @@
         "group": "Feature data",
         "sdk-support": {
           "basic functionality": {
-            "js": "0.53.0"
+            "js": "0.53.0",
+            "android": "8.4.0",
+            "ios": "5.5.0",
+            "macos": "0.15.0"
           }
         }
       },
@@ -3673,6 +3697,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",
@@ -3788,7 +3881,9 @@
       "required": true,
       "sdk-support": {
         "basic functionality": {
-          "js": "2.0.0"
+          "js": "2.0.0",
+          "ios": "10.0.0",
+          "android": "10.0.0"
         }
       }
     },
@@ -3808,7 +3903,9 @@
       "doc": "Exaggerates the elevation of the terrain by multiplying the data from the DEM with this value.",
       "sdk-support": {
         "basic functionality": {
-          "js": "2.0.0"
+          "js": "2.0.0",
+          "ios": "10.0.0",
+          "android": "10.0.0"
         }
       }
     }
@@ -4249,6 +4346,7 @@
       "sdk-support": {
         "basic functionality": {
           "js": "0.50.0",
+          "android": "7.0.0",
           "ios": "4.7.0",
           "macos": "0.13.0"
         }
@@ -4528,15 +4626,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",
@@ -5954,7 +6055,9 @@
       "doc": "The type of the sky",
       "sdk-support": {
         "basic functionality": {
-          "js": "2.0.0"
+          "js": "2.0.0",
+          "ios": "10.0.0",
+          "android": "10.0.0"
         }
       },
       "expression": {
@@ -5976,7 +6079,9 @@
       "doc": "Position of the sun center [a azimuthal angle, p polar angle]. The azimuthal angle indicates the position of the sun relative to 0° north, where degrees proceed clockwise. The polar angle indicates the height of the sun, where 0° is directly above, at zenith, and 90° at the horizon. When this property is ommitted, the sun center is directly inherited from the light position.",
       "sdk-support": {
         "basic functionality": {
-          "js": "2.0.0"
+          "js": "2.0.0",
+          "ios": "10.0.0",
+          "android": "10.0.0"
         }
       },
       "requires": [
@@ -6006,7 +6111,9 @@
       "doc": "Intensity of the sun as a light source in the atmosphere (on a scale from 0 to a 100). Setting higher values will brighten up the sky.",
       "sdk-support": {
         "basic functionality": {
-          "js": "2.0.0"
+          "js": "2.0.0",
+          "ios": "10.0.0",
+          "android": "10.0.0"
         }
       },
       "property-type": "data-constant"
@@ -6031,7 +6138,9 @@
       "doc": "Position of the gradient center [a azimuthal angle, p polar angle]. The azimuthal angle indicates the position of the gradient center relative to 0° north, where degrees proceed clockwise. The polar angle indicates the height of the gradient center, where 0° is directly above, at zenith, and 90° at the horizon.",
       "sdk-support": {
         "basic functionality": {
-          "js": "2.0.0"
+          "js": "2.0.0",
+          "ios": "10.0.0",
+          "android": "10.0.0"
         }
       },
       "expression": {
@@ -6056,7 +6165,9 @@
       "doc": "The angular distance (measured in degrees) from `sky-gradient-center` up to which the gradient extends. A value of 180 causes the gradient to wrap around to the opposite direction from `sky-gradient-center`.",
       "sdk-support": {
         "basic functionality": {
-          "js": "2.0.0"
+          "js": "2.0.0",
+          "ios": "10.0.0",
+          "android": "10.0.0"
         }
       },
       "expression": {
@@ -6091,7 +6202,9 @@
       ],
       "sdk-support": {
         "basic functionality": {
-          "js": "2.0.0"
+          "js": "2.0.0",
+          "ios": "10.0.0",
+          "android": "10.0.0"
         },
         "data-driven styling": {}
       },
@@ -6115,7 +6228,9 @@
       ],
       "sdk-support": {
         "basic functionality": {
-          "js": "2.0.0"
+          "js": "2.0.0",
+          "ios": "10.0.0",
+          "android": "10.0.0"
         }
       },
       "property-type": "data-constant"
@@ -6132,7 +6247,9 @@
       ],
       "sdk-support": {
         "basic functionality": {
-          "js": "2.0.0"
+          "js": "2.0.0",
+          "ios": "10.0.0",
+          "android": "10.0.0"
         }
       },
       "property-type": "data-constant"
@@ -6146,7 +6263,9 @@
       "transition": true,
       "sdk-support": {
         "basic functionality": {
-          "js": "2.0.0"
+          "js": "2.0.0",
+          "ios": "10.0.0",
+          "android": "10.0.0"
         }
       },
       "expression": {

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);