maplibre-gl 2.0.2 → 2.1.0

package/src/source/vector_tile_worker_source.test.ts

@@ -0,0 +1,306 @@
+import fs from 'fs';
+import path from 'path';
+import vt from '@mapbox/vector-tile';
+import Protobuf from 'pbf';
+import VectorTileWorkerSource from '../source/vector_tile_worker_source';
+import StyleLayerIndex from '../style/style_layer_index';
+import {fakeServer, SinonFakeServer} from 'sinon';
+import Actor from '../util/actor';
+import {TileParameters, WorkerTileParameters} from './worker_source';
+import WorkerTile from './worker_tile';
+import {setPerformance} from '../util/test/util';
+
+describe('vector tile worker source', () => {
+    const actor = {send: () => {}} as any as Actor;
+    let server: SinonFakeServer;
+    let originalGetEntriesByName;
+    let originalMeasure;
+    let originalMark;
+
+    beforeEach(() => {
+        global.fetch = null;
+        server = fakeServer.create();
+        setPerformance();
+        originalGetEntriesByName = window.performance.getEntriesByName;
+        originalMeasure = window.performance.measure;
+        originalMark = window.performance.mark;
+
+    });
+
+    afterEach(() => {
+        server.restore();
+        jest.clearAllMocks();
+        window.performance.getEntriesByName = originalGetEntriesByName;
+        window.performance.measure = originalMeasure;
+        window.performance.mark = originalMark;
+    });
+    test('VectorTileWorkerSource#abortTile aborts pending request', () => {
+        const source = new VectorTileWorkerSource(actor, new StyleLayerIndex(), []);
+
+        source.loadTile({
+            source: 'source',
+            uid: 0,
+            tileID: {overscaledZ: 0, wrap: 0, canonical: {x: 0, y: 0, z: 0, w: 0}},
+            request: {url: 'http://localhost:2900/abort'}
+        } as any as WorkerTileParameters, (err, res) => {
+            expect(err).toBeFalsy();
+            expect(res).toBeFalsy();
+        });
+
+        source.abortTile({
+            source: 'source',
+            uid: 0
+        } as any as TileParameters, (err, res) => {
+            expect(err).toBeFalsy();
+            expect(res).toBeFalsy();
+        });
+
+        expect(source.loading).toEqual({});
+    });
+
+    test('VectorTileWorkerSource#removeTile removes loaded tile', () => {
+        const source = new VectorTileWorkerSource(actor, new StyleLayerIndex(), []);
+
+        source.loaded = {
+            '0': {} as WorkerTile
+        };
+
+        source.removeTile({
+            source: 'source',
+            uid: 0
+        } as any as TileParameters, (err, res) => {
+            expect(err).toBeFalsy();
+            expect(res).toBeFalsy();
+        });
+
+        expect(source.loaded).toEqual({});
+    });
+
+    test('VectorTileWorkerSource#reloadTile reloads a previously-loaded tile', () => {
+        const source = new VectorTileWorkerSource(actor, new StyleLayerIndex(), []);
+        const parse = jest.fn();
+
+        source.loaded = {
+            '0': {
+                status: 'done',
+                vectorTile: {},
+                parse
+            } as any as WorkerTile
+        };
+
+        const callback = jest.fn();
+        source.reloadTile({uid: 0} as any as WorkerTileParameters, callback);
+        expect(parse).toHaveBeenCalledTimes(1);
+
+        parse.mock.calls[0][4]();
+        expect(callback).toHaveBeenCalledTimes(1);
+    });
+
+    test('VectorTileWorkerSource#reloadTile queues a reload when parsing is in progress', () => {
+        const source = new VectorTileWorkerSource(actor, new StyleLayerIndex(), []);
+        const parse = jest.fn();
+
+        source.loaded = {
+            '0': {
+                status: 'done',
+                vectorTile: {},
+                parse
+            } as any as WorkerTile
+        };
+
+        const callback1 = jest.fn();
+        const callback2 = jest.fn();
+        source.reloadTile({uid: 0} as any as WorkerTileParameters, callback1);
+        expect(parse).toHaveBeenCalledTimes(1);
+
+        source.loaded[0].status = 'parsing';
+        source.reloadTile({uid: 0} as any as WorkerTileParameters, callback2);
+        expect(parse).toHaveBeenCalledTimes(1);
+
+        parse.mock.calls[0][4]();
+        expect(parse).toHaveBeenCalledTimes(2);
+        expect(callback1).toHaveBeenCalledTimes(1);
+        expect(callback2).toHaveBeenCalledTimes(0);
+
+        parse.mock.calls[1][4]();
+        expect(callback1).toHaveBeenCalledTimes(1);
+        expect(callback2).toHaveBeenCalledTimes(1);
+    });
+
+    test('VectorTileWorkerSource#reloadTile handles multiple pending reloads', () => {
+        // https://github.com/mapbox/mapbox-gl-js/issues/6308
+        const source = new VectorTileWorkerSource(actor, new StyleLayerIndex(), []);
+        const parse = jest.fn();
+
+        source.loaded = {
+            '0': {
+                status: 'done',
+                vectorTile: {},
+                parse
+            } as any as WorkerTile
+        };
+
+        const callback1 = jest.fn();
+        const callback2 = jest.fn();
+        const callback3 = jest.fn();
+        source.reloadTile({uid: 0} as any as WorkerTileParameters, callback1);
+        expect(parse).toHaveBeenCalledTimes(1);
+
+        source.loaded[0].status = 'parsing';
+        source.reloadTile({uid: 0} as any as WorkerTileParameters, callback2);
+        expect(parse).toHaveBeenCalledTimes(1);
+
+        parse.mock.calls[0][4]();
+        expect(parse).toHaveBeenCalledTimes(2);
+        expect(callback1).toHaveBeenCalledTimes(1);
+        expect(callback2).toHaveBeenCalledTimes(0);
+        expect(callback3).toHaveBeenCalledTimes(0);
+
+        source.reloadTile({uid: 0} as any as WorkerTileParameters, callback3);
+        expect(parse).toHaveBeenCalledTimes(2);
+        expect(callback1).toHaveBeenCalledTimes(1);
+        expect(callback2).toHaveBeenCalledTimes(0);
+        expect(callback3).toHaveBeenCalledTimes(0);
+
+        parse.mock.calls[1][4]();
+        expect(parse).toHaveBeenCalledTimes(3);
+        expect(callback1).toHaveBeenCalledTimes(1);
+        expect(callback2).toHaveBeenCalledTimes(1);
+        expect(callback3).toHaveBeenCalledTimes(0);
+
+        parse.mock.calls[2][4]();
+        expect(callback1).toHaveBeenCalledTimes(1);
+        expect(callback2).toHaveBeenCalledTimes(1);
+        expect(callback3).toHaveBeenCalledTimes(1);
+
+    });
+
+    test('VectorTileWorkerSource#reloadTile does not reparse tiles with no vectorTile data but does call callback', () => {
+        const source = new VectorTileWorkerSource(actor, new StyleLayerIndex(), []);
+        const parse = jest.fn();
+
+        source.loaded = {
+            '0': {
+                status: 'done',
+                parse
+            } as any as WorkerTile
+        };
+
+        const callback = jest.fn();
+
+        source.reloadTile({uid: 0} as any as WorkerTileParameters, callback);
+        expect(parse).not.toHaveBeenCalled();
+        expect(callback).toHaveBeenCalledTimes(1);
+
+    });
+
+    test('VectorTileWorkerSource provides resource timing information', done => {
+        const rawTileData = fs.readFileSync(path.join(__dirname, '/../../test/fixtures/mbsv5-6-18-23.vector.pbf'));
+
+        function loadVectorData(params, callback) {
+            return callback(null, {
+                vectorTile: new vt.VectorTile(new Protobuf(rawTileData)),
+                rawData: rawTileData,
+                cacheControl: null,
+                expires: null
+            });
+        }
+
+        const exampleResourceTiming = {
+            connectEnd: 473,
+            connectStart: 473,
+            decodedBodySize: 86494,
+            domainLookupEnd: 473,
+            domainLookupStart: 473,
+            duration: 341,
+            encodedBodySize: 52528,
+            entryType: 'resource',
+            fetchStart: 473.5,
+            initiatorType: 'xmlhttprequest',
+            name: 'http://localhost:2900/faketile.pbf',
+            nextHopProtocol: 'http/1.1',
+            redirectEnd: 0,
+            redirectStart: 0,
+            requestStart: 477,
+            responseEnd: 815,
+            responseStart: 672,
+            secureConnectionStart: 0
+        };
+
+        const layerIndex = new StyleLayerIndex([{
+            id: 'test',
+            source: 'source',
+            'source-layer': 'test',
+            type: 'fill'
+        }]);
+
+        const source = new VectorTileWorkerSource(actor, layerIndex, [], loadVectorData);
+
+        window.performance.getEntriesByName = jest.fn().mockReturnValue([ exampleResourceTiming ]);
+
+        source.loadTile({
+            source: 'source',
+            uid: 0,
+            tileID: {overscaledZ: 0, wrap: 0, canonical: {x: 0, y: 0, z: 0, w: 0}},
+            request: {url: 'http://localhost:2900/faketile.pbf', collectResourceTiming: true}
+        } as any as WorkerTileParameters, (err, res) => {
+            expect(err).toBeFalsy();
+            expect(res.resourceTiming[0]).toEqual(exampleResourceTiming);
+            done();
+        });
+    });
+
+    test('VectorTileWorkerSource provides resource timing information (fallback method)', done => {
+        const rawTileData = fs.readFileSync(path.join(__dirname, '/../../test/fixtures/mbsv5-6-18-23.vector.pbf'));
+
+        function loadVectorData(params, callback) {
+            return callback(null, {
+                vectorTile: new vt.VectorTile(new Protobuf(rawTileData)),
+                rawData: rawTileData,
+                cacheControl: null,
+                expires: null
+            });
+        }
+
+        const layerIndex = new StyleLayerIndex([{
+            id: 'test',
+            source: 'source',
+            'source-layer': 'test',
+            type: 'fill'
+        }]);
+
+        const source = new VectorTileWorkerSource(actor, layerIndex, [], loadVectorData);
+
+        const sampleMarks = [100, 350];
+        const marks = {};
+        const measures = {};
+        window.performance.getEntriesByName = jest.fn().mockImplementation(name => (measures[name] || []));
+        window.performance.mark = jest.fn().mockImplementation(name => {
+            marks[name] = sampleMarks.shift();
+            return null;
+        });
+        window.performance.measure = jest.fn().mockImplementation((name, start, end) => {
+            measures[name] = measures[name] || [];
+            measures[name].push({
+                duration: marks[end] - marks[start],
+                entryType: 'measure',
+                name,
+                startTime: marks[start]
+            });
+            return null;
+        });
+
+        source.loadTile({
+            source: 'source',
+            uid: 0,
+            tileID: {overscaledZ: 0, wrap: 0, canonical: {x: 0, y: 0, z: 0, w: 0}},
+            request: {url: 'http://localhost:2900/faketile.pbf', collectResourceTiming: true}
+        } as any as WorkerTileParameters, (err, res) => {
+            expect(err).toBeFalsy();
+            expect(res.resourceTiming[0]).toEqual(
+                {'duration': 250, 'entryType': 'measure', 'name': 'http://localhost:2900/faketile.pbf', 'startTime': 100}
+            );
+            done();
+        });
+    });
+});

package/src/style/load_sprite.ts

@@ -11,10 +11,11 @@ import type {Cancelable} from '../types/cancelable';
 export default function(
   baseURL: string,
   requestManager: RequestManager,
+  pixelRatio: number,
   callback: Callback<{[_: string]: StyleImage}>
 ): Cancelable {
     let json: any, image, error;
-    const format = devicePixelRatio > 1 ? '@2x' : '';
+    const format = pixelRatio > 1 ? '@2x' : '';
 
     let jsonRequest = getJSON(requestManager.transformRequest(requestManager.normalizeSpriteURL(baseURL, format, '.json'), ResourceType.SpriteJSON), (err?: Error | null, data?: any | null) => {
         jsonRequest = null;

package/src/style/properties.ts

@@ -730,7 +730,7 @@ export class Properties<Props> {
     defaultPropertyValues: {[K in keyof Props]: PropertyValue<unknown, any>};
     defaultTransitionablePropertyValues: {[K in keyof Props]: TransitionablePropertyValue<unknown, unknown>};
     defaultTransitioningPropertyValues: {[K in keyof Props]: TransitioningPropertyValue<unknown, unknown>};
-    defaultPossiblyEvaluatedValues: {[K in keyof Props]: PossiblyEvaluatedPropertyValue<unknown>};;
+    defaultPossiblyEvaluatedValues: {[K in keyof Props]: PossiblyEvaluatedPropertyValue<unknown>};
     overridableProperties: Array<string>;
 
     constructor(properties: Props) {

package/src/style/query_utils.ts

@@ -1,4 +1,4 @@
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 
 import type {PossiblyEvaluatedPropertyValue} from './properties';
 import type StyleLayer from '../style/style_layer';

package/src/style/style.test.ts

@@ -60,6 +60,10 @@ class StubMap extends Evented {
     _getMapId() {
         return 1;
     }
+
+    getPixelRatio() {
+        return 1;
+    }
 }
 
 const getStubMap = () => new StubMap() as any;

package/src/style/style.ts

@@ -276,7 +276,7 @@ class Style extends Evented {
     }
 
     _loadSprite(url: string) {
-        this._spriteRequest = loadSprite(url, this.map._requestManager, (err, images) => {
+        this._spriteRequest = loadSprite(url, this.map._requestManager, this.map.getPixelRatio(), (err, images) => {
             this._spriteRequest = null;
             if (err) {
                 this.fire(new ErrorEvent(err));

package/src/style/style_layer/circle_style_layer.ts

@@ -6,7 +6,7 @@ import {getMaximumPaintValue, translateDistance, translate} from '../query_utils
 import properties, {CircleLayoutPropsPossiblyEvaluated, CirclePaintPropsPossiblyEvaluated} from './circle_style_layer_properties';
 import {Transitionable, Transitioning, Layout, PossiblyEvaluated} from '../properties';
 import {mat4, vec4} from 'gl-matrix';
-import Point from '../../util/point';
+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';

package/src/style/style_layer/custom_style_layer.ts

@@ -213,13 +213,13 @@ class CustomStyleLayer extends StyleLayer {
         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;

package/src/style/style_layer/fill_extrusion_style_layer.ts

@@ -6,7 +6,7 @@ import {translateDistance, translate} from '../query_utils';
 import properties, {FillExtrusionPaintPropsPossiblyEvaluated} from './fill_extrusion_style_layer_properties';
 import {Transitionable, Transitioning, PossiblyEvaluated} from '../properties';
 import {mat4, vec4} from 'gl-matrix';
-import Point from '../../util/point';
+import Point from '@mapbox/point-geometry';
 import type {FeatureState} from '../../style-spec/expression';
 import type {BucketParameters} from '../../data/bucket';
 import type {FillExtrusionPaintProps} from './fill_extrusion_style_layer_properties';
@@ -15,7 +15,7 @@ import type {LayerSpecification} from '../../style-spec/types';
 import type {VectorTileFeature} from '@mapbox/vector-tile';
 
 export class Point3D extends Point {
-    z: number
+    z: number;
 }
 
 class FillExtrusionStyleLayer extends StyleLayer {

package/src/style/style_layer/fill_style_layer.ts

@@ -8,7 +8,7 @@ import {Transitionable, Transitioning, Layout, PossiblyEvaluated} from '../prope
 
 import type {FeatureState} from '../../style-spec/expression';
 import type {BucketParameters} from '../../data/bucket';
-import type Point from '../../util/point';
+import type Point from '@mapbox/point-geometry';
 import type {FillLayoutProps, FillPaintProps} from './fill_style_layer_properties';
 import type EvaluationParameters from '../evaluation_parameters';
 import type Transform from '../../geo/transform';

package/src/style/style_layer/line_style_layer.ts

@@ -1,4 +1,4 @@
-import Point from '../../util/point';
+import Point from '@mapbox/point-geometry';
 
 import StyleLayer from '../style_layer';
 import LineBucket from '../../data/bucket/line_bucket';

package/src/style/style_layer/symbol_style_layer.ts

@@ -185,4 +185,23 @@ class SymbolStyleLayer extends StyleLayer {
     }
 }
 
+export type OverlapMode = 'never' | 'always' | 'cooperative';
+
+export function getOverlapMode(layout: PossiblyEvaluated<SymbolLayoutProps, SymbolLayoutPropsPossiblyEvaluated>, overlapProp: 'icon-overlap', allowOverlapProp: 'icon-allow-overlap'): OverlapMode;
+export function getOverlapMode(layout: PossiblyEvaluated<SymbolLayoutProps, SymbolLayoutPropsPossiblyEvaluated>, overlapProp: 'text-overlap', allowOverlapProp: 'text-allow-overlap'): OverlapMode;
+export function getOverlapMode(layout: PossiblyEvaluated<SymbolLayoutProps, SymbolLayoutPropsPossiblyEvaluated>, overlapProp: 'icon-overlap' | 'text-overlap', allowOverlapProp: 'icon-allow-overlap' | 'text-allow-overlap'): OverlapMode {
+    let result: OverlapMode = 'never';
+    const overlap = layout.get(overlapProp);
+
+    if (overlap) {
+        // if -overlap is set, use it
+        result = overlap;
+    } else if (layout.get(allowOverlapProp)) {
+        // fall back to -allow-overlap, with false='never', true='always'
+        result = 'always';
+    }
+
+    return result;
+}
+
 export default SymbolStyleLayer;

package/src/style/style_layer/symbol_style_layer_properties.ts

@@ -32,6 +32,7 @@ export type SymbolLayoutProps = {
     "symbol-sort-key": DataDrivenProperty<number>,
     "symbol-z-order": DataConstantProperty<"auto" | "viewport-y" | "source">,
     "icon-allow-overlap": DataConstantProperty<boolean>,
+    "icon-overlap": DataConstantProperty<"never" | "always" | "cooperative">,
     "icon-ignore-placement": DataConstantProperty<boolean>,
     "icon-optional": DataConstantProperty<boolean>,
     "icon-rotation-alignment": DataConstantProperty<"map" | "viewport" | "auto">,
@@ -65,6 +66,7 @@ export type SymbolLayoutProps = {
     "text-transform": DataDrivenProperty<"none" | "uppercase" | "lowercase">,
     "text-offset": DataDrivenProperty<[number, number]>,
     "text-allow-overlap": DataConstantProperty<boolean>,
+    "text-overlap": DataConstantProperty<"never" | "always" | "cooperative">,
     "text-ignore-placement": DataConstantProperty<boolean>,
     "text-optional": DataConstantProperty<boolean>,
 };
@@ -76,6 +78,7 @@ export type SymbolLayoutPropsPossiblyEvaluated = {
     "symbol-sort-key": PossiblyEvaluatedPropertyValue<number>,
     "symbol-z-order": "auto" | "viewport-y" | "source",
     "icon-allow-overlap": boolean,
+    "icon-overlap": "never" | "always" | "cooperative",
     "icon-ignore-placement": boolean,
     "icon-optional": boolean,
     "icon-rotation-alignment": "map" | "viewport" | "auto",
@@ -109,6 +112,7 @@ export type SymbolLayoutPropsPossiblyEvaluated = {
     "text-transform": PossiblyEvaluatedPropertyValue<"none" | "uppercase" | "lowercase">,
     "text-offset": PossiblyEvaluatedPropertyValue<[number, number]>,
     "text-allow-overlap": boolean,
+    "text-overlap": "never" | "always" | "cooperative",
     "text-ignore-placement": boolean,
     "text-optional": boolean,
 };
@@ -120,6 +124,7 @@ const layout: Properties<SymbolLayoutProps> = new Properties({
     "symbol-sort-key": new DataDrivenProperty(styleSpec["layout_symbol"]["symbol-sort-key"] as any as StylePropertySpecification),
     "symbol-z-order": new DataConstantProperty(styleSpec["layout_symbol"]["symbol-z-order"] as any as StylePropertySpecification),
     "icon-allow-overlap": new DataConstantProperty(styleSpec["layout_symbol"]["icon-allow-overlap"] as any as StylePropertySpecification),
+    "icon-overlap": new DataConstantProperty(styleSpec["layout_symbol"]["icon-overlap"] as any as StylePropertySpecification),
     "icon-ignore-placement": new DataConstantProperty(styleSpec["layout_symbol"]["icon-ignore-placement"] as any as StylePropertySpecification),
     "icon-optional": new DataConstantProperty(styleSpec["layout_symbol"]["icon-optional"] as any as StylePropertySpecification),
     "icon-rotation-alignment": new DataConstantProperty(styleSpec["layout_symbol"]["icon-rotation-alignment"] as any as StylePropertySpecification),
@@ -153,6 +158,7 @@ const layout: Properties<SymbolLayoutProps> = new Properties({
     "text-transform": new DataDrivenProperty(styleSpec["layout_symbol"]["text-transform"] as any as StylePropertySpecification),
     "text-offset": new DataDrivenProperty(styleSpec["layout_symbol"]["text-offset"] as any as StylePropertySpecification),
     "text-allow-overlap": new DataConstantProperty(styleSpec["layout_symbol"]["text-allow-overlap"] as any as StylePropertySpecification),
+    "text-overlap": new DataConstantProperty(styleSpec["layout_symbol"]["text-overlap"] as any as StylePropertySpecification),
     "text-ignore-placement": new DataConstantProperty(styleSpec["layout_symbol"]["text-ignore-placement"] as any as StylePropertySpecification),
     "text-optional": new DataConstantProperty(styleSpec["layout_symbol"]["text-optional"] as any as StylePropertySpecification),
 });

package/src/style/style_layer.ts

@@ -13,7 +13,7 @@ import {supportsPropertyExpression} from '../style-spec/util/properties';
 
 import type {FeatureState} from '../style-spec/expression';
 import type {Bucket} from '../data/bucket';
-import type Point from '../util/point';
+import type Point from '@mapbox/point-geometry';
 import type {FeatureFilter} from '../style-spec/feature_filter';
 import type {TransitionParameters, PropertyValue} from './properties';
 import EvaluationParameters from './evaluation_parameters';

package/src/style-spec/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 15.1.0
+
+### ✨ Features and improvements
+* Add `icon-overlap` and `text-overlap` symbol layout properties [#347](https://github.com/maplibre/maplibre-gl-js/pull/347)
+* Deprecate `icon-allow-overlap` and `text-allow-overlap` symbol layout properties. `icon-overlap` and `text-overlap` are their replacements.
+
 ## 15.0.0
 
 ### Breaking changes

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

@@ -23,7 +23,7 @@ import type {Result} from '../util/result';
 import type {InterpolationType} from './definitions/interpolate';
 import type {PropertyValueSpecification} from '../types';
 import type {FormattedSection} from './types/formatted';
-import type Point from '../../util/point';
+import type Point from '@mapbox/point-geometry';
 import type {CanonicalTileID} from '../../source/tile_id';
 
 export type Feature = {

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

@@ -1,7 +1,7 @@
 import {default as createFilter, isExpressionFilter} from '.';
 
 import convertFilter from './convert';
-import Point from '../../util/point';
+import Point from '@mapbox/point-geometry';
 import MercatorCoordinate from '../../geo/mercator_coordinate';
 import EXTENT from '../../data/extent';
 import {CanonicalTileID} from '../../source/tile_id';

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

@@ -0,0 +1,112 @@
+import migrate from './migrate';
+import * as spec from './style-spec';
+import v8 from './reference/v8.json';
+import validate from './validate_style';
+
+describe('migrate', () => {
+    test('does not migrate from version 5', () => {
+        expect(() => {
+            migrate({version: 5, layers: []});
+        }).toThrow(new Error('Cannot migrate from 5'));
+    });
+
+    test('does not migrate from version 6', () => {
+        expect(() => {
+            migrate({version: 6, layers: []});
+        }).toThrow(new Error('Cannot migrate from 6'));
+    });
+
+    test('migrates to latest version from version 7', () => {
+        expect(migrate({version: 7, layers: []}).version).toEqual(spec.latest.$version);
+    });
+
+    test('converts token strings to expressions', () => {
+        const migrated = migrate({
+            version: 8,
+            layers: [{
+                id: '1',
+                type: 'symbol',
+                layout: {'text-field': 'a{x}', 'icon-image': '{y}'}
+            }]
+        });
+        expect(migrated.layers[0].layout['text-field']).toEqual(['concat', 'a', ['get', 'x']]);
+        expect(migrated.layers[0].layout['icon-image']).toEqual(['to-string', ['get', 'y']]);
+    });
+
+    test('converts stop functions to expressions', () => {
+        const migrated = migrate({
+            version: 8,
+            layers: [{
+                id: '1',
+                type: 'background',
+                paint: {
+                    'background-opacity': {
+                        base: 1.0,
+                        stops: [[0, 1], [10, 0.72]]
+                    }
+                }
+            }, {
+                id: '2',
+                type: 'background',
+                paint: {
+                    'background-opacity': {
+                        base: 1.0,
+                        stops: [[0, [1, 2]], [10, [0.72, 0.98]]]
+                    }
+                }
+            }]
+        });
+        expect(migrated.layers[0].paint['background-opacity']).toEqual([
+            'interpolate',
+            ['linear'],
+            ['zoom'],
+            0,
+            1,
+            10,
+            0.72
+        ]);
+        expect(migrated.layers[1].paint['background-opacity']).toEqual([
+            'interpolate',
+            ['linear'],
+            ['zoom'],
+            0,
+            ['literal', [1, 2]],
+            10,
+            ['literal', [0.72, 0.98]]
+        ]);
+    });
+
+    test('converts categorical function on resolvedImage type to valid expression', () => {
+        const migrated = migrate({
+            version: 8,
+            sources: {
+                streets: {
+                    url: 'mapbox://mapbox.streets',
+                    type: 'vector'
+                }
+            },
+            layers: [{
+                id: '1',
+                source: 'streets',
+                'source-layer': 'labels',
+                type: 'symbol',
+                layout: {
+                    'icon-image': {
+                        base: 1,
+                        type: 'categorical',
+                        property: 'type',
+                        stops: [['park', 'some-icon']]
+                    }
+                }
+            }]
+        });
+        expect(migrated.layers[0].layout['icon-image']).toEqual([
+            'match',
+            ['get', 'type' ],
+            'park',
+            'some-icon',
+            ''
+        ]);
+        expect(validate(migrated, v8)).toEqual([]);
+    });
+});

package/src/style-spec/package.json

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