maplibre-gl 3.2.2 → 3.3.0

package/dist/maplibre-gl-dev.js

@@ -1,4 +1,4 @@
-/* MapLibre GL JS is licensed under the 3-Clause BSD License. Full text of license: https://github.com/maplibre/maplibre-gl-js/blob/v3.2.2/LICENSE.txt */
+/* MapLibre GL JS is licensed under the 3-Clause BSD License. Full text of license: https://github.com/maplibre/maplibre-gl-js/blob/v3.3.0/LICENSE.txt */
 (function (global, factory) {
 typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
 typeof define === 'function' && define.amd ? define(factory) :
@@ -2549,6 +2549,25 @@ var layout_symbol = {
 		},
 		"property-type": "data-constant"
 	},
+	"text-variable-anchor-offset": {
+		type: "variableAnchorOffsetCollection",
+		requires: [
+			"text-field",
+			{
+				"symbol-placement": [
+					"point"
+				]
+			}
+		],
+		expression: {
+			interpolated: true,
+			parameters: [
+				"zoom",
+				"feature"
+			]
+		},
+		"property-type": "data-driven"
+	},
 	"text-anchor": {
 		type: "enum",
 		values: {
@@ -4868,6 +4887,7 @@ const CollatorType = { kind: 'collator' };
 const FormattedType = { kind: 'formatted' };
 const PaddingType = { kind: 'padding' };
 const ResolvedImageType = { kind: 'resolvedImage' };
+const VariableAnchorOffsetCollectionType = { kind: 'variableAnchorOffsetCollection' };
 function array$1(itemType, N) {
     return {
         kind: 'array',
@@ -4896,7 +4916,8 @@ const valueMemberTypes = [
     ObjectType,
     array$1(ValueType),
     PaddingType,
-    ResolvedImageType
+    ResolvedImageType,
+    VariableAnchorOffsetCollectionType
 ];
 /**
  * Returns null if `t` is a subtype of `expected`; otherwise returns an
@@ -5592,6 +5613,44 @@ class Padding {
     }
 }
 
+/** Set of valid anchor positions, as a set for validation */
+const anchors = new Set(['center', 'left', 'right', 'top', 'bottom', 'top-left', 'top-right', 'bottom-left', 'bottom-right']);
+/**
+ * Utility class to assist managing values for text-variable-anchor-offset property. Create instances from
+ * bare arrays using the static method `VariableAnchorOffsetCollection.parse`.
+ * @private
+ */
+class VariableAnchorOffsetCollection {
+    constructor(values) {
+        this.values = values.slice();
+    }
+    static parse(input) {
+        if (input instanceof VariableAnchorOffsetCollection) {
+            return input;
+        }
+        if (!Array.isArray(input) ||
+            input.length < 1 ||
+            input.length % 2 !== 0) {
+            return undefined;
+        }
+        for (let i = 0; i < input.length; i += 2) {
+            // Elements in even positions should be anchor positions; Elements in odd positions should be offset values
+            const anchorValue = input[i];
+            const offsetValue = input[i + 1];
+            if (typeof anchorValue !== 'string' || !anchors.has(anchorValue)) {
+                return undefined;
+            }
+            if (!Array.isArray(offsetValue) || offsetValue.length !== 2 || typeof offsetValue[0] !== 'number' || typeof offsetValue[1] !== 'number') {
+                return undefined;
+            }
+        }
+        return new VariableAnchorOffsetCollection(input);
+    }
+    toString() {
+        return JSON.stringify(this.values);
+    }
+}
+
 class ResolvedImage {
     constructor(options) {
         this.name = options.name;
@@ -5620,31 +5679,16 @@ function validateRGBA(r, g, b, a) {
     return null;
 }
 function isValue(mixed) {
-    if (mixed === null) {
-        return true;
-    }
-    else if (typeof mixed === 'string') {
-        return true;
-    }
-    else if (typeof mixed === 'boolean') {
-        return true;
-    }
-    else if (typeof mixed === 'number') {
-        return true;
-    }
-    else if (mixed instanceof Color) {
-        return true;
-    }
-    else if (mixed instanceof Collator) {
-        return true;
-    }
-    else if (mixed instanceof Formatted) {
-        return true;
-    }
-    else if (mixed instanceof Padding) {
-        return true;
-    }
-    else if (mixed instanceof ResolvedImage) {
+    if (mixed === null ||
+        typeof mixed === 'string' ||
+        typeof mixed === 'boolean' ||
+        typeof mixed === 'number' ||
+        mixed instanceof Color ||
+        mixed instanceof Collator ||
+        mixed instanceof Formatted ||
+        mixed instanceof Padding ||
+        mixed instanceof VariableAnchorOffsetCollection ||
+        mixed instanceof ResolvedImage) {
         return true;
     }
     else if (Array.isArray(mixed)) {
@@ -5692,6 +5736,9 @@ function typeOf(value) {
     else if (value instanceof Padding) {
         return PaddingType;
     }
+    else if (value instanceof VariableAnchorOffsetCollection) {
+        return VariableAnchorOffsetCollectionType;
+    }
     else if (value instanceof ResolvedImage) {
         return ResolvedImageType;
     }
@@ -5725,7 +5772,7 @@ function toString(value) {
     else if (type === 'string' || type === 'number' || type === 'boolean') {
         return String(value);
     }
-    else if (value instanceof Color || value instanceof Formatted || value instanceof Padding || value instanceof ResolvedImage) {
+    else if (value instanceof Color || value instanceof Formatted || value instanceof Padding || value instanceof VariableAnchorOffsetCollection || value instanceof ResolvedImage) {
         return value.toString();
     }
     else {
@@ -5889,71 +5936,80 @@ class Coercion {
         return new Coercion(type, parsed);
     }
     evaluate(ctx) {
-        if (this.type.kind === 'boolean') {
-            return Boolean(this.args[0].evaluate(ctx));
-        }
-        else if (this.type.kind === 'color') {
-            let input;
-            let error;
-            for (const arg of this.args) {
-                input = arg.evaluate(ctx);
-                error = null;
-                if (input instanceof Color) {
-                    return input;
-                }
-                else if (typeof input === 'string') {
-                    const c = ctx.parseColor(input);
-                    if (c)
-                        return c;
-                }
-                else if (Array.isArray(input)) {
-                    if (input.length < 3 || input.length > 4) {
-                        error = `Invalid rbga value ${JSON.stringify(input)}: expected an array containing either three or four numeric values.`;
+        switch (this.type.kind) {
+            case 'boolean':
+                return Boolean(this.args[0].evaluate(ctx));
+            case 'color': {
+                let input;
+                let error;
+                for (const arg of this.args) {
+                    input = arg.evaluate(ctx);
+                    error = null;
+                    if (input instanceof Color) {
+                        return input;
                     }
-                    else {
-                        error = validateRGBA(input[0], input[1], input[2], input[3]);
+                    else if (typeof input === 'string') {
+                        const c = ctx.parseColor(input);
+                        if (c)
+                            return c;
                     }
-                    if (!error) {
-                        return new Color(input[0] / 255, input[1] / 255, input[2] / 255, input[3]);
+                    else if (Array.isArray(input)) {
+                        if (input.length < 3 || input.length > 4) {
+                            error = `Invalid rbga value ${JSON.stringify(input)}: expected an array containing either three or four numeric values.`;
+                        }
+                        else {
+                            error = validateRGBA(input[0], input[1], input[2], input[3]);
+                        }
+                        if (!error) {
+                            return new Color(input[0] / 255, input[1] / 255, input[2] / 255, input[3]);
+                        }
                     }
                 }
+                throw new RuntimeError(error || `Could not parse color from value '${typeof input === 'string' ? input : JSON.stringify(input)}'`);
             }
-            throw new RuntimeError(error || `Could not parse color from value '${typeof input === 'string' ? input : JSON.stringify(input)}'`);
-        }
-        else if (this.type.kind === 'padding') {
-            let input;
-            for (const arg of this.args) {
-                input = arg.evaluate(ctx);
-                const pad = Padding.parse(input);
-                if (pad) {
-                    return pad;
+            case 'padding': {
+                let input;
+                for (const arg of this.args) {
+                    input = arg.evaluate(ctx);
+                    const pad = Padding.parse(input);
+                    if (pad) {
+                        return pad;
+                    }
                 }
+                throw new RuntimeError(`Could not parse padding from value '${typeof input === 'string' ? input : JSON.stringify(input)}'`);
             }
-            throw new RuntimeError(`Could not parse padding from value '${typeof input === 'string' ? input : JSON.stringify(input)}'`);
-        }
-        else if (this.type.kind === 'number') {
-            let value = null;
-            for (const arg of this.args) {
-                value = arg.evaluate(ctx);
-                if (value === null)
-                    return 0;
-                const num = Number(value);
-                if (isNaN(num))
-                    continue;
-                return num;
+            case 'variableAnchorOffsetCollection': {
+                let input;
+                for (const arg of this.args) {
+                    input = arg.evaluate(ctx);
+                    const coll = VariableAnchorOffsetCollection.parse(input);
+                    if (coll) {
+                        return coll;
+                    }
+                }
+                throw new RuntimeError(`Could not parse variableAnchorOffsetCollection from value '${typeof input === 'string' ? input : JSON.stringify(input)}'`);
             }
-            throw new RuntimeError(`Could not convert ${JSON.stringify(value)} to number.`);
-        }
-        else if (this.type.kind === 'formatted') {
-            // There is no explicit 'to-formatted' but this coercion can be implicitly
-            // created by properties that expect the 'formatted' type.
-            return Formatted.fromString(toString(this.args[0].evaluate(ctx)));
-        }
-        else if (this.type.kind === 'resolvedImage') {
-            return ResolvedImage.fromString(toString(this.args[0].evaluate(ctx)));
-        }
-        else {
-            return toString(this.args[0].evaluate(ctx));
+            case 'number': {
+                let value = null;
+                for (const arg of this.args) {
+                    value = arg.evaluate(ctx);
+                    if (value === null)
+                        return 0;
+                    const num = Number(value);
+                    if (isNaN(num))
+                        continue;
+                    return num;
+                }
+                throw new RuntimeError(`Could not convert ${JSON.stringify(value)} to number.`);
+            }
+            case 'formatted':
+                // There is no explicit 'to-formatted' but this coercion can be implicitly
+                // created by properties that expect the 'formatted' type.
+                return Formatted.fromString(toString(this.args[0].evaluate(ctx)));
+            case 'resolvedImage':
+                return ResolvedImage.fromString(toString(this.args[0].evaluate(ctx)));
+            default:
+                return toString(this.args[0].evaluate(ctx));
         }
     }
     eachChild(fn) {
@@ -6075,6 +6131,9 @@ class ParsingContext {
                     else if (expected.kind === 'padding' && (actual.kind === 'value' || actual.kind === 'number' || actual.kind === 'array')) {
                         parsed = annotate(parsed, expected, options.typeAnnotation || 'coerce');
                     }
+                    else if (expected.kind === 'variableAnchorOffsetCollection' && (actual.kind === 'value' || actual.kind === 'array')) {
+                        parsed = annotate(parsed, expected, options.typeAnnotation || 'coerce');
+                    }
                     else if (this.checkSubtype(expected, actual)) {
                         return null;
                     }
@@ -6845,6 +6904,7 @@ const interpolateFactory = (interpolationType) => {
         case 'color': return color;
         case 'array': return array;
         case 'padding': return padding;
+        case 'variableAnchorOffsetCollection': return variableAnchorOffsetCollection;
     }
 };
 function number(from, to, t) {
@@ -6906,11 +6966,32 @@ function array(from, to, t) {
 function padding(from, to, t) {
     return new Padding(array(from.values, to.values, t));
 }
+function variableAnchorOffsetCollection(from, to, t) {
+    const fromValues = from.values;
+    const toValues = to.values;
+    if (fromValues.length !== toValues.length) {
+        throw new RuntimeError(`Cannot interpolate values of different length. from: ${from.toString()}, to: ${to.toString()}`);
+    }
+    const output = [];
+    for (let i = 0; i < fromValues.length; i += 2) {
+        // Anchor entries must match
+        if (fromValues[i] !== toValues[i]) {
+            throw new RuntimeError(`Cannot interpolate values containing mismatched anchors. from[${i}]: ${fromValues[i]}, to[${i}]: ${toValues[i]}`);
+        }
+        output.push(fromValues[i]);
+        // Interpolate the offset values for each anchor
+        const [fx, fy] = fromValues[i + 1];
+        const [tx, ty] = toValues[i + 1];
+        output.push([number(fx, tx, t), number(fy, ty, t)]);
+    }
+    return new VariableAnchorOffsetCollection(output);
+}
 const interpolate = {
     number,
     color,
     array,
     padding,
+    variableAnchorOffsetCollection
 };
 
 class Interpolate {
@@ -7009,6 +7090,7 @@ class Interpolate {
         if (!verifyType(outputType, NumberType) &&
             !verifyType(outputType, ColorType) &&
             !verifyType(outputType, PaddingType) &&
+            !verifyType(outputType, VariableAnchorOffsetCollectionType) &&
             !verifyType(outputType, array$1(NumberType))) {
             return context.error(`Type ${toString$1(outputType)} is not interpolatable.`);
         }
@@ -8868,6 +8950,9 @@ function normalizePropertyExpression(value, specification) {
         else if (specification.type === 'padding' && (typeof value === 'number' || Array.isArray(value))) {
             constant = Padding.parse(value);
         }
+        else if (specification.type === 'variableAnchorOffsetCollection' && Array.isArray(value)) {
+            constant = VariableAnchorOffsetCollection.parse(value);
+        }
         return {
             kind: 'constant',
             evaluate: () => constant
@@ -8921,7 +9006,8 @@ function getExpectedType(spec) {
         boolean: BooleanType,
         formatted: FormattedType,
         padding: PaddingType,
-        resolvedImage: ResolvedImageType
+        resolvedImage: ResolvedImageType,
+        variableAnchorOffsetCollection: VariableAnchorOffsetCollectionType
     };
     if (spec.type === 'array') {
         return array$1(types[spec.value] || ValueType, spec.length);
@@ -8941,6 +9027,9 @@ function getDefaultValue(spec) {
     else if (spec.type === 'padding') {
         return Padding.parse(spec.default) || null;
     }
+    else if (spec.type === 'variableAnchorOffsetCollection') {
+        return VariableAnchorOffsetCollection.parse(spec.default) || null;
+    }
     else if (spec.default === undefined) {
         return null;
     }
@@ -10610,6 +10699,38 @@ function validatePadding(options) {
     }
 }
 
+function validateVariableAnchorOffsetCollection(options) {
+    const key = options.key;
+    const value = options.value;
+    const type = getType(value);
+    const styleSpec = options.styleSpec;
+    if (type !== 'array' || value.length < 1 || value.length % 2 !== 0) {
+        return [new ValidationError(key, value, 'variableAnchorOffsetCollection requires a non-empty array of even length')];
+    }
+    let errors = [];
+    for (let i = 0; i < value.length; i += 2) {
+        // Elements in even positions should be values from text-anchor enum
+        errors = errors.concat(validateEnum({
+            key: `${key}[${i}]`,
+            value: value[i],
+            valueSpec: styleSpec['layout_symbol']['text-anchor']
+        }));
+        // Elements in odd positions should be points (2-element numeric arrays)
+        errors = errors.concat(validateArray({
+            key: `${key}[${i + 1}]`,
+            value: value[i + 1],
+            valueSpec: {
+                length: 2,
+                value: 'number'
+            },
+            validateSpec: options.validateSpec,
+            style: options.style,
+            styleSpec
+        }));
+    }
+    return errors;
+}
+
 function validateSprite(options) {
     let errors = [];
     const sprite = options.value;
@@ -10672,6 +10793,7 @@ const VALIDATORS = {
     'formatted': validateFormatted,
     'resolvedImage': validateImage,
     'padding': validatePadding,
+    'variableAnchorOffsetCollection': validateVariableAnchorOffsetCollection,
     'sprite': validateSprite,
 };
 // Main recursive validation function. Tracks:
@@ -12246,6 +12368,9 @@ class Layout {
         this._properties = properties;
         this._values = Object.create(properties.defaultPropertyValues);
     }
+    hasValue(name) {
+        return this._values[name].value !== undefined;
+    }
     getValue(name) {
         return clone$9(this._values[name].value);
     }
@@ -13371,10 +13496,11 @@ register('StructArrayLayout2i2ui3ul3ui2f3ub1ul1i48', StructArrayLayout2i2ui3ul3u
  * [0]: Int16[8]
  * [16]: Uint16[15]
  * [48]: Uint32[1]
- * [52]: Float32[4]
+ * [52]: Float32[2]
+ * [60]: Uint16[2]
  *
  */
-class StructArrayLayout8i15ui1ul4f68 extends StructArray {
+class StructArrayLayout8i15ui1ul2f2ui64 extends StructArray {
     _refreshViews() {
         this.uint8 = new Uint8Array(this.arrayBuffer);
         this.int16 = new Int16Array(this.arrayBuffer);
@@ -13388,8 +13514,8 @@ class StructArrayLayout8i15ui1ul4f68 extends StructArray {
         return this.emplace(i, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9, v10, v11, v12, v13, v14, v15, v16, v17, v18, v19, v20, v21, v22, v23, v24, v25, v26, v27);
     }
     emplace(i, v0, v1, v2, v3, v4, v5, v6, v7, v8, v9, v10, v11, v12, v13, v14, v15, v16, v17, v18, v19, v20, v21, v22, v23, v24, v25, v26, v27) {
-        const o2 = i * 34;
-        const o4 = i * 17;
+        const o2 = i * 32;
+        const o4 = i * 16;
         this.int16[o2 + 0] = v0;
         this.int16[o2 + 1] = v1;
         this.int16[o2 + 2] = v2;
@@ -13416,13 +13542,13 @@ class StructArrayLayout8i15ui1ul4f68 extends StructArray {
         this.uint32[o4 + 12] = v23;
         this.float32[o4 + 13] = v24;
         this.float32[o4 + 14] = v25;
-        this.float32[o4 + 15] = v26;
-        this.float32[o4 + 16] = v27;
+        this.uint16[o2 + 30] = v26;
+        this.uint16[o2 + 31] = v27;
         return i;
     }
 }
-StructArrayLayout8i15ui1ul4f68.prototype.bytesPerElement = 68;
-register('StructArrayLayout8i15ui1ul4f68', StructArrayLayout8i15ui1ul4f68);
+StructArrayLayout8i15ui1ul2f2ui64.prototype.bytesPerElement = 64;
+register('StructArrayLayout8i15ui1ul2f2ui64', StructArrayLayout8i15ui1ul2f2ui64);
 /**
  * @internal
  * Implementation of the StructArray layout:
@@ -13447,6 +13573,35 @@ class StructArrayLayout1f4 extends StructArray {
 }
 StructArrayLayout1f4.prototype.bytesPerElement = 4;
 register('StructArrayLayout1f4', StructArrayLayout1f4);
+/**
+ * @internal
+ * Implementation of the StructArray layout:
+ * [0]: Uint16[1]
+ * [4]: Float32[2]
+ *
+ */
+class StructArrayLayout1ui2f12 extends StructArray {
+    _refreshViews() {
+        this.uint8 = new Uint8Array(this.arrayBuffer);
+        this.uint16 = new Uint16Array(this.arrayBuffer);
+        this.float32 = new Float32Array(this.arrayBuffer);
+    }
+    emplaceBack(v0, v1, v2) {
+        const i = this.length;
+        this.resize(i + 1);
+        return this.emplace(i, v0, v1, v2);
+    }
+    emplace(i, v0, v1, v2) {
+        const o2 = i * 6;
+        const o4 = i * 3;
+        this.uint16[o2 + 0] = v0;
+        this.float32[o4 + 1] = v1;
+        this.float32[o4 + 2] = v2;
+        return i;
+    }
+}
+StructArrayLayout1ui2f12.prototype.bytesPerElement = 12;
+register('StructArrayLayout1ui2f12', StructArrayLayout1ui2f12);
 /**
  * @internal
  * Implementation of the StructArray layout:
@@ -13640,13 +13795,13 @@ class SymbolInstanceStruct extends Struct {
     get crossTileID() { return this._structArray.uint32[this._pos4 + 12]; }
     set crossTileID(x) { this._structArray.uint32[this._pos4 + 12] = x; }
     get textBoxScale() { return this._structArray.float32[this._pos4 + 13]; }
-    get textOffset0() { return this._structArray.float32[this._pos4 + 14]; }
-    get textOffset1() { return this._structArray.float32[this._pos4 + 15]; }
-    get collisionCircleDiameter() { return this._structArray.float32[this._pos4 + 16]; }
+    get collisionCircleDiameter() { return this._structArray.float32[this._pos4 + 14]; }
+    get textAnchorOffsetStartIndex() { return this._structArray.uint16[this._pos2 + 30]; }
+    get textAnchorOffsetEndIndex() { return this._structArray.uint16[this._pos2 + 31]; }
 }
-SymbolInstanceStruct.prototype.size = 68;
+SymbolInstanceStruct.prototype.size = 64;
 /** @internal */
-class SymbolInstanceArray extends StructArrayLayout8i15ui1ul4f68 {
+class SymbolInstanceArray extends StructArrayLayout8i15ui1ul2f2ui64 {
     /**
      * Return the SymbolInstanceStruct at the given location in the array.
      * @param index The index of the element.
@@ -13669,6 +13824,24 @@ class SymbolLineVertexArray extends StructArrayLayout3i6 {
 }
 register('SymbolLineVertexArray', SymbolLineVertexArray);
 /** @internal */
+class TextAnchorOffsetStruct extends Struct {
+    get textAnchor() { return this._structArray.uint16[this._pos2 + 0]; }
+    get textOffset0() { return this._structArray.float32[this._pos4 + 1]; }
+    get textOffset1() { return this._structArray.float32[this._pos4 + 2]; }
+}
+TextAnchorOffsetStruct.prototype.size = 12;
+/** @internal */
+class TextAnchorOffsetArray extends StructArrayLayout1ui2f12 {
+    /**
+     * Return the TextAnchorOffsetStruct at the given location in the array.
+     * @param index The index of the element.
+     */
+    get(index) {
+        return new TextAnchorOffsetStruct(this, index);
+    }
+}
+register('TextAnchorOffsetArray', TextAnchorOffsetArray);
+/** @internal */
 class FeatureIndexStruct extends Struct {
     get featureIndex() { return this._structArray.uint32[this._pos4 + 0]; }
     get sourceLayerIndex() { return this._structArray.uint16[this._pos2 + 2]; }
@@ -25433,8 +25606,9 @@ const symbolInstance = createLayout([
     { type: 'Uint16', name: 'useRuntimeCollisionCircles' },
     { type: 'Uint32', name: 'crossTileID' },
     { type: 'Float32', name: 'textBoxScale' },
-    { type: 'Float32', components: 2, name: 'textOffset' },
     { type: 'Float32', name: 'collisionCircleDiameter' },
+    { type: 'Uint16', name: 'textAnchorOffsetStartIndex' },
+    { type: 'Uint16', name: 'textAnchorOffsetEndIndex' }
 ]);
 const glyphOffset = createLayout([
     { type: 'Float32', name: 'offsetX' }
@@ -25444,6 +25618,10 @@ const lineVertex = createLayout([
     { type: 'Int16', name: 'y' },
     { type: 'Int16', name: 'tileUnitDistanceFromAnchor' }
 ]);
+const textAnchorOffset = createLayout([
+    { type: 'Uint16', name: 'textAnchor' },
+    { type: 'Float32', components: 2, name: 'textOffset' }
+]);
 
 function transformTextInternal(text, layer, feature) {
     const transform = layer.layout.get('text-transform').evaluate(feature, {});
@@ -27436,6 +27614,7 @@ class SymbolBucket {
         this.glyphOffsetArray = new GlyphOffsetArray();
         this.lineVertexArray = new SymbolLineVertexArray();
         this.symbolInstances = new SymbolInstanceArray();
+        this.textAnchorOffsets = new TextAnchorOffsetArray();
     }
     calculateGlyphDependencies(text, stack, textAlongLine, allowVerticalPlacement, doesAllowVerticalWritingMode) {
         for (let i = 0; i < text.length; i++) {
@@ -27913,6 +28092,7 @@ const getLayout = () => layout = layout || new Properties({
     "text-justify": new DataDrivenProperty(v8Spec["layout_symbol"]["text-justify"]),
     "text-radial-offset": new DataDrivenProperty(v8Spec["layout_symbol"]["text-radial-offset"]),
     "text-variable-anchor": new DataConstantProperty(v8Spec["layout_symbol"]["text-variable-anchor"]),
+    "text-variable-anchor-offset": new DataDrivenProperty(v8Spec["layout_symbol"]["text-variable-anchor-offset"]),
     "text-anchor": new DataDrivenProperty(v8Spec["layout_symbol"]["text-anchor"]),
     "text-max-angle": new DataConstantProperty(v8Spec["layout_symbol"]["text-max-angle"]),
     "text-writing-mode": new DataConstantProperty(v8Spec["layout_symbol"]["text-writing-mode"]),
@@ -30044,6 +30224,18 @@ function getCentroidCell(polygon) {
     return new Cell(x / area, y / area, 0, polygon);
 }
 
+exports.TextAnchorEnum = void 0;
+(function (TextAnchorEnum) {
+    TextAnchorEnum[TextAnchorEnum["center"] = 1] = "center";
+    TextAnchorEnum[TextAnchorEnum["left"] = 2] = "left";
+    TextAnchorEnum[TextAnchorEnum["right"] = 3] = "right";
+    TextAnchorEnum[TextAnchorEnum["top"] = 4] = "top";
+    TextAnchorEnum[TextAnchorEnum["bottom"] = 5] = "bottom";
+    TextAnchorEnum[TextAnchorEnum["top-left"] = 6] = "top-left";
+    TextAnchorEnum[TextAnchorEnum["top-right"] = 7] = "top-right";
+    TextAnchorEnum[TextAnchorEnum["bottom-left"] = 8] = "bottom-left";
+    TextAnchorEnum[TextAnchorEnum["bottom-right"] = 9] = "bottom-right";
+})(exports.TextAnchorEnum || (exports.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
@@ -30125,14 +30317,60 @@ function evaluateVariableOffset(anchor, offset) {
     }
     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
+function getTextVariableAnchorOffset(layer, feature, canonical) {
+    var _a;
+    const layout = layer.layout;
+    // If style specifies text-variable-anchor-offset, just return it
+    const variableAnchorOffset = (_a = layout.get('text-variable-anchor-offset')) === null || _a === void 0 ? void 0 : _a.evaluate(feature, {}, canonical);
+    if (variableAnchorOffset) {
+        const sourceValues = variableAnchorOffset.values;
+        const destValues = [];
+        // 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];
+            const offset = sourceValues[i + 1].map(t => t * ONE_EM);
+            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;
+        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);
+        }
+        const anchorOffsets = [];
+        for (const anchor of variableAnchor) {
+            anchorOffsets.push(anchor, evaluateVariableOffset(anchor, textOffset));
+        }
+        return new VariableAnchorOffsetCollection(anchorOffsets);
+    }
+    return null;
+}
+
 function performSymbolLayout(args) {
     args.bucket.createArrays();
     const tileSize = 512 * args.bucket.overscaling;
     args.bucket.tilePixelRatio = EXTENT / tileSize;
     args.bucket.compareText = {};
     args.bucket.iconsNeedLinear = false;
-    const layout = args.bucket.layers[0].layout;
-    const unevaluatedLayoutValues = args.bucket.layers[0]._unevaluatedLayout._values;
+    const layer = args.bucket.layers[0];
+    const layout = layer.layout;
+    const unevaluatedLayoutValues = layer._unevaluatedLayout._values;
     const sizes = {
         // Filled in below, if *SizeData.kind is 'composite'
         // compositeIconSizes: undefined,
@@ -30175,8 +30413,8 @@ function performSymbolLayout(args) {
             const spacing = layout.get('text-letter-spacing').evaluate(feature, {}, args.canonical) * ONE_EM;
             const spacingIfAllowed = allowsLetterSpacing(unformattedText) ? spacing : 0;
             const textAnchor = layout.get('text-anchor').evaluate(feature, {}, args.canonical);
-            const variableTextAnchor = layout.get('text-variable-anchor');
-            if (!variableTextAnchor) {
+            const variableAnchorOffset = getTextVariableAnchorOffset(layer, feature, args.canonical);
+            if (!variableAnchorOffset) {
                 const radialOffset = layout.get('text-radial-offset').evaluate(feature, {}, args.canonical);
                 // Layers with variable anchors use the `text-radial-offset` property and the [x, y] offset vector
                 // is calculated at placement time instead of layout time
@@ -30205,13 +30443,18 @@ function performSymbolLayout(args) {
                 }
             };
             // If this layer uses text-variable-anchor, generate shapings for all justification possibilities.
-            if (!textAlongLine && variableTextAnchor) {
-                const justifications = textJustify === 'auto' ?
-                    variableTextAnchor.map(a => getAnchorJustification(a)) :
-                    [textJustify];
+            if (!textAlongLine && variableAnchorOffset) {
+                const justifications = new Set();
+                if (textJustify === 'auto') {
+                    for (let i = 0; i < variableAnchorOffset.values.length; i += 2) {
+                        justifications.add(getAnchorJustification(variableAnchorOffset.values[i]));
+                    }
+                }
+                else {
+                    justifications.add(textJustify);
+                }
                 let singleLine = false;
-                for (let i = 0; i < justifications.length; i++) {
-                    const justification = justifications[i];
+                for (const justification of justifications) {
                     if (shapedTextOrientations.horizontal[justification])
                         continue;
                     if (singleLine) {
@@ -30376,6 +30619,18 @@ function addFeature(bucket, feature, shapedTextOrientations, shapedIcon, imageMa
         }
     }
 }
+function addTextVariableAnchorOffsets(textAnchorOffsets, variableAnchorOffset) {
+    const startIndex = textAnchorOffsets.length;
+    const values = variableAnchorOffset === null || variableAnchorOffset === void 0 ? void 0 : variableAnchorOffset.values;
+    if ((values === null || values === void 0 ? void 0 : values.length) > 0) {
+        for (let i = 0; i < values.length; i += 2) {
+            const anchor = exports.TextAnchorEnum[values[i]];
+            const offset = values[i + 1];
+            textAnchorOffsets.emplaceBack(anchor, offset[0], offset[1]);
+        }
+    }
+    return [startIndex, textAnchorOffsets.length];
+}
 function addTextVertices(bucket, anchor, shapedText, imageMap, layer, textAlongLine, feature, textOffset, lineArray, writingMode, placementTypes, placedTextSymbolIndices, placedIconIndex, sizes, canonical) {
     const glyphQuads = getGlyphQuads(anchor, shapedText, textOffset, layer, textAlongLine, feature, imageMap, bucket.allowVerticalPlacement);
     const sizeData = bucket.textSizeData;
@@ -30427,15 +30682,6 @@ function addSymbol(bucket, anchor, line, shapedTextOrientations, shapedIcon, ima
     let verticalPlacedIconSymbolIndex = -1;
     const placedTextSymbolIndices = {};
     let key = murmur3$1('');
-    let textOffset0 = 0;
-    let textOffset1 = 0;
-    if (layer._unevaluatedLayout.getValue('text-radial-offset') === undefined) {
-        [textOffset0, textOffset1] = layer.layout.get('text-offset').evaluate(feature, {}, canonical).map(t => t * ONE_EM);
-    }
-    else {
-        textOffset0 = layer.layout.get('text-radial-offset').evaluate(feature, {}, canonical) * ONE_EM;
-        textOffset1 = INVALID_TEXT_OFFSET;
-    }
     if (bucket.allowVerticalPlacement && shapedTextOrientations.vertical) {
         const textRotation = layer.layout.get('text-rotate').evaluate(feature, {}, canonical);
         const verticalTextRotation = textRotation + 90.0;
@@ -30536,7 +30782,9 @@ function addSymbol(bucket, anchor, line, shapedTextOrientations, shapedIcon, ima
     if (feature.sortKey !== undefined) {
         bucket.addToSortKeyRanges(bucket.symbolInstances.length, feature.sortKey);
     }
-    bucket.symbolInstances.emplaceBack(anchor.x, anchor.y, placedTextSymbolIndices.right >= 0 ? placedTextSymbolIndices.right : -1, placedTextSymbolIndices.center >= 0 ? placedTextSymbolIndices.center : -1, placedTextSymbolIndices.left >= 0 ? placedTextSymbolIndices.left : -1, placedTextSymbolIndices.vertical || -1, placedIconSymbolIndex, verticalPlacedIconSymbolIndex, key, textBoxStartIndex, textBoxEndIndex, verticalTextBoxStartIndex, verticalTextBoxEndIndex, iconBoxStartIndex, iconBoxEndIndex, verticalIconBoxStartIndex, verticalIconBoxEndIndex, featureIndex, numHorizontalGlyphVertices, numVerticalGlyphVertices, numIconVertices, numVerticalIconVertices, useRuntimeCollisionCircles, 0, textBoxScale, textOffset0, textOffset1, collisionCircleDiameter);
+    const variableAnchorOffset = getTextVariableAnchorOffset(layer, feature, canonical);
+    const [textAnchorOffsetStartIndex, textAnchorOffsetEndIndex] = addTextVariableAnchorOffsets(bucket.textAnchorOffsets, variableAnchorOffset);
+    bucket.symbolInstances.emplaceBack(anchor.x, anchor.y, placedTextSymbolIndices.right >= 0 ? placedTextSymbolIndices.right : -1, placedTextSymbolIndices.center >= 0 ? placedTextSymbolIndices.center : -1, placedTextSymbolIndices.left >= 0 ? placedTextSymbolIndices.left : -1, placedTextSymbolIndices.vertical || -1, placedIconSymbolIndex, verticalPlacedIconSymbolIndex, key, textBoxStartIndex, textBoxEndIndex, verticalTextBoxStartIndex, verticalTextBoxEndIndex, iconBoxStartIndex, iconBoxEndIndex, verticalIconBoxStartIndex, verticalIconBoxEndIndex, featureIndex, numHorizontalGlyphVertices, numVerticalGlyphVertices, numIconVertices, numVerticalIconVertices, useRuntimeCollisionCircles, 0, textBoxScale, collisionCircleDiameter, textAnchorOffsetStartIndex, textAnchorOffsetEndIndex);
 }
 function anchorIsTooClose(bucket, text, repeatDistance, anchor) {
     const compareText = bucket.compareText;
@@ -31058,7 +31306,6 @@ exports.emptyStyle = emptyStyle;
 exports.equals = equals$6;
 exports.evaluateSizeForFeature = evaluateSizeForFeature;
 exports.evaluateSizeForZoom = evaluateSizeForZoom;
-exports.evaluateVariableOffset = evaluateVariableOffset;
 exports.evented = evented;
 exports.extend = extend;
 exports.filterObject = filterObject;
@@ -33782,7 +34029,7 @@ define(['./shared'], (function (performance) { 'use strict';
 
 var name = "maplibre-gl";
 var description = "BSD licensed community fork of mapbox-gl, a WebGL interactive maps library";
-var version$2 = "3.2.2";
+var version$2 = "3.3.0";
 var main = "dist/maplibre-gl.js";
 var style = "dist/maplibre-gl.css";
 var license = "BSD-3-Clause";
@@ -33801,7 +34048,7 @@ var dependencies = {
 	"@mapbox/unitbezier": "^0.0.1",
 	"@mapbox/vector-tile": "^1.3.1",
 	"@mapbox/whoots-js": "^3.1.0",
-	"@maplibre/maplibre-gl-style-spec": "^19.2.2",
+	"@maplibre/maplibre-gl-style-spec": "^19.3.0",
 	"@types/geojson": "^7946.0.10",
 	"@types/mapbox__point-geometry": "^0.1.2",
 	"@types/mapbox__vector-tile": "^1.3.0",
@@ -33835,7 +34082,7 @@ var devDependencies = {
 	"@types/d3": "^7.4.0",
 	"@types/diff": "^5.0.3",
 	"@types/earcut": "^2.1.1",
-	"@types/eslint": "^8.44.1",
+	"@types/eslint": "^8.44.2",
 	"@types/gl": "^6.0.2",
 	"@types/glob": "^8.1.0",
 	"@types/jest": "^29.5.3",
@@ -33843,24 +34090,24 @@ var devDependencies = {
 	"@types/minimist": "^1.2.2",
 	"@types/murmurhash-js": "^1.0.4",
 	"@types/nise": "^1.4.1",
-	"@types/node": "^20.4.5",
+	"@types/node": "^20.4.8",
 	"@types/offscreencanvas": "^2019.7.0",
 	"@types/pixelmatch": "^5.2.4",
 	"@types/pngjs": "^6.0.1",
-	"@types/react": "^18.2.17",
+	"@types/react": "^18.2.18",
 	"@types/react-dom": "^18.2.7",
 	"@types/request": "^2.48.8",
 	"@types/shuffle-seed": "^1.1.0",
 	"@types/window-or-global": "^1.0.4",
-	"@typescript-eslint/eslint-plugin": "^6.2.0",
-	"@typescript-eslint/parser": "^6.2.0",
+	"@typescript-eslint/eslint-plugin": "^6.2.1",
+	"@typescript-eslint/parser": "^6.2.1",
 	address: "^1.2.2",
 	benchmark: "^2.1.4",
 	canvas: "^2.11.2",
 	cssnano: "^6.0.1",
 	d3: "^7.8.5",
 	"d3-queue": "^3.0.7",
-	"devtools-protocol": "^0.0.1173815",
+	"devtools-protocol": "^0.0.1179426",
 	diff: "^5.1.0",
 	"dts-bundle-generator": "^8.0.1",
 	eslint: "^8.46.0",
@@ -33892,10 +34139,10 @@ var devDependencies = {
 	"postcss-cli": "^10.1.0",
 	"postcss-inline-svg": "^6.0.0",
 	"pretty-bytes": "^6.1.1",
-	puppeteer: "^20.9.0",
+	puppeteer: "^21.0.1",
 	react: "^18.2.0",
 	"react-dom": "^18.2.0",
-	rollup: "^3.27.0",
+	rollup: "^3.27.2",
 	"rollup-plugin-sourcemaps": "^0.6.3",
 	rw: "^1.3.3",
 	semver: "^7.5.4",
@@ -40127,8 +40374,7 @@ function calculateVariableLayoutShift(anchor, width, height, textOffset, textBox
     const { horizontalAlign, verticalAlign } = performance.getAnchorAlignment(anchor);
     const shiftX = -(horizontalAlign - 0.5) * width;
     const shiftY = -(verticalAlign - 0.5) * height;
-    const offset = performance.evaluateVariableOffset(anchor, textOffset);
-    return new performance.Point(shiftX + offset[0] * textBoxScale, shiftY + offset[1] * textBoxScale);
+    return new performance.Point(shiftX + textOffset[0] * textBoxScale, shiftY + textOffset[1] * textBoxScale);
 }
 function shiftVariableCollisionBox(collisionBox, shiftX, shiftY, rotateWithMap, pitchWithMap, angle) {
     const { x1, x2, y1, y2, anchorPointX, anchorPointY } = collisionBox;
@@ -40215,8 +40461,9 @@ class Placement {
             });
         }
     }
-    attemptAnchorPlacement(anchor, textBox, width, height, textBoxScale, rotateWithMap, pitchWithMap, textPixelRatio, posMatrix, collisionGroup, textOverlapMode, symbolInstance, bucket, orientation, iconBox, getElevation) {
-        const textOffset = [symbolInstance.textOffset0, symbolInstance.textOffset1];
+    attemptAnchorPlacement(textAnchorOffset, textBox, width, height, textBoxScale, rotateWithMap, pitchWithMap, textPixelRatio, posMatrix, collisionGroup, textOverlapMode, symbolInstance, bucket, orientation, iconBox, getElevation) {
+        const anchor = performance.TextAnchorEnum[textAnchorOffset.textAnchor];
+        const textOffset = [textAnchorOffset.textOffset0, textAnchorOffset.textOffset1];
         const shift = calculateVariableLayoutShift(anchor, width, height, textOffset, textBoxScale);
         const placedGlyphBoxes = this.collisionIndex.placeCollisionBox(shiftVariableCollisionBox(textBox, shift.x, shift.y, rotateWithMap, pitchWithMap, this.transform.angle), textOverlapMode, textPixelRatio, posMatrix, collisionGroup.predicate, getElevation);
         if (iconBox) {
@@ -40286,6 +40533,7 @@ class Placement {
         const tileID = this.retainedQueryData[bucket.bucketInstanceId].tileID;
         const getElevation = this.terrain ? (x, y) => this.terrain.getElevation(tileID, x, y) : null;
         const placeSymbol = (symbolInstance, collisionArrays) => {
+            var _a, _b;
             if (seenCrossTileIDs[symbolInstance.crossTileID])
                 return;
             if (holdingForFade) {
@@ -40347,7 +40595,10 @@ class Placement {
                         placed = placeHorizontalFn();
                     }
                 };
-                if (!layout.get('text-variable-anchor')) {
+                const textAnchorOffsetStart = symbolInstance.textAnchorOffsetStartIndex;
+                const textAnchorOffsetEnd = symbolInstance.textAnchorOffsetEndIndex;
+                // If start+end indices match, text-variable-anchor is not in play.
+                if (textAnchorOffsetEnd === textAnchorOffsetStart) {
                     const placeBox = (collisionTextBox, orientation) => {
                         const placedFeature = this.collisionIndex.placeCollisionBox(collisionTextBox, textOverlapMode, textPixelRatio, posMatrix, collisionGroup.predicate, getElevation);
                         if (placedFeature && placedFeature.box && placedFeature.box.length) {
@@ -40370,35 +40621,40 @@ class Placement {
                     updatePreviousOrientationIfNotPlaced(placed && placed.box && placed.box.length);
                 }
                 else {
-                    let anchors = layout.get('text-variable-anchor');
-                    // If this symbol was in the last placement, shift the previously used
-                    // anchor to the front of the anchor list, only if the previous anchor
-                    // is still in the anchor list
-                    if (this.prevPlacement && this.prevPlacement.variableOffsets[symbolInstance.crossTileID]) {
-                        const prevOffsets = this.prevPlacement.variableOffsets[symbolInstance.crossTileID];
-                        if (anchors.indexOf(prevOffsets.anchor) > 0) {
-                            anchors = anchors.filter(anchor => anchor !== prevOffsets.anchor);
-                            anchors.unshift(prevOffsets.anchor);
-                        }
-                    }
+                    // If this symbol was in the last placement, prefer placement using same anchor, if it's still available
+                    let prevAnchor = performance.TextAnchorEnum[(_b = (_a = this.prevPlacement) === null || _a === void 0 ? void 0 : _a.variableOffsets[symbolInstance.crossTileID]) === null || _b === void 0 ? void 0 : _b.anchor];
                     const placeBoxForVariableAnchors = (collisionTextBox, collisionIconBox, orientation) => {
                         const width = collisionTextBox.x2 - collisionTextBox.x1;
                         const height = collisionTextBox.y2 - collisionTextBox.y1;
                         const textBoxScale = symbolInstance.textBoxScale;
                         const variableIconBox = hasIconTextFit && (iconOverlapMode === 'never') ? collisionIconBox : null;
                         let placedBox = { box: [], offscreen: false };
-                        const placementAttempts = (textOverlapMode !== 'never') ? anchors.length * 2 : anchors.length;
-                        for (let i = 0; i < placementAttempts; ++i) {
-                            const anchor = anchors[i % anchors.length];
-                            const overlapMode = (i >= anchors.length) ? textOverlapMode : 'never';
-                            const result = this.attemptAnchorPlacement(anchor, collisionTextBox, width, height, textBoxScale, rotateWithMap, pitchWithMap, textPixelRatio, posMatrix, collisionGroup, overlapMode, symbolInstance, bucket, orientation, variableIconBox, getElevation);
-                            if (result) {
-                                placedBox = result.placedGlyphBoxes;
-                                if (placedBox && placedBox.box && placedBox.box.length) {
-                                    placeText = true;
-                                    shift = result.shift;
-                                    break;
+                        let placementPasses = (textOverlapMode === 'never') ? 1 : 2;
+                        let overlapMode = 'never';
+                        if (prevAnchor) {
+                            placementPasses++;
+                        }
+                        for (let pass = 0; pass < placementPasses; pass++) {
+                            for (let i = textAnchorOffsetStart; i < textAnchorOffsetEnd; i++) {
+                                const textAnchorOffset = bucket.textAnchorOffsets.get(i);
+                                if (prevAnchor && textAnchorOffset.textAnchor !== prevAnchor) {
+                                    continue;
                                 }
+                                const result = this.attemptAnchorPlacement(textAnchorOffset, collisionTextBox, width, height, textBoxScale, rotateWithMap, pitchWithMap, textPixelRatio, posMatrix, collisionGroup, overlapMode, symbolInstance, bucket, orientation, variableIconBox, getElevation);
+                                if (result) {
+                                    placedBox = result.placedGlyphBoxes;
+                                    if (placedBox && placedBox.box && placedBox.box.length) {
+                                        placeText = true;
+                                        shift = result.shift;
+                                        return placedBox;
+                                    }
+                                }
+                            }
+                            if (prevAnchor) {
+                                prevAnchor = null;
+                            }
+                            else {
+                                overlapMode = textOverlapMode;
                             }
                         }
                         return placedBox;
@@ -40670,11 +40926,12 @@ class Placement {
             bucket.iconCollisionBox.collisionVertexArray.clear();
         if (bucket.hasTextCollisionBoxData())
             bucket.textCollisionBox.collisionVertexArray.clear();
-        const layout = bucket.layers[0].layout;
+        const layer = bucket.layers[0];
+        const layout = layer.layout;
         const duplicateOpacityState = new JointOpacityState(null, 0, false, false, true);
         const textAllowOverlap = layout.get('text-allow-overlap');
         const iconAllowOverlap = layout.get('icon-allow-overlap');
-        const variablePlacement = layout.get('text-variable-anchor');
+        const hasVariablePlacement = layer._unevaluatedLayout.hasValue('text-variable-anchor') || layer._unevaluatedLayout.hasValue('text-variable-anchor-offset');
         const rotateWithMap = layout.get('text-rotation-alignment') === 'map';
         const pitchWithMap = layout.get('text-pitch-alignment') === 'map';
         const hasIconTextFit = layout.get('icon-text-fit') !== 'none';
@@ -40768,7 +41025,7 @@ class Placement {
                     let shift = new performance.Point(0, 0);
                     if (collisionArrays.textBox || collisionArrays.verticalTextBox) {
                         let used = true;
-                        if (variablePlacement) {
+                        if (hasVariablePlacement) {
                             const variableOffset = this.variableOffsets[crossTileID];
                             if (variableOffset) {
                                 // This will show either the currently placed position or the last
@@ -44771,10 +45028,10 @@ function drawSymbols(painter, sourceCache, layer, coords, variableOffsets) {
     // Disable the stencil test so that labels aren't clipped to tile boundaries.
     const stencilMode = StencilMode.disabled;
     const colorMode = painter.colorModeForRenderPass();
-    const variablePlacement = layer.layout.get('text-variable-anchor');
+    const hasVariablePlacement = layer._unevaluatedLayout.hasValue('text-variable-anchor') || layer._unevaluatedLayout.hasValue('text-variable-anchor-offset');
     //Compute variable-offsets before painting since icons and text data positioning
     //depend on each other in this case.
-    if (variablePlacement) {
+    if (hasVariablePlacement) {
         updateVariableAnchors(coords, painter, layer, sourceCache, layer.layout.get('text-rotation-alignment'), layer.layout.get('text-pitch-alignment'), variableOffsets);
     }
     if (layer.paint.get('icon-opacity').constantOr(1) !== 0) {
@@ -44792,8 +45049,7 @@ function calculateVariableRenderShift(anchor, width, height, textOffset, textBox
     const { horizontalAlign, verticalAlign } = performance.getAnchorAlignment(anchor);
     const shiftX = -(horizontalAlign - 0.5) * width;
     const shiftY = -(verticalAlign - 0.5) * height;
-    const variableOffset = performance.evaluateVariableOffset(anchor, textOffset);
-    return new performance.Point((shiftX / textBoxScale + variableOffset[0]) * renderTextSize, (shiftY / textBoxScale + variableOffset[1]) * renderTextSize);
+    return new performance.Point((shiftX / textBoxScale + textOffset[0]) * renderTextSize, (shiftY / textBoxScale + textOffset[1]) * renderTextSize);
 }
 function updateVariableAnchors(coords, painter, layer, sourceCache, rotationAlignment, pitchAlignment, variableOffsets) {
     const tr = painter.transform;
@@ -44909,7 +45165,7 @@ function drawLayerSymbols(painter, sourceCache, layer, coords, isText, translate
     const hasSortKey = !layer.layout.get('symbol-sort-key').isConstant();
     let sortFeaturesByKey = false;
     const depthMode = painter.depthModeForSublayer(0, DepthMode.ReadOnly);
-    const variablePlacement = layer.layout.get('text-variable-anchor');
+    const hasVariablePlacement = layer._unevaluatedLayout.hasValue('text-variable-anchor') || layer._unevaluatedLayout.hasValue('text-variable-anchor-offset');
     const tileRenderState = [];
     for (const coord of coords) {
         const tile = sourceCache.getTile(coord);
@@ -44954,7 +45210,7 @@ function drawLayerSymbols(painter, sourceCache, layer, coords, isText, translate
         const s = pixelsToTileUnits(tile, 1, painter.transform.zoom);
         const labelPlaneMatrix = getLabelPlaneMatrix(coord.posMatrix, pitchWithMap, rotateWithMap, painter.transform, s);
         const glCoordMatrix = getGlCoordMatrix(coord.posMatrix, pitchWithMap, rotateWithMap, painter.transform, s);
-        const hasVariableAnchors = variablePlacement && bucket.hasTextData();
+        const hasVariableAnchors = hasVariablePlacement && bucket.hasTextData();
         const updateTextFitIcon = layer.layout.get('icon-text-fit') !== 'none' &&
             hasVariableAnchors &&
             bucket.hasIconData();
@@ -44963,7 +45219,7 @@ function drawLayerSymbols(painter, sourceCache, layer, coords, isText, translate
             const rotateToLine = layer.layout.get('text-rotation-alignment') === 'map';
             updateLineLabels(bucket, coord.posMatrix, painter, isText, labelPlaneMatrix, glCoordMatrix, pitchWithMap, keepUpright, rotateToLine, getElevation);
         }
-        const matrix = painter.translatePosMatrix(coord.posMatrix, tile, translate, translateAnchor), uLabelPlaneMatrix = (alongLine || (isText && variablePlacement) || updateTextFitIcon) ? identityMat4 : labelPlaneMatrix, uglCoordMatrix = painter.translatePosMatrix(glCoordMatrix, tile, translate, translateAnchor, true);
+        const matrix = painter.translatePosMatrix(coord.posMatrix, tile, translate, translateAnchor), uLabelPlaneMatrix = (alongLine || (isText && hasVariablePlacement) || updateTextFitIcon) ? identityMat4 : labelPlaneMatrix, uglCoordMatrix = painter.translatePosMatrix(glCoordMatrix, tile, translate, translateAnchor, true);
         const hasHalo = isSDF && layer.paint.get(isText ? 'text-halo-width' : 'icon-halo-width').constantOr(1) !== 0;
         let uniformValues;
         if (isSDF) {