maplibre-gl 6.2.0 → 6.3.0

package/src/source/video_source.test.ts

@@ -1,14 +1,13 @@
-import {describe, test, expect, vi} from 'vitest';
-import {VideoSource} from './video_source.ts';
-import {extend} from '../util/util.ts';
+import {describe, expect, test, vi} from 'vitest';
 import {getMockDispatcher, waitForEvent} from '../util/test/util.ts';
-
-import type {Coordinates} from './image_source.ts';
+import {extend} from '../util/util.ts';
+import {VideoSource} from './video_source.ts';
+import {MercatorTransform} from '../geo/projection/mercator_transform.ts';
 import {Tile} from '../tile/tile.ts';
 import {OverscaledTileID} from '../tile/tile_id.ts';
 import {Evented} from '../util/evented.ts';
-import {type IReadonlyTransform} from '../geo/transform_interface.ts';
-import {MercatorTransform} from '../geo/projection/mercator_transform.ts';
+import type {IReadonlyTransform} from '../geo/transform_interface.ts';
+import type {Coordinates} from './image_source.ts';
 
 class StubMap extends Evented {
     transform: IReadonlyTransform;
@@ -117,7 +116,7 @@ describe('VideoSource', () => {
         expect(tile.state).toBe('loaded');
     });
 
-    test('onRemove removes playing listener and pauses video', () => {
+    test('onRemove removes playing listener, pauses video and deletes the texture', () => {
         const video = window.document.createElement('video');
         const removeListenerSpy = vi.spyOn(video, 'removeEventListener');
         const pauseSpy = vi.spyOn(video, 'pause').mockImplementation(() => {});
@@ -129,9 +128,14 @@ describe('VideoSource', () => {
         });
         source.video = video;
 
+        const texture = {destroy: vi.fn()} as any;
+        source.texture = texture;
+
         source.onRemove();
 
         expect(removeListenerSpy).toHaveBeenCalledWith('playing', expect.any(Function));
         expect(pauseSpy).toHaveBeenCalled();
+        expect(texture.destroy).toHaveBeenCalledTimes(1);
+        expect(source.texture).toBeNull();
     });
 });

package/src/source/worker_tile.bench.ts

@@ -0,0 +1,10 @@
+import {bench} from 'vitest';
+import {fixtureTiles, parseTile} from '../../test/bench/lib/parse_tile.ts';
+
+await Promise.all(fixtureTiles.map(tile => parseTile(tile, false)));
+
+bench('WorkerTile.parse', async () => {
+    for (const tile of fixtureTiles) {
+        await parseTile(tile, false);
+    }
+});

package/src/source/worker_tile.ts

@@ -37,7 +37,6 @@ export class WorkerTile {
     collectResourceTiming: boolean;
     returnDependencies: boolean;
 
-    status: 'parsing' | 'done';
     data: VectorTileLike;
     collisionBoxArray: CollisionBoxArray;
 
@@ -61,7 +60,6 @@ export class WorkerTile {
     }
 
     async parse(data: VectorTileLike, layerIndex: StyleLayerIndex, availableImages: string[], actor: IActor, subdivisionGranularity: SubdivisionGranularitySetting): Promise<WorkerTileResult> {
-        this.status = 'parsing';
         this.data = data;
 
         this.collisionBoxArray = new CollisionBoxArray();
@@ -192,7 +190,6 @@ export class WorkerTile {
             }
         }
 
-        this.status = 'done';
         return {
             buckets: Object.values(buckets).filter(b => !b.isEmpty()),
             featureIndex,

package/src/style/create_style_layer.bench.ts

@@ -0,0 +1,15 @@
+import {bench} from 'vitest';
+import {derefLayers} from '@maplibre/maplibre-gl-style-spec';
+import {createStyleLayer} from './create_style_layer.ts';
+import brightV9 from '../../test/integration/assets/styles/bright-v9.json' with {type: 'json'};
+
+import type {StyleSpecification} from '@maplibre/maplibre-gl-style-spec';
+
+const style = brightV9 as unknown as StyleSpecification;
+const layers = derefLayers(style.layers);
+
+bench('createStyleLayer', () => {
+    for (const layer of layers) {
+        createStyleLayer(layer, {});
+    }
+});

package/src/style/properties.bench.ts

@@ -0,0 +1,81 @@
+import {bench, describe} from 'vitest';
+import {latest as spec, convertFunction, isFunction, createFunction, createPropertyExpression} from '@maplibre/maplibre-gl-style-spec';
+import brightV9 from '../../test/integration/assets/styles/bright-v9.json' with {type: 'json'};
+
+import type {StyleSpecification, StylePropertyExpression, StylePropertySpecification} from '@maplibre/maplibre-gl-style-spec';
+
+type Sample = {
+    propertySpec: StylePropertySpecification;
+    rawValue: unknown;
+    rawExpression: unknown;
+    compiledFunction: StylePropertyExpression;
+    compiledExpression: StylePropertyExpression;
+};
+
+function sample(rawValue: unknown, propertySpec: StylePropertySpecification): Sample {
+    const rawExpression = convertFunction(rawValue, propertySpec);
+    const compiledFunction = createFunction(rawValue, propertySpec) as StylePropertyExpression;
+    const compiledExpression = createPropertyExpression(rawExpression, 'expression', propertySpec);
+    if (compiledExpression.result === 'error') {
+        throw new Error(compiledExpression.value.map(err => `${err.key}: ${err.message}`).join(', '));
+    }
+    return {
+        propertySpec,
+        rawValue,
+        rawExpression,
+        compiledFunction,
+        compiledExpression: compiledExpression.value
+    };
+}
+
+function collect(style: StyleSpecification): Sample[] {
+    const samples: Sample[] = [];
+
+    for (const layer of style.layers) {
+        if (!layer.type) {
+            continue;
+        }
+
+        for (const key in layer.paint) {
+            if (isFunction(layer.paint[key])) {
+                samples.push(sample(layer.paint[key], spec[`paint_${layer.type}`][key]));
+            }
+        }
+
+        for (const key in layer.layout) {
+            if (isFunction(layer.layout[key])) {
+                samples.push(sample(layer.layout[key], spec[`layout_${layer.type}`][key]));
+            }
+        }
+    }
+
+    return samples;
+}
+
+const samples = collect(brightV9 as unknown as StyleSpecification);
+
+describe('style property functions', () => {
+    bench('createFunction', () => {
+        for (const {rawValue, propertySpec} of samples) {
+            createFunction(rawValue, propertySpec);
+        }
+    });
+
+    bench('evaluate function', () => {
+        for (const {compiledFunction} of samples) {
+            compiledFunction.evaluate({zoom: 0});
+        }
+    });
+
+    bench('createPropertyExpression', () => {
+        for (const {rawExpression, propertySpec} of samples) {
+            createPropertyExpression(rawExpression, 'expression', propertySpec);
+        }
+    });
+
+    bench('evaluate expression', () => {
+        for (const {compiledExpression} of samples) {
+            compiledExpression.evaluate({zoom: 0});
+        }
+    });
+});

package/src/style/style.test.ts

@@ -3,8 +3,9 @@ import {Style} from './style.ts';
 import {TileManager} from '../tile/tile_manager.ts';
 import {StyleLayer} from './style_layer.ts';
 import {extend} from '../util/util.ts';
-import {Event} from '../util/evented.ts';
+import {ErrorEvent, Event} from '../util/evented.ts';
 import {type AJAXError} from '../util/ajax.ts';
+import {MapSourceDataEvent} from '../ui/events.ts';
 import {RGBAImage} from '../util/image.ts';
 import {rtlMainThreadPluginFactory} from '../source/rtl_text_plugin_main_thread.ts';
 import {browser} from '../util/browser.ts';
@@ -374,7 +375,7 @@ describe('Style.loadJSON', () => {
         }));
 
         await style.once('style.load');
-        expect(style.tileManagers['mapLibre'] instanceof TileManager).toBeTruthy();
+        expect(style.tileManagers['mapLibre']).toBeInstanceOf(TileManager);
     });
 
     test('creates layers', async () => {
@@ -396,7 +397,7 @@ describe('Style.loadJSON', () => {
         });
 
         await style.once('style.load');
-        expect(style.getLayer('fill') instanceof StyleLayer).toBeTruthy();
+        expect(style.getLayer('fill')).toBeInstanceOf(StyleLayer);
     });
 
     test('transforms sprite json and image URLs before request', async () => {
@@ -460,7 +461,7 @@ describe('Style.loadJSON', () => {
         const errorPromise = style.once('error');
 
         await style.once('style.load');
-        style._layers.background.fire(new Event('error', {mapLibre: true}));
+        style._layers.background.fire(new ErrorEvent(new Error('test'), {mapLibre: true}));
 
         const e = await errorPromise;
         expect((e as any).layer).toEqual({id: 'background'});
@@ -1347,8 +1348,8 @@ describe('Style.addSource', () => {
         });
 
         style.addSource('source-id', source); // fires data twice
-        style.tileManagers['source-id'].fire(new Event('error'));
-        style.tileManagers['source-id'].fire(new Event('data'));
+        style.tileManagers['source-id'].fire(new ErrorEvent(new Error('test')));
+        style.tileManagers['source-id'].fire(new MapSourceDataEvent('data'));
 
         await expect(Promise.all(promises)).resolves.toBeDefined();
     });
@@ -1446,8 +1447,8 @@ describe('Style.removeSource', () => {
 
         style.on('data', () => expect(false).toBeTruthy());
         style.on('error', () => expect(false).toBeTruthy());
-        tileManager.fire(new Event('data'));
-        tileManager.fire(new Event('error'));
+        tileManager.fire(new MapSourceDataEvent('data'));
+        tileManager.fire(new ErrorEvent(new Error('test')));
     });
 });
 
@@ -2297,7 +2298,7 @@ describe('Style.addLayer', () => {
             type: 'background'
         });
 
-        style._layers.background.fire(new Event('error', {mapLibre: true}));
+        style._layers.background.fire(new ErrorEvent(new Error('test'), {mapLibre: true}));
 
         const e = await errorPromise;
         expect((e as any).layer).toEqual({id: 'background'});
@@ -2614,7 +2615,7 @@ describe('Style.removeLayer', () => {
         // Bind a listener to prevent fallback Evented error reporting.
         layer.on('error', () => {});
 
-        layer.fire(new Event('error', {mapLibre: true}));
+        layer.fire(new ErrorEvent(new Error('test'), {mapLibre: true}));
 
         expect(styleErrorListener).not.toHaveBeenCalled();
     });

package/src/style/style_image.ts

@@ -27,6 +27,7 @@ export type StyleImageData = {
     data: RGBAImage;
     version?: number;
     hasRenderCallback?: boolean;
+    isWebGLImage?: boolean;
     userImage?: StyleImageInterface;
     spriteData?: SpriteOnDemandStyleImage;
 };
@@ -91,6 +92,48 @@ export type StyleImageMetadata = {
  */
 export type StyleImage = StyleImageData & StyleImageMetadata;
 
+/**
+ * Where a {@link StyleImageWebGLData.renderWithWebGL} callback writes its pixels.
+ */
+export type StyleImageWebGLTarget = {
+    gl: WebGL2RenderingContext;
+    /**
+     * The icon atlas to write into. MapLibre does not bind it for you, so start with
+     * `gl.bindTexture(gl.TEXTURE_2D, texture)` or attach it to your own framebuffer.
+     */
+    texture: WebGLTexture;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+
+/**
+ * What a {@link StyleImageInterface} gives as its `data` when it renders itself with WebGL rather
+ * than handing over an array of pixels.
+ *
+ * @see [Animate an icon on the GPU.](https://maplibre.org/maplibre-gl-js/docs/examples/animate-an-icon-on-the-gpu/)
+ */
+export type StyleImageWebGLData = {
+    /**
+     * Render exactly `width` x `height` premultiplied-alpha pixels at (`x`, `y`) of
+     * `target.texture`. That rectangle is the only part of the shared atlas that belongs to this
+     * image; drawing outside it corrupts the others.
+     *
+     * This is the image's counterpart to {@link CustomLayerInterface.render}, and the context
+     * arrives in the same state a custom layer's is given: cull face, active texture and the pixel
+     * store settings at their WebGL defaults, and no vertex array bound. Everything is yours to
+     * change, and MapLibre restores its own state afterwards. The scissor test is the one
+     * exception: MapLibre never touches it, so an image that enables it has to disable it again.
+     *
+     * Called before the first frame the image is used in, again whenever
+     * {@link StyleImageInterface.render} returns `true`, and again for each atlas holding a slot
+     * this image has never rendered into, so one change may mean several calls with different
+     * targets.
+     */
+    renderWithWebGL: (target: StyleImageWebGLTarget) => void;
+};
+
 /**
  * Interface for dynamically generated style images. This is a specification for
  * implementers to model: it is not an exported method or class.
@@ -148,7 +191,13 @@ export type StyleImage = StyleImageData & StyleImageMetadata;
 export interface StyleImageInterface {
     width: number;
     height: number;
-    data: Uint8Array | Uint8ClampedArray;
+    /**
+     * The image's pixels, in the same format as `ImageData`, or a {@link StyleImageWebGLData}
+     * callback that renders them with WebGL. A WebGL image renders straight into its slot of the
+     * shared icon atlas. Nothing new is possible that pixels could not express, but an image that
+     * changes often, such as an animated icon, gets much cheaper: no CPU pixel work and no upload.
+     */
+    data: Uint8Array | Uint8ClampedArray | StyleImageWebGLData;
     /**
      * This method is called once before every frame where the icon will be used.
      * The method can optionally update the image's `data` member with a new image.
@@ -156,6 +205,9 @@ export interface StyleImageInterface {
      * If the method updates the image it must return `true` to commit the change.
      * If the method returns `false` or nothing the image is assumed to not have changed.
      *
+     * An image whose `data` renders with WebGL has nothing to update here; returning `true` is how
+     * it asks for {@link StyleImageWebGLData.renderWithWebGL} to be called again.
+     *
      * If updates are infrequent it maybe easier to use {@link Map.updateImage} to update
      * the image instead of implementing this method.
      *
@@ -171,18 +223,24 @@ export interface StyleImageInterface {
     /**
      * Optional method called when the icon is removed from the map with {@link Map.removeImage}.
      * This gives the image a chance to clean up resources and event listeners.
+     *
+     * This also fires when the WebGL context is lost, after which the same image is added back
+     * without a matching `onAdd`, so the image has to be able to build again whatever it
+     * released here.
      */
     onRemove?: () => void;
 }
 
+export function isStyleImageWebGLData(data: StyleImageInterface['data']): data is StyleImageWebGLData {
+    return typeof (data as StyleImageWebGLData)?.renderWithWebGL === 'function';
+}
+
 export function renderStyleImage(image: StyleImage): boolean {
     const {userImage} = image;
-    if (userImage?.render) {
-        const updated = userImage.render();
-        if (updated) {
-            image.data.replace(new Uint8Array(userImage.data.buffer));
-            return true;
-        }
-    }
-    return false;
+    if (!userImage?.render) return false;
+    const updated = userImage.render();
+    if (!updated) return false;
+
+    if (!isStyleImageWebGLData(userImage.data)) image.data.replace(new Uint8Array(userImage.data.buffer));
+    return true;
 }

package/src/style/style_layer.bench.ts

@@ -0,0 +1,65 @@
+import {bench, describe} from 'vitest';
+import {readFileSync} from 'fs';
+import {VectorTile} from '@mapbox/vector-tile';
+import {PbfReader} from 'pbf';
+import {featureFilter} from '@maplibre/maplibre-gl-style-spec';
+import filters from '../../test/bench/data/filters.json' with {type: 'json'};
+
+import type {VectorTileFeature} from '@mapbox/vector-tile';
+import type {FeatureFilter, FilterSpecification} from '@maplibre/maplibre-gl-style-spec';
+
+type FilteredLayer = {
+    features: VectorTileFeature[];
+    filters: FeatureFilter[];
+};
+
+function readLayers(): FilteredLayer[] {
+    const data = readFileSync(new URL('../../test/bench/data/785.vector.pbf', import.meta.url));
+    const tile = new VectorTile(new PbfReader(new Uint8Array(data)));
+    const layers: FilteredLayer[] = [];
+
+    for (const name in tile.layers) {
+        const layer = tile.layers[name];
+        if (!layer.length) {
+            continue;
+        }
+
+        const features = [];
+        for (let i = 0; i < layer.length; i++) {
+            features.push(layer.feature(i));
+        }
+
+        const layerFilters = [];
+        for (const filter of filters) {
+            if (filter.layer === name) {
+                layerFilters.push(featureFilter(filter.filter as FilterSpecification, 'filter'));
+            }
+        }
+
+        layers.push({features, filters: layerFilters});
+    }
+
+    return layers;
+}
+
+const layers = readLayers();
+
+describe('featureFilter', () => {
+    bench('create', () => {
+        for (const filter of filters) {
+            featureFilter(filter.filter as FilterSpecification, 'filter');
+        }
+    });
+
+    bench('evaluate', () => {
+        for (const layer of layers) {
+            for (const filter of layer.filters) {
+                for (const feature of layer.features) {
+                    if (typeof filter.filter({zoom: 0}, feature) !== 'boolean') {
+                        throw new Error('Expected boolean result from filter');
+                    }
+                }
+            }
+        }
+    });
+});

package/src/style/style_layer.test.ts

@@ -13,7 +13,7 @@ describe('StyleLayer', () => {
     test('instantiates the correct subclass', () => {
         const layer = createStyleLayer({type: 'fill'} as LayerSpecification, {});
 
-        expect(layer instanceof FillStyleLayer).toBeTruthy();
+        expect(layer).toBeInstanceOf(FillStyleLayer);
     });
 });
 

package/src/style/style_layer.ts

@@ -2,7 +2,7 @@ import {filterObject} from '../util/util.ts';
 
 import {createVisibilityExpression, featureFilter, supportsPropertyExpression} from '@maplibre/maplibre-gl-style-spec';
 import {validateStyle, validateAndEmit, type Validator} from './validate_style.ts';
-import {Evented, ErrorEvent} from '../util/evented.ts';
+import {Evented, ErrorEvent, type ErrorEventType} from '../util/evented.ts';
 import {Layout, Transitionable, type Transitioning, type Properties, PossiblyEvaluated, PossiblyEvaluatedPropertyValue, TRANSITION_SUFFIX} from './properties.ts';
 
 import type {Bucket, BucketParameters} from '../data/bucket.ts';
@@ -83,7 +83,7 @@ const ERROR_LAYOUT_NOT_PAINT = ' is a LAYOUT property not a PAINT property. Use
 /**
  * A base class for style layers
  */
-export abstract class StyleLayer extends Evented {
+export abstract class StyleLayer extends Evented<ErrorEventType> {
     id: string;
     metadata: unknown;
     type: LayerSpecification['type'] | CustomLayerInterface['type'];

package/src/style/validate_style.bench.ts

@@ -0,0 +1,11 @@
+import {bench} from 'vitest';
+import {validateStyle} from './validate_style.ts';
+import brightV9 from '../../test/integration/assets/styles/bright-v9.json' with {type: 'json'};
+
+import type {StyleSpecification} from '@maplibre/maplibre-gl-style-spec';
+
+const style = brightV9 as unknown as StyleSpecification;
+
+bench('validateStyle', () => {
+    validateStyle(style);
+});

package/src/style/validate_style.test.ts

@@ -1,9 +1,9 @@
 import {describe, test, expect, vi, afterEach} from 'vitest';
 import {validateAndEmit, validateStyle, validateStyleAndEmit} from './validate_style.ts';
-import {Evented} from '../util/evented.ts';
+import {Evented, type ErrorEventType} from '../util/evented.ts';
 import type {StyleSpecification} from '@maplibre/maplibre-gl-style-spec';
 
-class TestEmitter extends Evented {}
+class TestEmitter extends Evented<ErrorEventType> {}
 
 afterEach(() => {
     vi.restoreAllMocks();

package/src/symbol/anchor.test.ts

@@ -3,8 +3,8 @@ import {Anchor} from './anchor.ts';
 
 describe('Anchor', () => {
     test('constructor', () => {
-        expect(new Anchor(0, 0, 0) instanceof Anchor).toBeTruthy();
-        expect(new Anchor(0, 0, 0, 0) instanceof Anchor).toBeTruthy();
+        expect(new Anchor(0, 0, 0)).toBeInstanceOf(Anchor);
+        expect(new Anchor(0, 0, 0, 0)).toBeInstanceOf(Anchor);
     });
     test('clone', () => {
         const a = new Anchor(1, 2, 3);

package/src/symbol/collision_index.bench.ts

@@ -0,0 +1,116 @@
+import {bench, describe} from 'vitest';
+import Point from '@mapbox/point-geometry';
+import {CollisionIndex} from './collision_index.ts';
+import {EXTENT} from '../data/extent.ts';
+import {OverscaledTileID} from '../tile/tile_id.ts';
+import {MercatorTransform} from '../geo/projection/mercator_transform.ts';
+import {GlobeTransform} from '../geo/projection/globe_transform.ts';
+
+import type {mat4} from 'gl-matrix';
+import type {ITransform} from '../geo/transform_interface.ts';
+import type {UnwrappedTileID} from '../tile/tile_id.ts';
+import type {SingleCollisionBox} from '../data/bucket/symbol_bucket.ts';
+import type {OverlapMode} from '../style/style_layer/overlap_mode.ts';
+
+type TestSymbol = {
+    collisionBox: SingleCollisionBox;
+    overlapMode: OverlapMode;
+    textPixelRatio: number;
+    tileID: OverscaledTileID;
+    unwrappedTileID: UnwrappedTileID;
+    pitchWithMap: boolean;
+    rotateWithMap: boolean;
+    translation: [number, number];
+    shift?: Point;
+    simpleProjectionMatrix?: mat4;
+};
+
+// https://stackoverflow.com/a/47593316
+function splitmix32(a: number): () => number {
+    return function() {
+        a |= 0;
+        a = a + 0x9e3779b9 | 0;
+        let t = a ^ a >>> 16;
+        t = Math.imul(t, 0x21f0aaad);
+        t = t ^ t >>> 15;
+        t = Math.imul(t, 0x735a2d97);
+        return ((t = t ^ t >>> 15) >>> 0) / 4294967296;
+    };
+}
+
+const symbolCount = 20000;
+
+function createSymbols(transform: ITransform, calculatePosMatrix: (tileID: UnwrappedTileID) => mat4 | undefined): TestSymbol[] {
+    transform.resize(1024, 1024, true);
+
+    const tileID = new OverscaledTileID(0, 0, 0, 0, 0);
+    const unwrappedTileID = tileID.toUnwrapped();
+    const rng = splitmix32(0xdeadbeef);
+    const rndRange = (min: number, max: number) => rng() * (max - min) + min;
+    const symbols: TestSymbol[] = [];
+
+    for (let i = 0; i < symbolCount; i++) {
+        symbols.push({
+            collisionBox: {
+                anchorPointX: rndRange(4, EXTENT - 4),
+                anchorPointY: rndRange(4, EXTENT - 4),
+                x1: rndRange(-20, -2),
+                y1: rndRange(-20, -2),
+                x2: rndRange(2, 20),
+                y2: rndRange(2, 20)
+            },
+            overlapMode: 'never',
+            textPixelRatio: 1,
+            tileID,
+            unwrappedTileID,
+            pitchWithMap: rng() > 0.5,
+            rotateWithMap: rng() > 0.5,
+            translation: [
+                rndRange(-20, 20),
+                rndRange(-20, 20)
+            ],
+            shift: rng() > 0.5 ? new Point(rndRange(-20, 20), rndRange(-20, 20)) : undefined,
+            simpleProjectionMatrix: calculatePosMatrix(unwrappedTileID),
+        });
+    }
+
+    return symbols;
+}
+
+function placeAll(transform: ITransform, symbols: TestSymbol[]): void {
+    const collisionIndex = new CollisionIndex(transform);
+    collisionIndex.grid.hitTest = () => true;
+
+    for (const symbol of symbols) {
+        collisionIndex.placeCollisionBox(
+            symbol.collisionBox,
+            symbol.overlapMode,
+            symbol.textPixelRatio,
+            symbol.tileID,
+            symbol.unwrappedTileID,
+            symbol.pitchWithMap,
+            symbol.rotateWithMap,
+            symbol.translation,
+            null,
+            null,
+            symbol.shift,
+            symbol.simpleProjectionMatrix,
+        );
+    }
+}
+
+const mercatorTransform = new MercatorTransform({minZoom: 0, maxZoom: 22, minPitch: 0, maxPitch: 60, renderWorldCopies: true});
+const mercatorSymbols = createSymbols(mercatorTransform, (tileID) => mercatorTransform.calculatePosMatrix(tileID, false));
+
+const globeTransform = new GlobeTransform();
+const globeSymbols = createSymbols(globeTransform, () => undefined);
+
+describe('placeCollisionBox', () => {
+    bench('mercator', () => {
+        placeAll(mercatorTransform, mercatorSymbols);
+    });
+
+    bench('globe', () => {
+        placeAll(globeTransform, globeSymbols);
+    });
+});

package/src/symbol/cross_tile_symbol_index.bench.ts

@@ -0,0 +1,49 @@
+import {bench} from 'vitest';
+import {CrossTileSymbolIndex} from './cross_tile_symbol_index.ts';
+import {OverscaledTileID} from '../tile/tile_id.ts';
+
+import type {Tile} from '../tile/tile.ts';
+import type {StyleLayer} from '../style/style_layer.ts';
+
+type TestSymbolInstance = {
+    anchorX: number;
+    anchorY: number;
+    key: string;
+    crossTileID: number;
+};
+
+const styleLayer = {id: 'test'} as StyleLayer;
+const symbolCount = 3000;
+
+function createTile(tileID: OverscaledTileID, symbolInstances: TestSymbolInstance[]): Tile {
+    const bucket = {
+        symbolInstances: {
+            get(i: number) { return symbolInstances[i]; },
+            length: symbolInstances.length
+        },
+        layerIds: ['test']
+    };
+    return {
+        tileID,
+        getBucket: () => bucket,
+        latestFeatureIndex: {}
+    } as unknown as Tile;
+}
+
+function createInstances(): TestSymbolInstance[] {
+    return Array.from({length: symbolCount}, (_, i) => ({
+        anchorX: 0,
+        anchorY: 0,
+        key: '',
+        crossTileID: i + 1
+    }));
+}
+
+const mainTile = createTile(new OverscaledTileID(6, 0, 6, 8, 8), createInstances());
+const childTile = createTile(new OverscaledTileID(7, 0, 7, 16, 16), createInstances());
+
+bench('CrossTileSymbolIndex.addLayer', () => {
+    const index = new CrossTileSymbolIndex();
+    index.addLayer(styleLayer, [mainTile], 0);
+    index.addLayer(styleLayer, [childTile], 0);
+});