maplibre-gl 3.2.2 → 3.3.1

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

package/src/symbol/placement.ts

@@ -3,7 +3,7 @@ import type {FeatureKey} from './collision_index';
 import {EXTENT} from '../data/extent';
 import * as symbolSize from './symbol_size';
 import * as projection from './projection';
-import {getAnchorJustification, evaluateVariableOffset} from './symbol_layout';
+import {getAnchorJustification} from './symbol_layout';
 import {getAnchorAlignment, WritingMode} from './shaping';
 import {mat4} from 'gl-matrix';
 import {pixelsToTileUnits} from '../source/pixels_to_tile_units';
@@ -17,12 +17,12 @@ import {getOverlapMode, OverlapMode} from '../style/style_layer/overlap_mode';
 import type {Tile} from '../source/tile';
 import {SymbolBucket, CollisionArrays, SingleCollisionBox} from '../data/bucket/symbol_bucket';
 
-import type {CollisionBoxArray, CollisionVertexArray, SymbolInstance} from '../data/array_types.g';
+import type {CollisionBoxArray, CollisionVertexArray, SymbolInstance, TextAnchorOffset} from '../data/array_types.g';
 import type {FeatureIndex} from '../data/feature_index';
 import type {OverscaledTileID} from '../source/tile_id';
-import type {TextAnchor} from './symbol_layout';
 import {Terrain} from '../render/terrain';
 import {warnOnce} from '../util/util';
+import {TextAnchor, TextAnchorEnum} from '../style/style_layer/variable_text_anchor';
 
 class OpacityState {
     opacity: number;
@@ -147,10 +147,9 @@ function calculateVariableLayoutShift(
     const {horizontalAlign, verticalAlign} = getAnchorAlignment(anchor);
     const shiftX = -(horizontalAlign - 0.5) * width;
     const shiftY = -(verticalAlign - 0.5) * height;
-    const offset = evaluateVariableOffset(anchor, textOffset);
     return new Point(
-        shiftX + offset[0] * textBoxScale,
-        shiftY + offset[1] * textBoxScale
+        shiftX + textOffset[0] * textBoxScale,
+        shiftY + textOffset[1] * textBoxScale
     );
 }
 
@@ -339,7 +338,7 @@ export class Placement {
     }
 
     attemptAnchorPlacement(
-        anchor: TextAnchor,
+        textAnchorOffset: TextAnchorOffset,
         textBox: SingleCollisionBox,
         width: number,
         height: number,
@@ -363,7 +362,8 @@ export class Placement {
             };
         } {
 
-        const textOffset = [symbolInstance.textOffset0, symbolInstance.textOffset1] as [number, number];
+        const anchor = TextAnchorEnum[textAnchorOffset.textAnchor] as TextAnchor;
+        const textOffset = [textAnchorOffset.textOffset0, textAnchorOffset.textOffset1] as [number, number];
         const shift = calculateVariableLayoutShift(anchor, width, height, textOffset, textBoxScale);
 
         const placedGlyphBoxes = this.collisionIndex.placeCollisionBox(
@@ -528,7 +528,11 @@ export class Placement {
                     }
                 };
 
-                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,
@@ -561,47 +565,54 @@ export 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 = TextAnchorEnum[this.prevPlacement?.variableOffsets[symbolInstance.crossTileID]?.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: Array<number>;
                             offscreen: boolean;
                         } = {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: 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;
@@ -952,11 +963,12 @@ export class Placement {
         if (bucket.hasIconCollisionBoxData()) 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';
@@ -1074,7 +1086,7 @@ export class Placement {
                     let shift = new 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