maplibre-gl 2.2.0-pre.2 → 2.2.0

package/src/style-spec/function/index.test.ts

@@ -1,6 +1,7 @@
 import {createFunction} from './index';
 import Color from '../util/color';
 import Formatted from '../expression/types/formatted';
+import Padding from '../util/padding';
 
 describe('binary search', () => {
     test('will eventually terminate.', () => {
@@ -235,6 +236,19 @@ describe('exponential function', () => {
         expect(params).toEqual(paramsCopy);
     });
 
+    test('padding', () => {
+        const f = createFunction({
+            type: 'exponential',
+            stops: [[1, 2], [11, [2, 5, 2, 7]]]
+        }, {
+            type: 'padding'
+        }).evaluate;
+
+        expect(f({zoom: 0}, undefined)).toEqual(new Padding([2, 2, 2, 2]));
+        expect(f({zoom: 5}, undefined)).toEqual(new Padding([2, 3.2, 2, 4]));
+        expect(f({zoom: 11}, undefined)).toEqual(new Padding([2, 5, 2, 7]));
+    });
+
     test('property present', () => {
         const f = createFunction({
             property: 'foo',
@@ -532,11 +546,24 @@ describe('interval function', () => {
         }).evaluate;
 
         expect(f({zoom: 0}, undefined)).toEqual(new Color(1, 0, 0, 1));
-        expect(f({zoom: 0}, undefined)).toEqual(new Color(1, 0, 0, 1));
+        expect(f({zoom: 10}, undefined)).toEqual(new Color(1, 0, 0, 1));
         expect(f({zoom: 11}, undefined)).toEqual(new Color(0, 0, 1, 1));
 
     });
 
+    test('padding', () => {
+        const f = createFunction({
+            type: 'interval',
+            stops: [[1, 2], [11, 4]]
+        }, {
+            type: 'padding'
+        }).evaluate;
+
+        expect(f({zoom: 0}, undefined)).toEqual(new Padding([2, 2, 2, 2]));
+        expect(f({zoom: 10}, undefined)).toEqual(new Padding([2, 2, 2, 2]));
+        expect(f({zoom: 11}, undefined)).toEqual(new Padding([4, 4, 4, 4]));
+    });
+
     test('property present', () => {
         const f = createFunction({
             property: 'foo',
@@ -746,6 +773,47 @@ describe('categorical function', () => {
 
     });
 
+    test('padding', () => {
+        const f = createFunction({
+            property: 'foo',
+            type: 'categorical',
+            stops: [[0, 2], [1, 4]]
+        }, {
+            type: 'padding'
+        }).evaluate;
+
+        expect(f({zoom: 0}, {properties: {foo: 0}})).toEqual(new Padding([2, 2, 2, 2]));
+        expect(f({zoom: 1}, {properties: {foo: 1}})).toEqual(new Padding([4, 4, 4, 4]));
+    });
+
+    test('padding function default', () => {
+        const f = createFunction({
+            property: 'foo',
+            type: 'categorical',
+            stops: [[0, 2], [1, 4]],
+            default: 6
+        }, {
+            type: 'padding'
+        }).evaluate;
+
+        expect(f({zoom: 0}, {properties: {}})).toEqual(new Padding([6, 6, 6, 6]));
+        expect(f({zoom: 0}, {properties: {foo: 3}})).toEqual(new Padding([6, 6, 6, 6]));
+    });
+
+    test('padding spec default', () => {
+        const f = createFunction({
+            property: 'foo',
+            type: 'categorical',
+            stops: [[0, 2], [1, 4]]
+        }, {
+            type: 'padding',
+            default: 6
+        }).evaluate;
+
+        expect(f({zoom: 0}, {properties: {}})).toEqual(new Padding([6, 6, 6, 6]));
+        expect(f({zoom: 0}, {properties: {foo: 3}})).toEqual(new Padding([6, 6, 6, 6]));
+    });
+
     test('boolean', () => {
         const f = createFunction({
             property: 'foo',
@@ -853,6 +921,54 @@ describe('identity function', () => {
 
     });
 
+    test('padding', () => {
+        const f = createFunction({
+            property: 'foo',
+            type: 'identity'
+        }, {
+            type: 'padding'
+        }).evaluate;
+
+        expect(f({zoom: 0}, {properties: {foo: 3}})).toEqual(new Padding([3, 3, 3, 3]));
+        expect(f({zoom: 1}, {properties: {foo: [3, 4]}})).toEqual(new Padding([3, 4, 3, 4]));
+    });
+
+    test('padding function default', () => {
+        const f = createFunction({
+            property: 'foo',
+            type: 'identity',
+            default: [1, 2, 3, 4]
+        }, {
+            type: 'padding'
+        }).evaluate;
+
+        expect(f({zoom: 0}, {properties: {}})).toEqual(new Padding([1, 2, 3, 4]));
+    });
+
+    test('padding spec default', () => {
+        const f = createFunction({
+            property: 'foo',
+            type: 'identity'
+        }, {
+            type: 'padding',
+            default: [1, 2, 3, 4]
+        }).evaluate;
+
+        expect(f({zoom: 0}, {properties: {}})).toEqual(new Padding([1, 2, 3, 4]));
+    });
+
+    test('padding invalid', () => {
+        const f = createFunction({
+            property: 'foo',
+            type: 'identity'
+        }, {
+            type: 'padding',
+            default: [1, 2, 3, 4]
+        }).evaluate;
+
+        expect(f({zoom: 0}, {properties: {foo: 'invalid'}})).toEqual(new Padding([1, 2, 3, 4]));
+    });
+
     test('property type mismatch, function default', () => {
         const f = createFunction({
             property: 'foo',

package/src/style-spec/function/index.ts

@@ -9,6 +9,7 @@ import Formatted from '../expression/types/formatted';
 import ResolvedImage from '../expression/types/resolved_image';
 import {supportsInterpolation} from '../util/properties';
 import {findStopLessThanOrEqualTo} from '../expression/stops';
+import Padding from '../util/padding';
 
 export function isFunction(value) {
     return typeof value === 'object' && value !== null && !Array.isArray(value);
@@ -25,19 +26,21 @@ export function createFunction(parameters, propertySpec) {
     const zoomDependent = zoomAndFeatureDependent || !featureDependent;
     const type = parameters.type || (supportsInterpolation(propertySpec) ? 'exponential' : 'interval');
 
-    if (isColor) {
+    if (isColor || propertySpec.type === 'padding') {
+        const parseFn = isColor ? Color.parse : Padding.parse;
+
         parameters = extend({}, parameters);
 
         if (parameters.stops) {
             parameters.stops = parameters.stops.map((stop) => {
-                return [stop[0], Color.parse(stop[1])];
+                return [stop[0], parseFn(stop[1])];
             });
         }
 
         if (parameters.default) {
-            parameters.default = Color.parse(parameters.default);
+            parameters.default = parseFn(parameters.default);
         } else {
-            parameters.default = Color.parse(propertySpec.default);
+            parameters.default = parseFn(propertySpec.default);
         }
     }
 
@@ -198,14 +201,23 @@ function evaluateExponentialFunction(parameters, propertySpec, input) {
 }
 
 function evaluateIdentityFunction(parameters, propertySpec, input) {
-    if (propertySpec.type === 'color') {
-        input = Color.parse(input);
-    } else if (propertySpec.type === 'formatted') {
-        input = Formatted.fromString(input.toString());
-    } else if (propertySpec.type === 'resolvedImage') {
-        input = ResolvedImage.fromString(input.toString());
-    } else if (getType(input) !== propertySpec.type && (propertySpec.type !== 'enum' || !propertySpec.values[input])) {
-        input = undefined;
+    switch (propertySpec.type) {
+        case 'color':
+            input = Color.parse(input);
+            break;
+        case 'formatted':
+            input = Formatted.fromString(input.toString());
+            break;
+        case 'resolvedImage':
+            input = ResolvedImage.fromString(input.toString());
+            break;
+        case 'padding':
+            input = Padding.parse(input);
+            break;
+        default:
+            if (getType(input) !== propertySpec.type && (propertySpec.type !== 'enum' || !propertySpec.values[input])) {
+                input = undefined;
+            }
     }
     return coalesce(input, parameters.default, propertySpec.default);
 }

package/src/style-spec/migrate/expressions.ts

@@ -10,12 +10,12 @@ import type {FilterSpecification, LayerSpecification, StyleSpecification} from '
  * this will convert (a) "stop" functions, and (b) legacy filters to their
  * expression equivalents.
  */
-export default function(style: StyleSpecification) {
+export default function expressions(style: StyleSpecification) {
     const converted = [];
 
     eachLayer(style, (layer: LayerSpecification & { filter?: FilterSpecification }) => {
         if (layer.filter) {
-            layer.filter = (convertFilter(layer.filter) as any);
+            layer.filter = convertFilter(layer.filter);
         }
     });
 

package/src/style-spec/migrate/v8.test.ts

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 import migrate from './v8';
 
 describe('migrate v8', () => {

package/src/style-spec/migrate/v8.ts

@@ -1,8 +1,9 @@
 
 import URL from 'url';
 import {eachSource, eachLayer, eachProperty} from '../visit';
+import type {LayerSpecification, StyleSpecification} from '../types.g';
 
-function eachLayout(layer, callback) {
+function eachLayout(layer: LayerSpecification, callback: (_: LayerSpecification['layout'], __: string) => void) {
     for (const k in layer) {
         if (k.indexOf('layout') === 0) {
             callback(layer[k], k);
@@ -10,7 +11,7 @@ function eachLayout(layer, callback) {
     }
 }
 
-function eachPaint(layer, callback) {
+function eachPaint(layer: LayerSpecification, callback: (_: LayerSpecification['paint'], __: string) => void) {
     for (const k in layer) {
         if (k.indexOf('paint') === 0) {
             callback(layer[k], k);
@@ -18,9 +19,9 @@ function eachPaint(layer, callback) {
     }
 }
 
-function resolveConstant(style, value) {
+function resolveConstant(style: StyleSpecification, value: any) {
     if (typeof value === 'string' && value[0] === '@') {
-        return resolveConstant(style, style.constants[value]);
+        return resolveConstant(style, (style as any).constants[value]);
     } else {
         return value;
     }
@@ -30,11 +31,11 @@ function isFunction(value) {
     return Array.isArray(value.stops);
 }
 
-function renameProperty(obj, from, to) {
+function renameProperty(obj: Object, from: string, to: string) {
     obj[to] = obj[from]; delete obj[from];
 }
 
-export default function(style) {
+export default function migrateV8(style: StyleSpecification) {
     style.version = 8;
 
     // Rename properties, reverse coordinates in source and layers
@@ -81,7 +82,7 @@ export default function(style) {
 
         property.set(value);
     });
-    delete style.constants;
+    delete style['constants'];
 
     eachLayer(style, (layer) => {
         // get rid of text-max-size, icon-max-size

package/src/style-spec/migrate/v9.test.ts

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 import migrate from './v9';
 
 describe('migrate v9', () => {
@@ -5,7 +7,7 @@ describe('migrate v9', () => {
         const input = {
             version: 8,
             sources: {
-                a: {type: 'vector', tiles: [ 'http://dev/null' ]}
+                a: {type: 'vector', tiles: ['http://dev/null']}
             },
             layers: [{
                 id: 'parent',
@@ -21,7 +23,7 @@ describe('migrate v9', () => {
         expect(migrate(input)).toEqual({
             version: 9,
             sources: {
-                a: {type: 'vector', tiles: [ 'http://dev/null' ]}
+                a: {type: 'vector', tiles: ['http://dev/null']}
             },
             layers: [{
                 id: 'parent',
@@ -42,7 +44,7 @@ describe('migrate v9', () => {
         const input = {
             version: 8,
             sources: {
-                a: {type: 'vector', tiles: [ 'http://dev/null' ]}
+                a: {type: 'vector', tiles: ['http://dev/null']}
             },
             layers: [{
                 id: 'a',
@@ -61,7 +63,7 @@ describe('migrate v9', () => {
         expect(migrate(input)).toEqual({
             version: 9,
             sources: {
-                a: {type: 'vector', tiles: [ 'http://dev/null' ]}
+                a: {type: 'vector', tiles: ['http://dev/null']}
             },
             layers: [{
                 id: 'a',

package/src/style-spec/migrate/v9.ts

@@ -1,5 +1,6 @@
 
 import deref from '../deref';
+import type {StyleSpecification} from '../types.g';
 
 function eachLayer(style, callback) {
     for (const k in style.layers) {
@@ -7,8 +8,8 @@ function eachLayer(style, callback) {
     }
 }
 
-export default function(style) {
-    style.version = 9;
+export default function migrateV9(style: StyleSpecification): StyleSpecification {
+    (style.version as any) = 9;
 
     // remove user-specified refs
     style.layers = deref(style.layers);

package/src/style-spec/migrate.test.ts

@@ -1,3 +1,5 @@
+// @ts-nocheck
+
 import migrate from './migrate';
 import * as spec from './style-spec';
 import v8 from './reference/v8.json';
@@ -102,7 +104,7 @@ describe('migrate', () => {
         });
         expect(migrated.layers[0].layout['icon-image']).toEqual([
             'match',
-            ['get', 'type' ],
+            ['get', 'type'],
             'park',
             'some-icon',
             ''

package/src/style-spec/migrate.ts

@@ -1,24 +1,25 @@
 
 import migrateToV8 from './migrate/v8';
 import migrateToExpressions from './migrate/expressions';
+import type {StyleSpecification} from './types.g';
 
 /**
  * Migrate a Mapbox GL Style to the latest version.
  *
  * @private
  * @alias migrate
- * @param {object} style a Mapbox GL Style
- * @returns {Object} a migrated style
+ * @param {StyleSpecification} style a MapLibre GL Style
+ * @returns {StyleSpecification} a migrated style
  * @example
  * var fs = require('fs');
  * var migrate = require('maplibre-gl-style-spec').migrate;
  * var style = fs.readFileSync('./style.json', 'utf8');
  * fs.writeFileSync('./style.json', JSON.stringify(migrate(style)));
  */
-export default function(style) {
+export default function migrate(style: StyleSpecification): StyleSpecification {
     let migrated = false;
 
-    if (style.version === 7) {
+    if (style.version as any === 7) {
         style = migrateToV8(style);
         migrated = true;
     }

package/src/style-spec/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maplibre/maplibre-gl-style-spec",
   "description": "a specification for maplibre gl styles",
-  "version": "16.0.0",
+  "version": "16.1.0",
   "author": "MapLibre",
   "keywords": [
     "mapbox",

package/src/style-spec/read_style.ts

@@ -1,7 +1,8 @@
 import ParsingError from './error/parsing_error';
 import jsonlint from '@mapbox/jsonlint-lines-primitives';
+import type {StyleSpecification} from './types.g';
 
-export default function readStyle(style) {
+export default function readStyle(style: StyleSpecification | string | Buffer): StyleSpecification {
     if (style instanceof String || typeof style === 'string' || style instanceof Buffer) {
         try {
             return jsonlint.parse(style.toString());

package/src/style-spec/reference/latest.ts

@@ -1,3 +1,3 @@
 
-import spec from './v8.json';
+import spec from './v8.json' assert {type: 'json'};
 export default spec;

package/src/style-spec/reference/v8.json

@@ -1466,11 +1466,10 @@
       "property-type": "data-driven"
     },
     "icon-padding": {
-      "type": "number",
-      "default": 2,
-      "minimum": 0,
+      "type": "padding",
+      "default": [2],
       "units": "pixels",
-      "doc": "Size of the additional area around the icon bounding box used for detecting symbol collisions.",
+      "doc": "Size of additional area round the icon bounding box used for detecting symbol collisions. Values are declared using CSS margin shorthand syntax: a single value applies to all four sides; two values apply to [top/bottom, left/right]; three values apply to [top, left/right, bottom]; four values apply to [top, right, bottom, left]. For backwards compatibility, a single bare number is accepted, and treated the same as a one-element array - padding applied to all sides.",
       "requires": [
         "icon-image"
       ],
@@ -1480,15 +1479,19 @@
           "android": "2.0.1",
           "ios": "2.0.0",
           "macos": "0.1.0"
+        },
+        "data-driven styling": {
+          "js": "2.2.0"
         }
       },
       "expression": {
         "interpolated": true,
         "parameters": [
-          "zoom"
+          "zoom",
+          "feature"
         ]
       },
-      "property-type": "data-constant"
+      "property-type": "data-driven"
     },
     "icon-keep-upright": {
       "type": "boolean",

package/src/style-spec/style-spec.test.ts

@@ -67,7 +67,8 @@ function validSchema(k, v, obj, ref, version, kind) {
         'property-type',
         'formatted',
         'resolvedImage',
-        'promoteId'
+        'promoteId',
+        'padding'
     ]);
     const keys = [
         'default',

package/src/style-spec/style-spec.ts

@@ -55,6 +55,12 @@ export type StylePropertySpecification = {
     length?: number;
     transition: boolean;
     default?: Array<string>;
+} | {
+    type: 'padding';
+    'property-type': ExpressionType;
+    expression?: ExpressionSpecification;
+    transition: boolean;
+    default?: number | Array<number>;
 };
 
 import v8 from './reference/v8.json';
@@ -71,6 +77,7 @@ import featureFilter, {isExpressionFilter} from './feature_filter';
 
 import convertFilter from './feature_filter/convert';
 import Color from './util/color';
+import Padding from './util/padding';
 import {createFunction, isFunction} from './function';
 import convertFunction from './function/convert';
 import {eachSource, eachLayer, eachProperty} from './visit';
@@ -111,6 +118,7 @@ export {
     featureFilter,
     convertFilter,
     Color,
+    Padding,
     styleFunction as function,
     validate,
     visit