maplibre-gl 2.2.0-pre.3 → 2.2.1

package/src/source/raster_tile_source.test.ts

@@ -79,7 +79,7 @@ describe('RasterTileSource', () => {
 
         source.on('data', (e) => {
             if (e.sourceDataType === 'metadata') {
-                expect(source.tileBounds.bounds).toEqual({_sw:{lng: -47, lat: -7}, _ne:{lng: -45, lat: 90}});
+                expect(source.tileBounds.bounds).toEqual({_sw: {lng: -47, lat: -7}, _ne: {lng: -45, lat: 90}});
                 done();
             }
         });

package/src/source/source_cache.test.ts

@@ -485,7 +485,7 @@ describe('SourceCache / Source lifecycle', () => {
         transform.resize(511, 511);
         transform.zoom = 0;
 
-        const expected = [ new OverscaledTileID(0, 0, 0, 0, 0).key, new OverscaledTileID(0, 0, 0, 0, 0).key ];
+        const expected = [new OverscaledTileID(0, 0, 0, 0, 0).key, new OverscaledTileID(0, 0, 0, 0, 0).key];
         expect.assertions(expected.length);
 
         const sourceCache = createSourceCache({
@@ -1054,9 +1054,9 @@ describe('SourceCache#_updateRetainedTiles', () => {
 
         expect(retained).toEqual({
             // parent of ideal tile 0/0/0
-            '000' : new OverscaledTileID(0, 0, 0, 0, 0),
+            '000': new OverscaledTileID(0, 0, 0, 0, 0),
             // ideal tile id 1/0/1
-            '211' : new OverscaledTileID(1, 0, 1, 0, 1)
+            '211': new OverscaledTileID(1, 0, 1, 0, 1)
         });
 
         addTileSpy.mockClear();
@@ -1069,7 +1069,7 @@ describe('SourceCache#_updateRetainedTiles', () => {
         expect(getTileSpy).not.toHaveBeenCalled();
         expect(retainedLoaded).toEqual({
             // only ideal tile retained
-            '211' : new OverscaledTileID(1, 0, 1, 0, 1)
+            '211': new OverscaledTileID(1, 0, 1, 0, 1)
         });
     });
 
@@ -1119,9 +1119,9 @@ describe('SourceCache#_updateRetainedTiles', () => {
         expect(retained).toEqual({
             // parent of ideal tile (0, 0, 0) (only partially covered by loaded child
             // tiles, so we still need to load the parent)
-            '000' : new OverscaledTileID(0, 0, 0, 0, 0),
+            '000': new OverscaledTileID(0, 0, 0, 0, 0),
             // ideal tile id (1, 0, 0)
-            '011' : new OverscaledTileID(1, 0, 1, 0, 0),
+            '011': new OverscaledTileID(1, 0, 1, 0, 0),
             // loaded child tile (2, 0, 0)
             '022': new OverscaledTileID(2, 0, 2, 0, 0)
         });
@@ -1134,9 +1134,9 @@ describe('SourceCache#_updateRetainedTiles', () => {
         expect(retained).toEqual({
             // parent of ideal tile (0, 0, 0) (only partially covered by loaded child
             // tiles, so we still need to load the parent)
-            '000' : new OverscaledTileID(0, 0, 0, 0, 0),
+            '000': new OverscaledTileID(0, 0, 0, 0, 0),
             // ideal tile id (1, 0, 0)
-            '011' : new OverscaledTileID(1, 0, 1, 0, 0)
+            '011': new OverscaledTileID(1, 0, 1, 0, 0)
         });
 
     });
@@ -1163,7 +1163,7 @@ describe('SourceCache#_updateRetainedTiles', () => {
 
         expect(retained).toEqual({
             // ideal tile id (2, 0, 0)
-            '022' : new OverscaledTileID(2, 0, 2, 0, 0)
+            '022': new OverscaledTileID(2, 0, 2, 0, 0)
         });
 
     });
@@ -1191,7 +1191,7 @@ describe('SourceCache#_updateRetainedTiles', () => {
 
         expect(retained).toEqual({
             // ideal tile id (2, 0, 0)
-            '022' : new OverscaledTileID(2, 0, 2, 0, 0)
+            '022': new OverscaledTileID(2, 0, 2, 0, 0)
         });
 
     });
@@ -1352,7 +1352,7 @@ describe('SourceCache#tilesIn', () => {
                 expect(tiles[0].tile.tileID.key).toBe('011');
                 expect(tiles[0].tile.tileSize).toBe(512);
                 expect(tiles[0].scale).toBe(1);
-                expect(round(tiles[0].queryGeometry)).toEqual([{x: 4096, y: 4050}, {x:12288, y: 8146}]);
+                expect(round(tiles[0].queryGeometry)).toEqual([{x: 4096, y: 4050}, {x: 12288, y: 8146}]);
 
                 expect(tiles[1].tile.tileID.key).toBe('111');
                 expect(tiles[1].tile.tileSize).toBe(512);
@@ -1404,7 +1404,7 @@ describe('SourceCache#tilesIn', () => {
                 expect(tiles[0].tile.tileID.key).toBe('012');
                 expect(tiles[0].tile.tileSize).toBe(1024);
                 expect(tiles[0].scale).toBe(1);
-                expect(round(tiles[0].queryGeometry)).toEqual([{x: 4096, y: 4050}, {x:12288, y: 8146}]);
+                expect(round(tiles[0].queryGeometry)).toEqual([{x: 4096, y: 4050}, {x: 12288, y: 8146}]);
 
                 expect(tiles[1].tile.tileID.key).toBe('112');
                 expect(tiles[1].tile.tileSize).toBe(1024);

package/src/source/source_cache.ts

@@ -492,7 +492,7 @@ class SourceCache extends Evented {
      * are inside the viewport.
      * @private
      */
-    update(transform: Transform, terrain: Terrain) {
+    update(transform: Transform, terrain?: Terrain) {
         this.transform = transform;
         this.terrain = terrain;
         if (!this._sourceLoaded || this._paused) { return; }

package/src/source/terrain_source_cache.ts

@@ -133,11 +133,11 @@ export default class TerrainSourceCache extends Evented {
     }
 
     /**
-     * searches for the corresponding current renderable terrain-tiles
+     * Searches for the corresponding current renderable terrain-tiles
      * @param {OverscaledTileID} tileID - the tile to look for
-     * @returns {[_:string]: Tile} - the tiles that were found
+     * @returns {Record<string, OverscaledTileID>} - the tiles that were found
      */
-    getTerrainCoords(tileID: OverscaledTileID): {[_: string]: OverscaledTileID} {
+    getTerrainCoords(tileID: OverscaledTileID): Record<string, OverscaledTileID> {
         const coords = {};
         for (const key of this._renderableTilesKeys) {
             const _tileID = this._tiles[key].tileID;

package/src/source/vector_tile_source.test.ts

@@ -253,7 +253,7 @@ describe('VectorTileSource', () => {
 
         source.on('data', (e) => {
             if (e.sourceDataType === 'metadata') {
-                expect(source.tileBounds.bounds).toEqual({_sw:{lng: -47, lat: -7}, _ne:{lng: -45, lat: 90}});
+                expect(source.tileBounds.bounds).toEqual({_sw: {lng: -47, lat: -7}, _ne: {lng: -45, lat: 90}});
                 done();
             }
         });

package/src/source/vector_tile_worker_source.test.ts

@@ -236,7 +236,7 @@ describe('vector tile worker source', () => {
 
         const source = new VectorTileWorkerSource(actor, layerIndex, [], loadVectorData);
 
-        window.performance.getEntriesByName = jest.fn().mockReturnValue([ exampleResourceTiming ]);
+        window.performance.getEntriesByName = jest.fn().mockReturnValue([exampleResourceTiming]);
 
         source.loadTile({
             source: 'source',

package/src/source/video_source.test.ts

@@ -19,7 +19,7 @@ describe('VideoSource', () => {
     // Attribution File:Volcano Lava Sample.webm: U.S. Geological Survey (USGS), Public domain, via Wikimedia Commons
     const source = createSource({
         type: 'video',
-        urls : [ 'cropped.mp4', 'https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm' ],
+        urls: ['cropped.mp4', 'https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm'],
         coordinates: [
             [-76.54, 39.18],
             [-76.52, 39.18],
@@ -50,7 +50,7 @@ describe('VideoSource', () => {
         const source = createSource({
             type: 'video',
             video: el,
-            urls : [ 'cropped.mp4', 'https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm' ],
+            urls: ['cropped.mp4', 'https://upload.wikimedia.org/wikipedia/commons/2/22/Volcano_Lava_Sample.webm'],
             coordinates: [
                 [-76.54, 39.18],
                 [-76.52, 39.18],

package/src/source/worker.ts

@@ -7,6 +7,7 @@ import GeoJSONWorkerSource from './geojson_worker_source';
 import assert from 'assert';
 import {plugin as globalRTLTextPlugin} from './rtl_text_plugin';
 import {enforceCacheSizeLimit} from '../util/tile_request_cache';
+import {isWorker} from '../util/util';
 
 import type {
     WorkerSource,
@@ -267,9 +268,6 @@ export default class Worker {
     }
 }
 
-/* global self, WorkerGlobalScope */
-if (typeof WorkerGlobalScope !== 'undefined' &&
-    typeof self !== 'undefined' &&
-    self instanceof WorkerGlobalScope) {
+if (isWorker()) {
     (self as any).worker = new Worker(self as any);
 }

package/src/style/light.test.ts

@@ -77,7 +77,7 @@ describe('Light#setLight', () => {
         const light = new Light({});
 
         const lightSpy = jest.spyOn(light, '_validate');
-        light.setLight({color: [999]}, {validate: false});
+        light.setLight({color: [999]} as any, {validate: false});
         light.updateTransitions({transition: false} as any as TransitionParameters);
         light.recalculate({zoom: 16, zoomHistory: {}, now: 10} as EvaluationParameters);
 

package/src/style/style.test.ts

@@ -883,7 +883,7 @@ describe('Style#addLayer', () => {
                 'type': 'geojson',
                 'data': {
                     'type': 'Point',
-                    'coordinates': [ 0, 0]
+                    'coordinates': [0, 0]
                 }
             };
             const layer = {id: 'inline-source-layer', type: 'circle', source} as any as LayerSpecification;
@@ -1901,7 +1901,7 @@ describe('Style#queryRenderedFeatures', () => {
                 errors++;
             }
         });
-        style.queryRenderedFeatures([{x: 0, y: 0}], {layers:'string'}, transform);
+        style.queryRenderedFeatures([{x: 0, y: 0}], {layers: 'string'}, transform);
         expect(errors).toBe(1);
     });
 
@@ -1939,7 +1939,7 @@ describe('Style#queryRenderedFeatures', () => {
         jest.spyOn(style, 'fire').mockImplementation((event) => {
             if (event['error'] && event['error'].message.includes('does not exist in the map\'s style and cannot be queried for features.')) errors++;
         });
-        const results = style.queryRenderedFeatures([{x: 0, y: 0}], {layers:['merp']}, transform);
+        const results = style.queryRenderedFeatures([{x: 0, y: 0}], {layers: ['merp']}, transform);
         expect(errors).toBe(1);
         expect(results).toHaveLength(0);
     });

package/src/style/style.ts

@@ -441,7 +441,7 @@ class Style extends Evented {
         for (const sourceId in sourcesUsedBefore) {
             const sourceCache = this.sourceCaches[sourceId];
             if (sourcesUsedBefore[sourceId] !== sourceCache.used) {
-                sourceCache.fire(new Event('data', {sourceDataType: 'visibility', dataType:'source', sourceId}));
+                sourceCache.fire(new Event('data', {sourceDataType: 'visibility', dataType: 'source', sourceId}));
             }
         }
 
@@ -663,7 +663,7 @@ class Style extends Evented {
         const sourceCache = this.sourceCaches[id];
         delete this.sourceCaches[id];
         delete this._updatedSources[id];
-        sourceCache.fire(new Event('data', {sourceDataType: 'metadata', dataType:'source', sourceId: id}));
+        sourceCache.fire(new Event('data', {sourceDataType: 'metadata', dataType: 'source', sourceId: id}));
         sourceCache.setEventedParent(null);
         sourceCache.onRemove(this.map);
         this._changed = true;

package/src/style/style_layer/background_style_layer_properties.g.ts

@@ -15,6 +15,7 @@ import {
 } from '../properties';
 
 import type Color from '../../style-spec/util/color';
+import type Padding from '../../style-spec/util/padding';
 
 import type Formatted from '../../style-spec/expression/types/formatted';
 

package/src/style/style_layer/circle_style_layer_properties.g.ts

@@ -15,6 +15,7 @@ import {
 } from '../properties';
 
 import type Color from '../../style-spec/util/color';
+import type Padding from '../../style-spec/util/padding';
 
 import type Formatted from '../../style-spec/expression/types/formatted';
 

package/src/style/style_layer/fill_extrusion_style_layer_properties.g.ts

@@ -15,6 +15,7 @@ import {
 } from '../properties';
 
 import type Color from '../../style-spec/util/color';
+import type Padding from '../../style-spec/util/padding';
 
 import type Formatted from '../../style-spec/expression/types/formatted';
 

package/src/style/style_layer/fill_style_layer_properties.g.ts

@@ -15,6 +15,7 @@ import {
 } from '../properties';
 
 import type Color from '../../style-spec/util/color';
+import type Padding from '../../style-spec/util/padding';
 
 import type Formatted from '../../style-spec/expression/types/formatted';
 

package/src/style/style_layer/heatmap_style_layer_properties.g.ts

@@ -15,6 +15,7 @@ import {
 } from '../properties';
 
 import type Color from '../../style-spec/util/color';
+import type Padding from '../../style-spec/util/padding';
 
 import type Formatted from '../../style-spec/expression/types/formatted';
 

package/src/style/style_layer/hillshade_style_layer_properties.g.ts

@@ -15,6 +15,7 @@ import {
 } from '../properties';
 
 import type Color from '../../style-spec/util/color';
+import type Padding from '../../style-spec/util/padding';
 
 import type Formatted from '../../style-spec/expression/types/formatted';
 

package/src/style/style_layer/line_style_layer_properties.g.ts

@@ -15,6 +15,7 @@ import {
 } from '../properties';
 
 import type Color from '../../style-spec/util/color';
+import type Padding from '../../style-spec/util/padding';
 
 import type Formatted from '../../style-spec/expression/types/formatted';
 

package/src/style/style_layer/raster_style_layer_properties.g.ts

@@ -15,6 +15,7 @@ import {
 } from '../properties';
 
 import type Color from '../../style-spec/util/color';
+import type Padding from '../../style-spec/util/padding';
 
 import type Formatted from '../../style-spec/expression/types/formatted';
 

package/src/style/style_layer/symbol_style_layer.ts

@@ -1,7 +1,7 @@
 import StyleLayer from '../style_layer';
 
 import assert from 'assert';
-import SymbolBucket from '../../data/bucket/symbol_bucket';
+import SymbolBucket, {SymbolFeature} from '../../data/bucket/symbol_bucket';
 import resolveTokens from '../../util/resolve_tokens';
 import properties, {SymbolLayoutPropsPossiblyEvaluated, SymbolPaintPropsPossiblyEvaluated} from './symbol_style_layer_properties.g';
 
@@ -204,4 +204,19 @@ export function getOverlapMode(layout: PossiblyEvaluated<SymbolLayoutProps, Symb
     return result;
 }
 
+export type SymbolPadding = [number, number, number, number];
+
+export function getIconPadding(layout: PossiblyEvaluated<SymbolLayoutProps, SymbolLayoutPropsPossiblyEvaluated>, feature: SymbolFeature, canonical: CanonicalTileID, pixelRatio = 1): SymbolPadding {
+    // Support text-padding in addition to icon-padding? Unclear how to apply asymmetric text-padding to the radius for collision circles.
+    const result = layout.get('icon-padding').evaluate(feature, {}, canonical);
+    const values = result && result.values;
+
+    return [
+        values[0] * pixelRatio,
+        values[1] * pixelRatio,
+        values[2] * pixelRatio,
+        values[3] * pixelRatio,
+    ];
+}
+
 export default SymbolStyleLayer;

package/src/style/style_layer/symbol_style_layer_properties.g.ts

@@ -15,6 +15,7 @@ import {
 } from '../properties';
 
 import type Color from '../../style-spec/util/color';
+import type Padding from '../../style-spec/util/padding';
 
 import type Formatted from '../../style-spec/expression/types/formatted';
 
@@ -41,7 +42,7 @@ export type SymbolLayoutProps = {
     "icon-text-fit-padding": DataConstantProperty<[number, number, number, number]>,
     "icon-image": DataDrivenProperty<ResolvedImage>,
     "icon-rotate": DataDrivenProperty<number>,
-    "icon-padding": DataConstantProperty<number>,
+    "icon-padding": DataDrivenProperty<Padding>,
     "icon-keep-upright": DataConstantProperty<boolean>,
     "icon-offset": DataDrivenProperty<[number, number]>,
     "icon-anchor": DataDrivenProperty<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">,
@@ -87,7 +88,7 @@ export type SymbolLayoutPropsPossiblyEvaluated = {
     "icon-text-fit-padding": [number, number, number, number],
     "icon-image": PossiblyEvaluatedPropertyValue<ResolvedImage>,
     "icon-rotate": PossiblyEvaluatedPropertyValue<number>,
-    "icon-padding": number,
+    "icon-padding": PossiblyEvaluatedPropertyValue<Padding>,
     "icon-keep-upright": boolean,
     "icon-offset": PossiblyEvaluatedPropertyValue<[number, number]>,
     "icon-anchor": PossiblyEvaluatedPropertyValue<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">,
@@ -133,7 +134,7 @@ const layout: Properties<SymbolLayoutProps> = new Properties({
     "icon-text-fit-padding": new DataConstantProperty(styleSpec["layout_symbol"]["icon-text-fit-padding"] as any as StylePropertySpecification),
     "icon-image": new DataDrivenProperty(styleSpec["layout_symbol"]["icon-image"] as any as StylePropertySpecification),
     "icon-rotate": new DataDrivenProperty(styleSpec["layout_symbol"]["icon-rotate"] as any as StylePropertySpecification),
-    "icon-padding": new DataConstantProperty(styleSpec["layout_symbol"]["icon-padding"] as any as StylePropertySpecification),
+    "icon-padding": new DataDrivenProperty(styleSpec["layout_symbol"]["icon-padding"] as any as StylePropertySpecification),
     "icon-keep-upright": new DataConstantProperty(styleSpec["layout_symbol"]["icon-keep-upright"] as any as StylePropertySpecification),
     "icon-offset": new DataDrivenProperty(styleSpec["layout_symbol"]["icon-offset"] as any as StylePropertySpecification),
     "icon-anchor": new DataDrivenProperty(styleSpec["layout_symbol"]["icon-anchor"] as any as StylePropertySpecification),

package/src/style-spec/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 16.1.0
+
+### ✨ Features and improvements
+* Update `icon-padding` symbol layout property to support asymmetric padding [#1289](https://github.com/maplibre/maplibre-gl-js/pull/1289)
+
 ## 16.0.0
 
 ### Breaking changes

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

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

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

@@ -88,7 +88,7 @@ test('diff', () => {
     }, {
         layers: [{id: 'a', filter: ['==', 'foo', 'baz']}]
     })).toEqual([
-        {command: 'setFilter', args: ['a', [ '==', 'foo', 'baz' ] ]}
+        {command: 'setFilter', args: ['a', ['==', 'foo', 'baz']]}
     ]);
 
     expect(diffStyles({
@@ -329,9 +329,9 @@ test('diff', () => {
     ]);
 
     expect(diffStyles({
-        layers: [ {id: 'a', source: 'source-one'} ]
+        layers: [{id: 'a', source: 'source-one'}]
     }, {
-        layers: [ {id: 'a', source: 'source-two'} ]
+        layers: [{id: 'a', source: 'source-two'}]
     })).toEqual([
         {command: 'removeLayer', args: ['a']},
         {command: 'addLayer', args: [{id: 'a', source: 'source-two'}, undefined]}

package/src/style-spec/empty.ts

@@ -1,6 +1,7 @@
 import latest from './reference/latest';
+import {StyleSpecification} from './types.g';
 
-export default function emptyStyle() {
+export default function emptyStyle(): StyleSpecification {
     const style = {};
 
     const version = latest['$version'];
@@ -25,5 +26,5 @@ export default function emptyStyle() {
         }
     }
 
-    return style;
+    return style as StyleSpecification;
 }

package/src/style-spec/expression/definitions/coercion.ts

@@ -1,7 +1,7 @@
 import assert from 'assert';
 
 import {BooleanType, ColorType, NumberType, StringType, ValueType} from '../types';
-import {Color, toString as valueToString, validateRGBA} from '../values';
+import {Color, Padding, toString as valueToString, validateRGBA} from '../values';
 import RuntimeError from '../runtime_error';
 import Formatted from '../types/formatted';
 import ResolvedImage from '../types/resolved_image';
@@ -81,7 +81,18 @@ class Coercion implements Expression {
                     }
                 }
             }
-            throw new RuntimeError(error || `Could not parse color from value '${typeof input === 'string' ? input : String(JSON.stringify(input))}'`);
+            throw new RuntimeError(error || `Could not parse color from value '${typeof input === 'string' ? input : JSON.stringify(input)}'`);
+        } else if (this.type.kind === 'padding') {
+            let input;
+            for (const arg of this.args) {
+                input = arg.evaluate(ctx);
+
+                const pad = Padding.parse(input);
+                if (pad) {
+                    return pad;
+                }
+            }
+            throw new RuntimeError(`Could not parse padding from value '${typeof input === 'string' ? input : JSON.stringify(input)}'`);
         } else if (this.type.kind === 'number') {
             let value = null;
             for (const arg of this.args) {

package/src/style-spec/expression/definitions/interpolate.ts

@@ -135,6 +135,7 @@ class Interpolate implements Expression {
 
         if (outputType.kind !== 'number' &&
             outputType.kind !== 'color' &&
+            outputType.kind !== 'padding' &&
             !(
                 outputType.kind === 'array' &&
                 outputType.itemType.kind === 'number' &&

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

@@ -40,7 +40,7 @@ describe('createPropertyExpression', () => {
 
 describe('evaluate expression', () => {
     test('warns and falls back to default for invalid enum values', () => {
-        const {value} = createPropertyExpression([ 'get', 'x' ], {
+        const {value} = createPropertyExpression(['get', 'x'], {
             type: 'enum',
             values: {a: {}, b: {}, c: {}},
             default: 'a',

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

@@ -2,6 +2,9 @@ import type {Type} from './types';
 import type ParsingContext from './parsing_context';
 import type EvaluationContext from './evaluation_context';
 
+/**
+ * Expression
+ */
 export interface Expression {
     readonly type: Type;
     evaluate(ctx: EvaluationContext): any;

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

@@ -379,8 +379,10 @@ export function normalizePropertyExpression<T>(
 
     } else {
         let constant: any = value;
-        if (typeof value === 'string' && specification.type === 'color') {
+        if (specification.type === 'color' && typeof value === 'string') {
             constant = Color.parse(value);
+        } else if (specification.type === 'padding' && (typeof value === 'number' || Array.isArray(value))) {
+            constant = Padding.parse(value as (number | number[]));
         }
         return {
             kind: 'constant',
@@ -430,7 +432,8 @@ function findZoomCurve(expression: Expression): Step | Interpolate | ParsingErro
     return result;
 }
 
-import {ColorType, StringType, NumberType, BooleanType, ValueType, FormattedType, ResolvedImageType, array} from './types';
+import {ColorType, StringType, NumberType, BooleanType, ValueType, FormattedType, PaddingType, ResolvedImageType, array} from './types';
+import Padding from '../util/padding';
 
 function getExpectedType(spec: StylePropertySpecification): Type {
     const types = {
@@ -440,6 +443,7 @@ function getExpectedType(spec: StylePropertySpecification): Type {
         enum: StringType,
         boolean: BooleanType,
         formatted: FormattedType,
+        padding: PaddingType,
         resolvedImage: ResolvedImageType
     };
 
@@ -458,6 +462,8 @@ function getDefaultValue(spec: StylePropertySpecification): Value {
         return new Color(0, 0, 0, 0);
     } else if (spec.type === 'color') {
         return Color.parse(spec.default) || null;
+    } else if (spec.type === 'padding') {
+        return Padding.parse(spec.default) || null;
     } else if (spec.default === undefined) {
         return null;
     } else {

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

@@ -120,6 +120,8 @@ class ParsingContext {
                         parsed = annotate(parsed, expected, options.typeAnnotation || 'assert');
                     } else if ((expected.kind === 'color' || expected.kind === 'formatted' || expected.kind === 'resolvedImage') && (actual.kind === 'value' || actual.kind === 'string')) {
                         parsed = annotate(parsed, expected, options.typeAnnotation || 'coerce');
+                    } else if (expected.kind === 'padding' && (actual.kind === 'value' || actual.kind === 'number' || actual.kind === 'array')) {
+                        parsed = annotate(parsed, expected, options.typeAnnotation || 'coerce');
                     } else if (this.checkSubtype(expected, actual)) {
                         return null;
                     }

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

@@ -28,6 +28,9 @@ export type CollatorTypeT = {
 export type FormattedTypeT = {
     kind: 'formatted';
 };
+export type PaddingTypeT = {
+    kind: 'padding';
+};
 export type ResolvedImageTypeT = {
     kind: 'resolvedImage';
 };
@@ -35,7 +38,7 @@ export type ResolvedImageTypeT = {
 export type EvaluationKind = 'constant' | 'source' | 'camera' | 'composite';
 
 export type Type = NullTypeT | NumberTypeT | StringTypeT | BooleanTypeT | ColorTypeT | ObjectTypeT | ValueTypeT | // eslint-disable-line no-use-before-define
-ArrayType | ErrorTypeT | CollatorTypeT | FormattedTypeT | ResolvedImageTypeT;
+ArrayType | ErrorTypeT | CollatorTypeT | FormattedTypeT | PaddingTypeT | ResolvedImageTypeT;
 
 export type ArrayType = {
     kind: 'array';
@@ -55,6 +58,7 @@ export const ValueType = {kind: 'value'} as ValueTypeT;
 export const ErrorType = {kind: 'error'} as ErrorTypeT;
 export const CollatorType = {kind: 'collator'} as CollatorTypeT;
 export const FormattedType = {kind: 'formatted'} as FormattedTypeT;
+export const PaddingType = {kind: 'padding'} as PaddingTypeT;
 export const ResolvedImageType = {kind: 'resolvedImage'} as ResolvedImageTypeT;
 
 export function array(itemType: Type, N?: number | null): ArrayType {
@@ -85,6 +89,7 @@ const valueMemberTypes = [
     FormattedType,
     ObjectType,
     array(ValueType),
+    PaddingType,
     ResolvedImageType
 ];
 

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

@@ -3,8 +3,9 @@ import assert from 'assert';
 import Color from '../util/color';
 import Collator from './types/collator';
 import Formatted from './types/formatted';
+import Padding from '../util/padding';
 import ResolvedImage from './types/resolved_image';
-import {NullType, NumberType, StringType, BooleanType, ColorType, ObjectType, ValueType, CollatorType, FormattedType, ResolvedImageType, array} from './types';
+import {NullType, NumberType, StringType, BooleanType, ColorType, ObjectType, ValueType, CollatorType, FormattedType, ResolvedImageType, array, PaddingType} from './types';
 
 import type {Type} from './types';
 
@@ -27,7 +28,7 @@ export function validateRGBA(r: unknown, g: unknown, b: unknown, a?: unknown): s
     return null;
 }
 
-export type Value = null | string | boolean | number | Color | Collator | Formatted | ResolvedImage | ReadonlyArray<Value> | {
+export type Value = null | string | boolean | number | Color | Collator | Formatted | Padding | ResolvedImage | ReadonlyArray<Value> | {
     readonly [x: string]: Value;
 };
 
@@ -46,6 +47,8 @@ export function isValue(mixed: unknown): boolean {
         return true;
     } else if (mixed instanceof Formatted) {
         return true;
+    } else if (mixed instanceof Padding) {
+        return true;
     } else if (mixed instanceof ResolvedImage) {
         return true;
     } else if (Array.isArray(mixed)) {
@@ -82,6 +85,8 @@ export function typeOf(value: Value): Type {
         return CollatorType;
     } else if (value instanceof Formatted) {
         return FormattedType;
+    } else if (value instanceof Padding) {
+        return PaddingType;
     } else if (value instanceof ResolvedImage) {
         return ResolvedImageType;
     } else if (Array.isArray(value)) {
@@ -113,11 +118,11 @@ export function toString(value: Value) {
         return '';
     } else if (type === 'string' || type === 'number' || type === 'boolean') {
         return String(value);
-    } else if (value instanceof Color || value instanceof Formatted || value instanceof ResolvedImage) {
+    } else if (value instanceof Color || value instanceof Formatted || value instanceof Padding || value instanceof ResolvedImage) {
         return value.toString();
     } else {
         return JSON.stringify(value);
     }
 }
 
-export {Color, Collator};
+export {Color, Collator, Padding};