maplibre-gl 3.2.1 → 3.3.0

package/src/style/properties.ts

@@ -22,6 +22,7 @@ export type CrossFaded<T> = {
 };
 
 /**
+ * @internal
  *  Implementations of the `Property` interface:
  *
  *  * Hold metadata about a property that's independent of any specific value: stuff like the type of the value,
@@ -49,6 +50,7 @@ export interface Property<T, R> {
 }
 
 /**
+ * @internal
  *  `PropertyValue` represents the value part of a property key-value unit. It's used to represent both
  *  paint and layout property values, and regardless of whether or not their property supports data-driven
  *  expressions.
@@ -95,6 +97,7 @@ export type TransitionParameters = {
 };
 
 /**
+ * @internal
  * Paint properties are _transitionable_: they can change in a fluid manner, interpolating or cross-fading between
  * old and new value. The duration of the transition, and the delay before it begins, is configurable.
  *
@@ -125,6 +128,7 @@ class TransitionablePropertyValue<T, R> {
 }
 
 /**
+ * @internal
  * `Transitionable` stores a map of all (property name, `TransitionablePropertyValue`) pairs for paint properties of a
  * given layer type. It can calculate the `TransitioningPropertyValue`s for all of them at once, producing a
  * `Transitioning` instance for the same set of properties.
@@ -196,6 +200,7 @@ export class Transitionable<Props> {
 }
 
 /**
+ * @internal
  * `TransitioningPropertyValue` implements the first of two intermediate steps in the evaluation chain of a paint
  * property value. In this step, transitions between old and new values are handled: as long as the transition is in
  * progress, `TransitioningPropertyValue` maintains a reference to the prior value, and interpolates between it and
@@ -256,6 +261,7 @@ class TransitioningPropertyValue<T, R> {
 }
 
 /**
+ * @internal
  * `Transitioning` stores a map of all (property name, `TransitioningPropertyValue`) pairs for paint properties of a
  * given layer type. It can calculate the possibly-evaluated values for all of them at once, producing a
  * `PossiblyEvaluated` instance for the same set of properties.
@@ -311,6 +317,10 @@ export class Layout<Props> {
         this._values = (Object.create(properties.defaultPropertyValues) as any);
     }
 
+    hasValue<S extends keyof Props>(name: S) {
+        return this._values[name].value !== undefined;
+    }
+
     getValue<S extends keyof Props>(name: S) {
         return clone(this._values[name].value);
     }
@@ -370,6 +380,7 @@ type PossiblyEvaluatedValue<T> = {
 } | SourceExpression | CompositeExpression;
 
 /**
+ * @internal
  * `PossiblyEvaluatedPropertyValue` is used for data-driven paint and layout property values. It holds a
  * `PossiblyEvaluatedValue` and the `GlobalProperties` that were used to generate it. You're not allowed to supply
  * a different set of `GlobalProperties` when performing the final evaluation because they would be ignored in the
@@ -409,6 +420,7 @@ export class PossiblyEvaluatedPropertyValue<T> {
 }
 
 /**
+ * @internal
  * `PossiblyEvaluated` stores a map of all (property name, `R`) pairs for paint or layout properties of a
  * given layer type.
  */
@@ -427,6 +439,7 @@ export class PossiblyEvaluated<Props, PossibleEvaluatedProps> {
 }
 
 /**
+ * @internal
  * An implementation of `Property` for properties that do not permit data-driven (source or composite) expressions.
  * This restriction allows us to declare statically that the result of possibly evaluating this kind of property
  * is in fact always the scalar type `T`, and can be used without further evaluating the value on a per-feature basis.
@@ -455,6 +468,7 @@ export class DataConstantProperty<T> implements Property<T, T> {
 }
 
 /**
+ * @internal
  * An implementation of `Property` for properties that permit data-driven (source or composite) expressions.
  * The result of possibly evaluating this kind of property is `PossiblyEvaluatedPropertyValue<T>`; obtaining
  * a scalar value `T` requires further evaluation on a per-feature basis.
@@ -529,6 +543,7 @@ export class DataDrivenProperty<T> implements Property<T, PossiblyEvaluatedPrope
 }
 
 /**
+ * @internal
  * An implementation of `Property` for  data driven `line-pattern` which are transitioned by cross-fading
  * rather than interpolation.
  */
@@ -594,6 +609,7 @@ export class CrossFadedDataDrivenProperty<T> extends DataDrivenProperty<CrossFad
     }
 }
 /**
+ * @internal
  * An implementation of `Property` for `*-pattern` and `line-dasharray`, which are transitioned by cross-fading
  * rather than interpolation.
  */
@@ -635,6 +651,7 @@ export class CrossFadedProperty<T> implements Property<T, CrossFaded<T>> {
 }
 
 /**
+ * @internal
  * An implementation of `Property` for `heatmap-color` and `line-gradient`. Interpolation is a no-op, and
  * evaluation returns a boolean value in order to indicate its presence, but the real
  * evaluation happens in StyleLayer classes.
@@ -660,6 +677,7 @@ export class ColorRampProperty implements Property<Color, boolean> {
 }
 
 /**
+ * @internal
  * `Properties` holds objects containing default values for the layout or paint property set of a given
  * layer type. These objects are immutable, and they are used as the prototypes for the `_values` members of
  * `Transitionable`, `Transitioning`, `Layout`, and `PossiblyEvaluated`. This allows these classes to avoid

package/src/style/style.ts

@@ -562,6 +562,7 @@ export class Style extends Evented {
     }
 
     /**
+     * @internal
      * Apply queued style updates in a batch and recalculate zoom-dependent paint properties.
      */
     update(parameters: EvaluationParameters) {

package/src/style/style_glyph.ts

@@ -12,6 +12,7 @@ export type GlyphMetrics = {
 };
 
 /**
+ * @internal
  * A style glyph type
  */
 export type StyleGlyph = {

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

@@ -14,12 +14,7 @@ import {
     CrossFaded
 } from '../properties';
 
-import type {Color} from '@maplibre/maplibre-gl-style-spec';
-import type {Padding} from '@maplibre/maplibre-gl-style-spec';
-
-import type {Formatted} from '@maplibre/maplibre-gl-style-spec';
-
-import type {ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
+import type {Color, Formatted, Padding, ResolvedImage, VariableAnchorOffsetCollection} from '@maplibre/maplibre-gl-style-spec';
 import {StylePropertySpecification} from '@maplibre/maplibre-gl-style-spec';
 
 

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

@@ -14,12 +14,7 @@ import {
     CrossFaded
 } from '../properties';
 
-import type {Color} from '@maplibre/maplibre-gl-style-spec';
-import type {Padding} from '@maplibre/maplibre-gl-style-spec';
-
-import type {Formatted} from '@maplibre/maplibre-gl-style-spec';
-
-import type {ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
+import type {Color, Formatted, Padding, ResolvedImage, VariableAnchorOffsetCollection} from '@maplibre/maplibre-gl-style-spec';
 import {StylePropertySpecification} from '@maplibre/maplibre-gl-style-spec';
 
 export type CircleLayoutProps = {

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

@@ -14,12 +14,7 @@ import {
     CrossFaded
 } from '../properties';
 
-import type {Color} from '@maplibre/maplibre-gl-style-spec';
-import type {Padding} from '@maplibre/maplibre-gl-style-spec';
-
-import type {Formatted} from '@maplibre/maplibre-gl-style-spec';
-
-import type {ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
+import type {Color, Formatted, Padding, ResolvedImage, VariableAnchorOffsetCollection} from '@maplibre/maplibre-gl-style-spec';
 import {StylePropertySpecification} from '@maplibre/maplibre-gl-style-spec';
 
 

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

@@ -14,12 +14,7 @@ import {
     CrossFaded
 } from '../properties';
 
-import type {Color} from '@maplibre/maplibre-gl-style-spec';
-import type {Padding} from '@maplibre/maplibre-gl-style-spec';
-
-import type {Formatted} from '@maplibre/maplibre-gl-style-spec';
-
-import type {ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
+import type {Color, Formatted, Padding, ResolvedImage, VariableAnchorOffsetCollection} from '@maplibre/maplibre-gl-style-spec';
 import {StylePropertySpecification} from '@maplibre/maplibre-gl-style-spec';
 
 export type FillLayoutProps = {

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

@@ -14,12 +14,7 @@ import {
     CrossFaded
 } from '../properties';
 
-import type {Color} from '@maplibre/maplibre-gl-style-spec';
-import type {Padding} from '@maplibre/maplibre-gl-style-spec';
-
-import type {Formatted} from '@maplibre/maplibre-gl-style-spec';
-
-import type {ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
+import type {Color, Formatted, Padding, ResolvedImage, VariableAnchorOffsetCollection} from '@maplibre/maplibre-gl-style-spec';
 import {StylePropertySpecification} from '@maplibre/maplibre-gl-style-spec';
 
 

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

@@ -14,12 +14,7 @@ import {
     CrossFaded
 } from '../properties';
 
-import type {Color} from '@maplibre/maplibre-gl-style-spec';
-import type {Padding} from '@maplibre/maplibre-gl-style-spec';
-
-import type {Formatted} from '@maplibre/maplibre-gl-style-spec';
-
-import type {ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
+import type {Color, Formatted, Padding, ResolvedImage, VariableAnchorOffsetCollection} from '@maplibre/maplibre-gl-style-spec';
 import {StylePropertySpecification} from '@maplibre/maplibre-gl-style-spec';
 
 

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

@@ -14,12 +14,7 @@ import {
     CrossFaded
 } from '../properties';
 
-import type {Color} from '@maplibre/maplibre-gl-style-spec';
-import type {Padding} from '@maplibre/maplibre-gl-style-spec';
-
-import type {Formatted} from '@maplibre/maplibre-gl-style-spec';
-
-import type {ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
+import type {Color, Formatted, Padding, ResolvedImage, VariableAnchorOffsetCollection} from '@maplibre/maplibre-gl-style-spec';
 import {StylePropertySpecification} from '@maplibre/maplibre-gl-style-spec';
 
 export type LineLayoutProps = {

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

@@ -14,12 +14,7 @@ import {
     CrossFaded
 } from '../properties';
 
-import type {Color} from '@maplibre/maplibre-gl-style-spec';
-import type {Padding} from '@maplibre/maplibre-gl-style-spec';
-
-import type {Formatted} from '@maplibre/maplibre-gl-style-spec';
-
-import type {ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
+import type {Color, Formatted, Padding, ResolvedImage, VariableAnchorOffsetCollection} from '@maplibre/maplibre-gl-style-spec';
 import {StylePropertySpecification} from '@maplibre/maplibre-gl-style-spec';
 
 

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

@@ -14,12 +14,7 @@ import {
     CrossFaded
 } from '../properties';
 
-import type {Color} from '@maplibre/maplibre-gl-style-spec';
-import type {Padding} from '@maplibre/maplibre-gl-style-spec';
-
-import type {Formatted} from '@maplibre/maplibre-gl-style-spec';
-
-import type {ResolvedImage} from '@maplibre/maplibre-gl-style-spec';
+import type {Color, Formatted, Padding, ResolvedImage, VariableAnchorOffsetCollection} from '@maplibre/maplibre-gl-style-spec';
 import {StylePropertySpecification} from '@maplibre/maplibre-gl-style-spec';
 
 import {
@@ -58,6 +53,7 @@ export type SymbolLayoutProps = {
     "text-justify": DataDrivenProperty<"auto" | "left" | "center" | "right">,
     "text-radial-offset": DataDrivenProperty<number>,
     "text-variable-anchor": DataConstantProperty<Array<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">>,
+    "text-variable-anchor-offset": DataDrivenProperty<VariableAnchorOffsetCollection>,
     "text-anchor": DataDrivenProperty<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">,
     "text-max-angle": DataConstantProperty<number>,
     "text-writing-mode": DataConstantProperty<Array<"horizontal" | "vertical">>,
@@ -104,6 +100,7 @@ export type SymbolLayoutPropsPossiblyEvaluated = {
     "text-justify": PossiblyEvaluatedPropertyValue<"auto" | "left" | "center" | "right">,
     "text-radial-offset": PossiblyEvaluatedPropertyValue<number>,
     "text-variable-anchor": Array<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">,
+    "text-variable-anchor-offset": PossiblyEvaluatedPropertyValue<VariableAnchorOffsetCollection>,
     "text-anchor": PossiblyEvaluatedPropertyValue<"center" | "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right">,
     "text-max-angle": number,
     "text-writing-mode": Array<"horizontal" | "vertical">,
@@ -151,6 +148,7 @@ const getLayout = () => layout = layout || new Properties({
     "text-justify": new DataDrivenProperty(styleSpec["layout_symbol"]["text-justify"] as any as StylePropertySpecification),
     "text-radial-offset": new DataDrivenProperty(styleSpec["layout_symbol"]["text-radial-offset"] as any as StylePropertySpecification),
     "text-variable-anchor": new DataConstantProperty(styleSpec["layout_symbol"]["text-variable-anchor"] as any as StylePropertySpecification),
+    "text-variable-anchor-offset": new DataDrivenProperty(styleSpec["layout_symbol"]["text-variable-anchor-offset"] as any as StylePropertySpecification),
     "text-anchor": new DataDrivenProperty(styleSpec["layout_symbol"]["text-anchor"] as any as StylePropertySpecification),
     "text-max-angle": new DataConstantProperty(styleSpec["layout_symbol"]["text-max-angle"] as any as StylePropertySpecification),
     "text-writing-mode": new DataConstantProperty(styleSpec["layout_symbol"]["text-writing-mode"] as any as StylePropertySpecification),

package/src/style/style_layer/variable_text_anchor.test.ts

@@ -0,0 +1,117 @@
+import {EvaluationParameters} from '../evaluation_parameters';
+import {ZoomHistory} from '../zoom_history';
+import {SymbolStyleLayer} from './symbol_style_layer';
+import {INVALID_TEXT_OFFSET, evaluateVariableOffset, getTextVariableAnchorOffset} from './variable_text_anchor';
+
+describe('evaluateVariableOffset', () => {
+    test('fromRadialOffset', () => {
+        // Radial offset mode is invoked by using INVALID_TEXT_OFFSET as the Y value
+        const srcOffset = [10, INVALID_TEXT_OFFSET] as [number, number];
+
+        expect(evaluateVariableOffset('center', srcOffset)).toEqual([0, 0]);
+
+        // Top/bottom offsets are shifted by the default baseline (7)
+        expect(evaluateVariableOffset('top', srcOffset)).toEqual([0, 3]);
+        expect(evaluateVariableOffset('bottom', srcOffset)).toEqual([0, -3]);
+        expect(evaluateVariableOffset('left', srcOffset)).toEqual([10, 0]);
+        expect(evaluateVariableOffset('right', srcOffset)).toEqual([-10, 0]);
+
+        const hypotenuse = 10 / Math.SQRT2;
+        expect(evaluateVariableOffset('top-left', srcOffset)).toEqual([expect.closeTo(hypotenuse), expect.closeTo(hypotenuse - 7)]);
+        expect(evaluateVariableOffset('top-right', srcOffset)).toEqual([expect.closeTo(-hypotenuse), expect.closeTo(hypotenuse - 7)]);
+        expect(evaluateVariableOffset('bottom-left', srcOffset)).toEqual([expect.closeTo(hypotenuse), expect.closeTo(-hypotenuse + 7)]);
+        expect(evaluateVariableOffset('bottom-right', srcOffset)).toEqual([expect.closeTo(-hypotenuse), expect.closeTo(-hypotenuse + 7)]);
+    });
+
+    test('fromTextOffset', () => {
+        const srcOffset = [10, -10] as [number, number];
+
+        expect(evaluateVariableOffset('center', srcOffset)).toEqual([0, 0]);
+
+        // Top/bottom offsets are shifted by the default baseline (7)
+        expect(evaluateVariableOffset('top', srcOffset)).toEqual([0, 3]);
+        expect(evaluateVariableOffset('bottom', srcOffset)).toEqual([0, -3]);
+        expect(evaluateVariableOffset('left', srcOffset)).toEqual([10, 0]);
+        expect(evaluateVariableOffset('right', srcOffset)).toEqual([-10, 0]);
+        expect(evaluateVariableOffset('top-left', srcOffset)).toEqual([10, 3]);
+        expect(evaluateVariableOffset('top-right', srcOffset)).toEqual([-10, 3]);
+        expect(evaluateVariableOffset('bottom-left', srcOffset)).toEqual([10, -3]);
+        expect(evaluateVariableOffset('bottom-right', srcOffset)).toEqual([-10, -3]);
+    });
+});
+
+function createSymbolLayer(layerProperties) {
+    const layer = new SymbolStyleLayer(layerProperties);
+    layer.recalculate({zoom: 0, zoomHistory: {} as ZoomHistory} as EvaluationParameters, []);
+    return layer;
+}
+
+describe('getTextVariableAnchorOffset', () => {
+    test('defaults - no props set', () => {
+        const props = {};
+        const layer = createSymbolLayer(props);
+
+        expect(getTextVariableAnchorOffset(layer, null, null)).toBeNull();
+    });
+
+    test('text-variable-anchor-offset set', () => {
+        const props = {layout: {'text-variable-anchor-offset': ['top', [1, 1], 'bottom', [2, 2]]}};
+        const layer = createSymbolLayer(props);
+
+        const offset = getTextVariableAnchorOffset(layer, null, null);
+        expect(offset).toBeDefined();
+        // Offset converted to EMs, accounting for baseline shift on Y axis
+        expect(offset.toString()).toBe('["top",[24,17],"bottom",[48,55]]');
+    });
+
+    test('text-variable-anchor set', () => {
+        const props = {layout: {'text-variable-anchor': ['top']}};
+        const layer = createSymbolLayer(props);
+
+        const offset = getTextVariableAnchorOffset(layer, null, null);
+        expect(offset).toBeDefined();
+        // Default offset (0, 0) converted to EMs, accounting for baseline shift on Y axis
+        expect(offset.toString()).toBe('["top",[0,-7]]');
+    });
+
+    test('text-variable-anchor and text-offset set', () => {
+        const props = {layout: {'text-variable-anchor': ['top'], 'text-offset': [1, 1]}};
+        const layer = createSymbolLayer(props);
+
+        const offset = getTextVariableAnchorOffset(layer, null, null);
+        expect(offset).toBeDefined();
+        // Offset converted to EMs, accounting for baseline shift on Y axis
+        expect(offset.toString()).toBe('["top",[0,17]]');
+    });
+
+    test('text-variable-anchor and text-radial-offset set', () => {
+        const props = {layout: {'text-variable-anchor': ['top'], 'text-radial-offset': 2}};
+        const layer = createSymbolLayer(props);
+
+        const offset = getTextVariableAnchorOffset(layer, null, null);
+        expect(offset).toBeDefined();
+        // Offset converted to EMs, accounting for baseline shift on Y axis
+        expect(offset.toString()).toBe('["top",[0,41]]');
+    });
+
+    test('text-variable-anchor, text-offset, and text-radial-offset set', () => {
+        const props = {layout: {'text-variable-anchor': ['top'], 'text-offset': [1, 1], 'text-radial-offset': 2}};
+        const layer = createSymbolLayer(props);
+
+        const offset = getTextVariableAnchorOffset(layer, null, null);
+        expect(offset).toBeDefined();
+        // Offset converted to EMs, accounting for baseline shift on Y axis
+        expect(offset.toString()).toBe('["top",[0,41]]');
+    });
+
+    test('text-variable-anchor and text-variable-anchor-offset set', () => {
+        const props = {layout: {'text-variable-anchor-offset': ['top', [1, 1]], 'text-variable-anchor': ['bottom']}};
+        const layer = createSymbolLayer(props);
+
+        const offset = getTextVariableAnchorOffset(layer, null, null);
+        expect(offset).toBeDefined();
+        // Offset converted to EMs, accounting for baseline shift on Y axis
+        expect(offset.toString()).toBe('["top",[24,17]]');
+    });
+});
+

package/src/style/style_layer/variable_text_anchor.ts

@@ -0,0 +1,163 @@
+import {VariableAnchorOffsetCollection, VariableAnchorOffsetCollectionSpecification} from '@maplibre/maplibre-gl-style-spec';
+import {SymbolFeature} from '../../data/bucket/symbol_bucket';
+import {CanonicalTileID} from '../../source/tile_id';
+import ONE_EM from '../../symbol/one_em';
+import {SymbolStyleLayer} from './symbol_style_layer';
+
+export enum TextAnchorEnum {
+    'center' = 1,
+    'left' = 2,
+    'right' = 3,
+    'top' = 4,
+    'bottom' = 5,
+    'top-left' = 6,
+    'top-right' = 7,
+    'bottom-left' = 8,
+    'bottom-right' = 9
+}
+
+export type TextAnchor = keyof typeof TextAnchorEnum;
+
+// The radial offset is to the edge of the text box
+// In the horizontal direction, the edge of the text box is where glyphs start
+// But in the vertical direction, the glyphs appear to "start" at the baseline
+// We don't actually load baseline data, but we assume an offset of ONE_EM - 17
+// (see "yOffset" in shaping.js)
+const baselineOffset = 7;
+export const INVALID_TEXT_OFFSET = Number.POSITIVE_INFINITY;
+
+export function evaluateVariableOffset(anchor: TextAnchor, offset: [number, number]): [number, number] {
+
+    function fromRadialOffset(anchor: TextAnchor, radialOffset: number): [number, number] {
+        let x = 0, y = 0;
+        if (radialOffset < 0) radialOffset = 0; // Ignore negative offset.
+        // solve for r where r^2 + r^2 = radialOffset^2
+        const hypotenuse = radialOffset / Math.sqrt(2);
+        switch (anchor) {
+            case 'top-right':
+            case 'top-left':
+                y = hypotenuse - baselineOffset;
+                break;
+            case 'bottom-right':
+            case 'bottom-left':
+                y = -hypotenuse + baselineOffset;
+                break;
+            case 'bottom':
+                y = -radialOffset + baselineOffset;
+                break;
+            case 'top':
+                y = radialOffset - baselineOffset;
+                break;
+        }
+
+        switch (anchor) {
+            case 'top-right':
+            case 'bottom-right':
+                x = -hypotenuse;
+                break;
+            case 'top-left':
+            case 'bottom-left':
+                x = hypotenuse;
+                break;
+            case 'left':
+                x = radialOffset;
+                break;
+            case 'right':
+                x = -radialOffset;
+                break;
+        }
+
+        return [x, y];
+    }
+
+    function fromTextOffset(anchor: TextAnchor, offsetX: number, offsetY: number): [number, number] {
+        let x = 0, y = 0;
+        // Use absolute offset values.
+        offsetX = Math.abs(offsetX);
+        offsetY = Math.abs(offsetY);
+
+        switch (anchor) {
+            case 'top-right':
+            case 'top-left':
+            case 'top':
+                y = offsetY - baselineOffset;
+                break;
+            case 'bottom-right':
+            case 'bottom-left':
+            case 'bottom':
+                y = -offsetY + baselineOffset;
+                break;
+        }
+
+        switch (anchor) {
+            case 'top-right':
+            case 'bottom-right':
+            case 'right':
+                x = -offsetX;
+                break;
+            case 'top-left':
+            case 'bottom-left':
+            case 'left':
+                x = offsetX;
+                break;
+        }
+
+        return [x, y];
+    }
+
+    return (offset[1] !== INVALID_TEXT_OFFSET) ? fromTextOffset(anchor, offset[0], offset[1]) : fromRadialOffset(anchor, offset[0]);
+}
+
+// Helper to support both text-variable-anchor and text-variable-anchor-offset. Offset values converted from EMs to PXs
+export function getTextVariableAnchorOffset(layer: SymbolStyleLayer, feature: SymbolFeature, canonical: CanonicalTileID): VariableAnchorOffsetCollection | null {
+    const layout = layer.layout;
+    // If style specifies text-variable-anchor-offset, just return it
+    const variableAnchorOffset = layout.get('text-variable-anchor-offset')?.evaluate(feature, {}, canonical);
+
+    if (variableAnchorOffset) {
+        const sourceValues = variableAnchorOffset.values;
+        const destValues: VariableAnchorOffsetCollectionSpecification = [];
+
+        // Convert offsets from EM to PX, and apply baseline shift
+        for (let i = 0; i < sourceValues.length; i += 2) {
+            const anchor = destValues[i] = sourceValues[i] as TextAnchor;
+            const offset = (sourceValues[i + 1] as [number, number]).map(t => t * ONE_EM) as [number, number];
+
+            if (anchor.startsWith('top')) {
+                offset[1] -= baselineOffset;
+            } else if (anchor.startsWith('bottom')) {
+                offset[1] += baselineOffset;
+            }
+
+            destValues[i + 1] = offset;
+        }
+
+        return new VariableAnchorOffsetCollection(destValues);
+    }
+
+    // If style specifies text-variable-anchor, convert to the new format
+    const variableAnchor = layout.get('text-variable-anchor');
+
+    if (variableAnchor) {
+        let textOffset: [number, number];
+        const unevaluatedLayout = layer._unevaluatedLayout;
+
+        // The style spec says don't use `text-offset` and `text-radial-offset` together
+        // but doesn't actually specify what happens if you use both. We go with the radial offset.
+        if (unevaluatedLayout.getValue('text-radial-offset') !== undefined) {
+            textOffset = [layout.get('text-radial-offset').evaluate(feature, {}, canonical) * ONE_EM, INVALID_TEXT_OFFSET];
+        } else {
+            textOffset = layout.get('text-offset').evaluate(feature, {}, canonical).map(t => t * ONE_EM) as [number, number];
+        }
+
+        const anchorOffsets: VariableAnchorOffsetCollectionSpecification = [];
+
+        for (const anchor of variableAnchor) {
+            anchorOffsets.push(anchor, evaluateVariableOffset(anchor, textOffset));
+        }
+
+        return new VariableAnchorOffsetCollection(anchorOffsets);
+    }
+
+    return null;
+}

package/src/symbol/collision_index.ts

@@ -33,6 +33,7 @@ export type FeatureKey = {
 };
 
 /**
+ * @internal
  * A collision index used to prevent symbols from overlapping. It keep tracks of
  * where previous symbols have been placed and is used to check if a new
  * symbol overlaps with any previously added symbols.

package/src/symbol/grid_index.ts

@@ -48,6 +48,7 @@ function overlapAllowed(overlapA: OverlapMode, overlapB: OverlapMode): boolean {
 }
 
 /**
+ * @internal
  * GridIndex is a data structure for testing the intersection of
  * circles and rectangles in a 2d plane.
  * It is optimized for rapid insertion and querying.