@scoova/mgl 1.0.0

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

@@ -0,0 +1,218 @@
+// This file is generated. Edit build/generate-style-code.ts, then run 'npm run codegen'.
+/* eslint-disable */
+
+import {latest as styleSpec} from '@maplibre/maplibre-gl-style-spec';
+
+import {
+    Properties,
+    DataConstantProperty,
+    DataDrivenProperty,
+    CrossFadedDataDrivenProperty,
+    CrossFadedProperty,
+    ColorRampProperty,
+    PossiblyEvaluatedPropertyValue,
+    CrossFaded
+} from '../properties';
+
+import type {Color, Formatted, Padding, ResolvedImage, VariableAnchorOffsetCollection} from '@maplibre/maplibre-gl-style-spec';
+import {StylePropertySpecification} from '@maplibre/maplibre-gl-style-spec';
+
+import {
+            ColorType
+        } from '@maplibre/maplibre-gl-style-spec';
+        
+export type SymbolLayoutProps = {
+    "symbol-placement": DataConstantProperty<"point" | "line" | "line-center">,
+    "symbol-spacing": DataConstantProperty<number>,
+    "symbol-avoid-edges": DataConstantProperty<boolean>,
+    "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">,
+    "icon-size": DataDrivenProperty<number>,
+    "icon-text-fit": DataConstantProperty<"none" | "width" | "height" | "both">,
+    "icon-text-fit-padding": DataConstantProperty<[number, number, number, number]>,
+    "icon-image": DataDrivenProperty<ResolvedImage>,
+    "icon-rotate": DataDrivenProperty<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">,
+    "icon-pitch-alignment": DataConstantProperty<"map" | "viewport" | "auto">,
+    "text-pitch-alignment": DataConstantProperty<"map" | "viewport" | "auto">,
+    "text-rotation-alignment": DataConstantProperty<"map" | "viewport" | "viewport-glyph" | "auto">,
+    "text-field": DataDrivenProperty<Formatted>,
+    "text-font": DataDrivenProperty<Array<string>>,
+    "text-size": DataDrivenProperty<number>,
+    "text-max-width": DataDrivenProperty<number>,
+    "text-line-height": DataConstantProperty<number>,
+    "text-letter-spacing": DataDrivenProperty<number>,
+    "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">>,
+    "text-rotate": DataDrivenProperty<number>,
+    "text-padding": DataConstantProperty<number>,
+    "text-keep-upright": DataConstantProperty<boolean>,
+    "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>,
+};
+
+export type SymbolLayoutPropsPossiblyEvaluated = {
+    "symbol-placement": "point" | "line" | "line-center",
+    "symbol-spacing": number,
+    "symbol-avoid-edges": boolean,
+    "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",
+    "icon-size": PossiblyEvaluatedPropertyValue<number>,
+    "icon-text-fit": "none" | "width" | "height" | "both",
+    "icon-text-fit-padding": [number, number, number, number],
+    "icon-image": PossiblyEvaluatedPropertyValue<ResolvedImage>,
+    "icon-rotate": PossiblyEvaluatedPropertyValue<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">,
+    "icon-pitch-alignment": "map" | "viewport" | "auto",
+    "text-pitch-alignment": "map" | "viewport" | "auto",
+    "text-rotation-alignment": "map" | "viewport" | "viewport-glyph" | "auto",
+    "text-field": PossiblyEvaluatedPropertyValue<Formatted>,
+    "text-font": PossiblyEvaluatedPropertyValue<Array<string>>,
+    "text-size": PossiblyEvaluatedPropertyValue<number>,
+    "text-max-width": PossiblyEvaluatedPropertyValue<number>,
+    "text-line-height": number,
+    "text-letter-spacing": PossiblyEvaluatedPropertyValue<number>,
+    "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">,
+    "text-rotate": PossiblyEvaluatedPropertyValue<number>,
+    "text-padding": number,
+    "text-keep-upright": boolean,
+    "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,
+};
+
+let layout: Properties<SymbolLayoutProps>;
+const getLayout = () => layout = layout || new Properties({
+    "symbol-placement": new DataConstantProperty(styleSpec["layout_symbol"]["symbol-placement"] as any as StylePropertySpecification),
+    "symbol-spacing": new DataConstantProperty(styleSpec["layout_symbol"]["symbol-spacing"] as any as StylePropertySpecification),
+    "symbol-avoid-edges": new DataConstantProperty(styleSpec["layout_symbol"]["symbol-avoid-edges"] as any as StylePropertySpecification),
+    "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),
+    "icon-size": new DataDrivenProperty(styleSpec["layout_symbol"]["icon-size"] as any as StylePropertySpecification),
+    "icon-text-fit": new DataConstantProperty(styleSpec["layout_symbol"]["icon-text-fit"] as any as StylePropertySpecification),
+    "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 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),
+    "icon-pitch-alignment": new DataConstantProperty(styleSpec["layout_symbol"]["icon-pitch-alignment"] as any as StylePropertySpecification),
+    "text-pitch-alignment": new DataConstantProperty(styleSpec["layout_symbol"]["text-pitch-alignment"] as any as StylePropertySpecification),
+    "text-rotation-alignment": new DataConstantProperty(styleSpec["layout_symbol"]["text-rotation-alignment"] as any as StylePropertySpecification),
+    "text-field": new DataDrivenProperty(styleSpec["layout_symbol"]["text-field"] as any as StylePropertySpecification),
+    "text-font": new DataDrivenProperty(styleSpec["layout_symbol"]["text-font"] as any as StylePropertySpecification),
+    "text-size": new DataDrivenProperty(styleSpec["layout_symbol"]["text-size"] as any as StylePropertySpecification),
+    "text-max-width": new DataDrivenProperty(styleSpec["layout_symbol"]["text-max-width"] as any as StylePropertySpecification),
+    "text-line-height": new DataConstantProperty(styleSpec["layout_symbol"]["text-line-height"] as any as StylePropertySpecification),
+    "text-letter-spacing": new DataDrivenProperty(styleSpec["layout_symbol"]["text-letter-spacing"] as any as StylePropertySpecification),
+    "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),
+    "text-rotate": new DataDrivenProperty(styleSpec["layout_symbol"]["text-rotate"] as any as StylePropertySpecification),
+    "text-padding": new DataConstantProperty(styleSpec["layout_symbol"]["text-padding"] as any as StylePropertySpecification),
+    "text-keep-upright": new DataConstantProperty(styleSpec["layout_symbol"]["text-keep-upright"] as any as StylePropertySpecification),
+    "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),
+});
+
+export type SymbolPaintProps = {
+    "icon-opacity": DataDrivenProperty<number>,
+    "icon-color": DataDrivenProperty<Color>,
+    "icon-halo-color": DataDrivenProperty<Color>,
+    "icon-halo-width": DataDrivenProperty<number>,
+    "icon-halo-blur": DataDrivenProperty<number>,
+    "icon-translate": DataConstantProperty<[number, number]>,
+    "icon-translate-anchor": DataConstantProperty<"map" | "viewport">,
+    "text-opacity": DataDrivenProperty<number>,
+    "text-color": DataDrivenProperty<Color>,
+    "text-halo-color": DataDrivenProperty<Color>,
+    "text-halo-width": DataDrivenProperty<number>,
+    "text-halo-blur": DataDrivenProperty<number>,
+    "text-translate": DataConstantProperty<[number, number]>,
+    "text-translate-anchor": DataConstantProperty<"map" | "viewport">,
+};
+
+export type SymbolPaintPropsPossiblyEvaluated = {
+    "icon-opacity": PossiblyEvaluatedPropertyValue<number>,
+    "icon-color": PossiblyEvaluatedPropertyValue<Color>,
+    "icon-halo-color": PossiblyEvaluatedPropertyValue<Color>,
+    "icon-halo-width": PossiblyEvaluatedPropertyValue<number>,
+    "icon-halo-blur": PossiblyEvaluatedPropertyValue<number>,
+    "icon-translate": [number, number],
+    "icon-translate-anchor": "map" | "viewport",
+    "text-opacity": PossiblyEvaluatedPropertyValue<number>,
+    "text-color": PossiblyEvaluatedPropertyValue<Color>,
+    "text-halo-color": PossiblyEvaluatedPropertyValue<Color>,
+    "text-halo-width": PossiblyEvaluatedPropertyValue<number>,
+    "text-halo-blur": PossiblyEvaluatedPropertyValue<number>,
+    "text-translate": [number, number],
+    "text-translate-anchor": "map" | "viewport",
+};
+
+let paint: Properties<SymbolPaintProps>;
+const getPaint = () => paint = paint || new Properties({
+    "icon-opacity": new DataDrivenProperty(styleSpec["paint_symbol"]["icon-opacity"] as any as StylePropertySpecification),
+    "icon-color": new DataDrivenProperty(styleSpec["paint_symbol"]["icon-color"] as any as StylePropertySpecification),
+    "icon-halo-color": new DataDrivenProperty(styleSpec["paint_symbol"]["icon-halo-color"] as any as StylePropertySpecification),
+    "icon-halo-width": new DataDrivenProperty(styleSpec["paint_symbol"]["icon-halo-width"] as any as StylePropertySpecification),
+    "icon-halo-blur": new DataDrivenProperty(styleSpec["paint_symbol"]["icon-halo-blur"] as any as StylePropertySpecification),
+    "icon-translate": new DataConstantProperty(styleSpec["paint_symbol"]["icon-translate"] as any as StylePropertySpecification),
+    "icon-translate-anchor": new DataConstantProperty(styleSpec["paint_symbol"]["icon-translate-anchor"] as any as StylePropertySpecification),
+    "text-opacity": new DataDrivenProperty(styleSpec["paint_symbol"]["text-opacity"] as any as StylePropertySpecification),
+    "text-color": new DataDrivenProperty(styleSpec["paint_symbol"]["text-color"] as any as StylePropertySpecification, { runtimeType: ColorType, getOverride: (o) => o.textColor, hasOverride: (o) => !!o.textColor }),
+    "text-halo-color": new DataDrivenProperty(styleSpec["paint_symbol"]["text-halo-color"] as any as StylePropertySpecification),
+    "text-halo-width": new DataDrivenProperty(styleSpec["paint_symbol"]["text-halo-width"] as any as StylePropertySpecification),
+    "text-halo-blur": new DataDrivenProperty(styleSpec["paint_symbol"]["text-halo-blur"] as any as StylePropertySpecification),
+    "text-translate": new DataConstantProperty(styleSpec["paint_symbol"]["text-translate"] as any as StylePropertySpecification),
+    "text-translate-anchor": new DataConstantProperty(styleSpec["paint_symbol"]["text-translate-anchor"] as any as StylePropertySpecification),
+});
+
+export default ({ get paint() { return getPaint() }, get layout() { return getLayout() } });

package/src/style/style_layer/typed_style_layer.ts

@@ -0,0 +1,9 @@
+import type {CircleStyleLayer} from './circle_style_layer';
+import type {FillStyleLayer} from './fill_style_layer';
+import type {FillExtrusionStyleLayer} from './fill_extrusion_style_layer';
+import type {HeatmapStyleLayer} from './heatmap_style_layer';
+import type {HillshadeStyleLayer} from './hillshade_style_layer';
+import type {LineStyleLayer} from './line_style_layer';
+import type {SymbolStyleLayer} from './symbol_style_layer';
+
+export type TypedStyleLayer = CircleStyleLayer | FillStyleLayer | FillExtrusionStyleLayer | HeatmapStyleLayer | HillshadeStyleLayer | LineStyleLayer | SymbolStyleLayer;

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.SQRT2;
+        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;
+}