maplibre-gl 2.1.8 → 2.2.0-pre.2

package/src/style/style.ts

@@ -57,11 +57,13 @@ import type {
     FilterSpecification,
     StyleSpecification,
     LightSpecification,
-    SourceSpecification
+    SourceSpecification,
+    TerrainSpecification
 } from '../style-spec/types.g';
 import type {CustomLayerInterface} from './style_layer/custom_style_layer';
 import type {Validator} from './validate_style';
 import type {OverscaledTileID} from '../source/tile_id';
+import Terrain from '../render/terrain';
 
 const supportedDiffOperations = pick(diffOperations, [
     'addLayer',
@@ -102,6 +104,7 @@ export type StyleOptions = {
 export type StyleSetterOptions = {
     validate?: boolean;
 };
+
 /**
  * @private
  */
@@ -113,6 +116,7 @@ class Style extends Evented {
     glyphManager: GlyphManager;
     lineAtlas: LineAtlas;
     light: Light;
+    terrain: Terrain;
 
     _request: Cancelable;
     _spriteRequest: Cancelable;
@@ -123,6 +127,8 @@ class Style extends Evented {
     zoomHistory: ZoomHistory;
     _loaded: boolean;
     _rtlTextPluginCallback: (a: any) => any;
+    _terrainDataCallback: (e: any) => any;
+    _terrainfreezeElevationCallback: (e: any) => any;
     _changed: boolean;
     _updatedSources: {[_: string]: 'clear' | 'reload'};
     _updatedLayers: {[_: string]: true};
@@ -278,6 +284,8 @@ class Style extends Evented {
 
         this.light = new Light(this.stylesheet.light);
 
+        this.setTerrain(this.stylesheet.terrain);
+
         this.fire(new Event('data', {dataType: 'style'}));
         this.fire(new Event('style.load'));
     }
@@ -478,6 +486,52 @@ class Style extends Evented {
         this._changedImages = {};
     }
 
+    /**
+     * Loads a 3D terrain mesh, based on a "raster-dem" source.
+     * @param {TerrainSpecification} [options] Options object.
+     */
+    setTerrain(options?: TerrainSpecification) {
+        this._checkLoaded();
+
+        // clear event handlers
+        if (this._terrainDataCallback) this.off('data', this._terrainDataCallback);
+        if (this._terrainfreezeElevationCallback) this.map.off('freezeElevation', this._terrainfreezeElevationCallback);
+
+        // remove terrain
+        if (!options) {
+            this.terrain = null;
+            this.map.transform.updateElevation(this.terrain);
+
+        // add terrain
+        } else {
+            const sourceCache = this.sourceCaches[options.source];
+            if (!sourceCache) throw new Error(`cannot load terrain, because there exists no source with ID: ${options.source}`);
+            this.terrain = new Terrain(this, sourceCache, options);
+            this.map.transform.updateElevation(this.terrain);
+            this._terrainfreezeElevationCallback = (e: any) => {
+                if (e.freeze) {
+                    this.map.transform.freezeElevation = true;
+                } else {
+                    this.map.transform.freezeElevation = false;
+                    this.map.transform.recalculateZoom(this.terrain);
+                }
+            };
+            this._terrainDataCallback = e => {
+                if (!e.tile) return;
+                if (e.sourceId === options.source) {
+                    this.map.transform.updateElevation(this.terrain);
+                    this.terrain.rememberForRerender(e.sourceId, e.tile.tileID);
+                } else if (e.source.type === 'geojson') {
+                    this.terrain.rememberForRerender(e.sourceId, e.tile.tileID);
+                }
+            };
+            this.on('data', this._terrainDataCallback);
+            this.map.on('freezeElevation', this._terrainfreezeElevationCallback);
+        }
+
+        this.map.fire(new Event('terrain', {terrain: options}));
+    }
+
     /**
      * Update this style's state to match the given style JSON, performing only
      * the necessary mutations.
@@ -1259,7 +1313,7 @@ class Style extends Evented {
 
     _updateSources(transform: Transform) {
         for (const id in this.sourceCaches) {
-            this.sourceCaches[id].update(transform);
+            this.sourceCaches[id].update(transform, this.terrain);
         }
     }
 
@@ -1300,7 +1354,7 @@ class Style extends Evented {
         forceFullPlacement = forceFullPlacement || this._layerOrderChanged || fadeDuration === 0;
 
         if (forceFullPlacement || !this.pauseablePlacement || (this.pauseablePlacement.isDone() && !this.placement.stillRecent(browser.now(), transform.zoom))) {
-            this.pauseablePlacement = new PauseablePlacement(transform, this._order, forceFullPlacement, showCollisionBoxes, fadeDuration, crossSourceCollisions, this.placement);
+            this.pauseablePlacement = new PauseablePlacement(transform, this.terrain, this._order, forceFullPlacement, showCollisionBoxes, fadeDuration, crossSourceCollisions, this.placement);
             this._layerOrderChanged = false;
         }
 

package/src/style/validate_style.ts

@@ -15,6 +15,7 @@ type ValidateStyle = {
     source: Validator;
     layer: Validator;
     light: Validator;
+    terrain: Validator;
     filter: Validator;
     paintProperty: Validator;
     layoutProperty: Validator;
@@ -25,6 +26,7 @@ export const validateStyle = (validateStyleMin as ValidateStyle);
 
 export const validateSource = validateStyle.source;
 export const validateLight = validateStyle.light;
+export const validateTerrain = validateStyle.terrain;
 export const validateFilter = validateStyle.filter;
 export const validatePaintProperty = validateStyle.paintProperty;
 export const validateLayoutProperty = validateStyle.layoutProperty;

package/src/style-spec/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 16.0.0
+
+### Breaking changes
+
+* index.js has been renamed to index.cjs to fix the 'is treated as an ES module file' error in node 12+ [#1223](https://github.com/maplibre/maplibre-gl-js/pull/1223)
+
 ## 15.1.0
 
 ### ✨ Features and improvements

package/src/style-spec/error/validation_error.ts

@@ -5,7 +5,7 @@ export default class ValidationError {
     identifier: string;
     line: number;
 
-    constructor(key: string, value: {
+    constructor(key: string, value: any & {
         __line__: number;
     }, message: string, identifier?: string | null) {
         this.message = (key ? `${key}: ` : '') + message;

package/src/style-spec/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maplibre/maplibre-gl-style-spec",
   "description": "a specification for maplibre gl styles",
-  "version": "15.1.0",
+  "version": "16.0.0",
   "author": "MapLibre",
   "keywords": [
     "mapbox",
@@ -12,7 +12,7 @@
     "maplibre-gl-js"
   ],
   "license": "ISC",
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
   "type": "module",
   "scripts": {

package/src/style-spec/reference/v8.json

@@ -57,6 +57,15 @@
         "intensity": 0.4
       }
     },
+    "terrain": {
+      "type": "terrain",
+      "doc": "The terrain configuration.",
+      "example": {
+        "source": "raster-dem-source",
+        "exaggeration": 0.5,
+        "elevationOffset": 100
+      }
+    },
     "sources": {
       "required": true,
       "type": "sources",
@@ -3810,6 +3819,39 @@
       }
     }
   },
+  "terrain": {
+    "source": {
+      "type": "string",
+      "doc": "The source for the terrain data.",
+      "required": true,
+      "sdk-support": {
+        "basic functionality": {
+          "js": "2.2.0"
+        }
+      }
+    },
+    "exaggeration": {
+      "type": "number",
+      "minimum": 0,
+      "doc": "The exaggeration of the terrain - how high it will look.",
+      "default": 1.0,
+      "sdk-support": {
+        "basic functionality": {
+          "js": "2.2.0"
+        }
+      }
+    },
+    "elevationOffset": {
+      "type": "number",
+      "doc": "The elevation offset.",
+      "default": 450,
+      "sdk-support": {
+        "basic functionality": {
+          "js": "2.2.0"
+        }
+      }
+    }
+  },
   "paint": [
     "paint_fill",
     "paint_line",

package/src/style-spec/types.g.ts

@@ -85,6 +85,7 @@ export type StyleSpecification = {
     "bearing"?: number,
     "pitch"?: number,
     "light"?: LightSpecification,
+    "terrain"?: TerrainSpecification,
     "sources": {[_: string]: SourceSpecification},
     "sprite"?: string,
     "glyphs"?: string,
@@ -99,6 +100,12 @@ export type LightSpecification = {
     "intensity"?: PropertyValueSpecification<number>
 };
 
+export type TerrainSpecification = {
+    "source": string,
+    "exaggeration"?: number,
+    "elevationOffset"?: number
+};
+
 export type VectorSourceSpecification = {
     "type": "vector",
     "url"?: string,

package/src/style-spec/validate/validate.ts

@@ -17,6 +17,7 @@ import validateFilter from './validate_filter';
 import validateLayer from './validate_layer';
 import validateSource from './validate_source';
 import validateLight from './validate_light';
+import validateTerrain from './validate_terrain';
 import validateString from './validate_string';
 import validateFormatted from './validate_formatted';
 import validateImage from './validate_image';
@@ -37,6 +38,7 @@ const VALIDATORS = {
     'object': validateObject,
     'source': validateSource,
     'light': validateLight,
+    'terrain': validateTerrain,
     'string': validateString,
     'formatted': validateFormatted,
     'resolvedImage': validateImage

package/src/style-spec/validate/validate_terrain.test.ts

@@ -0,0 +1,46 @@
+import validateTerrain from './validate_terrain';
+import v8 from '../reference/v8.json';
+
+describe('Validate Terrain', () => {
+    test('Should return error in case terrain is not an object', () => {
+        const errors = validateTerrain({value: 1 as any, styleSpec: v8, style: {} as any});
+        expect(errors).toHaveLength(1);
+        expect(errors[0].message).toContain('number');
+        expect(errors[0].message).toContain('object');
+        expect(errors[0].message).toContain('terrain');
+    });
+
+    test('Should return error in case terrain source is not a string', () => {
+        const errors = validateTerrain({value: {source: 1 as any}, styleSpec: v8, style: {} as any});
+        expect(errors).toHaveLength(1);
+        expect(errors[0].message).toContain('number');
+        expect(errors[0].message).toContain('string');
+        expect(errors[0].message).toContain('source');
+    });
+
+    test('Should return error in case of unknown property', () => {
+        const errors = validateTerrain({value: {a: 1} as any, styleSpec: v8, style: {} as any});
+        expect(errors).toHaveLength(1);
+        expect(errors[0].message).toContain('a');
+        expect(errors[0].message).toContain('unknown');
+    });
+
+    test('Should return errors according to spec violations', () => {
+        const errors = validateTerrain({value: {source: 1 as any, exaggeration: {} as any, elevationOffset: 'ex2' as any}, styleSpec: v8, style: {} as any});
+        expect(errors).toHaveLength(3);
+        expect(errors[0].message).toContain('number');
+        expect(errors[0].message).toContain('string');
+        expect(errors[0].message).toContain('source');
+        expect(errors[1].message).toContain('number');
+        expect(errors[1].message).toContain('object');
+        expect(errors[1].message).toContain('exaggeration');
+        expect(errors[2].message).toContain('number');
+        expect(errors[2].message).toContain('string');
+        expect(errors[2].message).toContain('elevationOffset');
+    });
+
+    test('Should pass if everything is according to spec', () => {
+        const errors = validateTerrain({value: {source: 'source-id', elevationOffset: 1, exaggeration: 0.2}, styleSpec: v8, style: {} as any});
+        expect(errors).toHaveLength(0);
+    });
+});

package/src/style-spec/validate/validate_terrain.ts

@@ -0,0 +1,41 @@
+import ValidationError from '../error/validation_error';
+import getType from '../util/get_type';
+import validate from './validate';
+import type {StyleSpecification, TerrainSpecification} from '../types.g';
+import type v8 from '../reference/v8.json';
+
+export default function validateTerrain(
+    options: {value: TerrainSpecification; styleSpec: typeof v8; style: StyleSpecification}
+): ValidationError[] {
+
+    const terrain = options.value;
+    const styleSpec = options.styleSpec;
+    const terrainSpec = styleSpec.terrain;
+    const style = options.style;
+
+    let errors = [];
+
+    const rootType = getType(terrain);
+    if (terrain === undefined) {
+        return errors;
+    } else if (rootType !== 'object') {
+        errors = errors.concat([new ValidationError('terrain', terrain, `object expected, ${rootType} found`)]);
+        return errors;
+    }
+
+    for (const key in terrain) {
+        if (terrainSpec[key]) {
+            errors = errors.concat(validate({
+                key,
+                value: terrain[key],
+                valueSpec: terrainSpec[key],
+                style,
+                styleSpec
+            }));
+        } else {
+            errors = errors.concat([new ValidationError(key, terrain[key], `unknown property "${key}"`)]);
+        }
+    }
+
+    return errors;
+}

package/src/style-spec/validate_style.min.ts

@@ -6,6 +6,7 @@ import validateGlyphsURL from './validate/validate_glyphs_url';
 
 import validateSource from './validate/validate_source';
 import validateLight from './validate/validate_light';
+import validateTerrain from './validate/validate_terrain';
 import validateLayer from './validate/validate_layer';
 import validateFilter from './validate/validate_filter';
 import validatePaintProperty from './validate/validate_paint_property';
@@ -58,6 +59,7 @@ function validateStyleMin(style, styleSpec = latestStyleSpec) {
 
 validateStyleMin.source = wrapCleanErrors(validateSource);
 validateStyleMin.light = wrapCleanErrors(validateLight);
+validateStyleMin.terrain = wrapCleanErrors(validateTerrain);
 validateStyleMin.layer = wrapCleanErrors(validateLayer);
 validateStyleMin.filter = wrapCleanErrors(validateFilter);
 validateStyleMin.paintProperty = wrapCleanErrors(validatePaintProperty);

package/src/style-spec/validate_style.ts

@@ -33,6 +33,7 @@ export default function validateStyle(style, styleSpec = v8) {
 
 export const source = validateStyleMin.source;
 export const light = validateStyleMin.light;
+export const terrain = validateStyleMin.terrain;
 export const layer = validateStyleMin.layer;
 export const filter = validateStyleMin.filter;
 export const paintProperty = validateStyleMin.paintProperty;

package/src/symbol/collision_index.ts

@@ -55,6 +55,10 @@ class CollisionIndex {
     gridRightBoundary: number;
     gridBottomBoundary: number;
 
+    // With perspectiveRatio the fontsize is calculated for tilted maps (near = bigger, far = smaller).
+    // The cutoff defines a threshold to no longer render labels near the horizon.
+    perspectiveRatioCutoff: number;
+
     constructor(
         transform: Transform,
         grid = new GridIndex<FeatureKey>(transform.width + 2 * viewportPadding, transform.height + 2 * viewportPadding, 25),
@@ -70,6 +74,8 @@ class CollisionIndex {
         this.screenBottomBoundary = transform.height + viewportPadding;
         this.gridRightBoundary = transform.width + 2 * viewportPadding;
         this.gridBottomBoundary = transform.height + 2 * viewportPadding;
+
+        this.perspectiveRatioCutoff = 0.6;
     }
 
     placeCollisionBox(
@@ -77,12 +83,13 @@ class CollisionIndex {
         overlapMode: OverlapMode,
         textPixelRatio: number,
         posMatrix: mat4,
-        collisionGroupPredicate?: (key: FeatureKey) => boolean
+        collisionGroupPredicate?: (key: FeatureKey) => boolean,
+        getElevation?: (x: number, y: number) => number
     ): {
             box: Array<number>;
             offscreen: boolean;
         } {
-        const projectedPoint = this.projectAndGetPerspectiveRatio(posMatrix, collisionBox.anchorPointX, collisionBox.anchorPointY);
+        const projectedPoint = this.projectAndGetPerspectiveRatio(posMatrix, collisionBox.anchorPointX, collisionBox.anchorPointY, getElevation);
         const tileToViewport = textPixelRatio * projectedPoint.perspectiveRatio;
         const tlX = collisionBox.x1 * tileToViewport + projectedPoint.point.x;
         const tlY = collisionBox.y1 * tileToViewport + projectedPoint.point.y;
@@ -90,7 +97,8 @@ class CollisionIndex {
         const brY = collisionBox.y2 * tileToViewport + projectedPoint.point.y;
 
         if (!this.isInsideGrid(tlX, tlY, brX, brY) ||
-            (overlapMode !== 'always' && this.grid.hitTest(tlX, tlY, brX, brY, overlapMode, collisionGroupPredicate))) {
+            (overlapMode !== 'always' && this.grid.hitTest(tlX, tlY, brX, brY, overlapMode, collisionGroupPredicate)) ||
+            projectedPoint.perspectiveRatio < this.perspectiveRatioCutoff) {
             return {
                 box: [],
                 offscreen: false
@@ -116,7 +124,8 @@ class CollisionIndex {
         pitchWithMap: boolean,
         collisionGroupPredicate: (key: FeatureKey) => boolean,
         circlePixelDiameter: number,
-        textPixelPadding: number
+        textPixelPadding: number,
+        getElevation: (x: number, y: number) => number
     ): {
             circles: Array<number>;
             offscreen: boolean;
@@ -125,12 +134,12 @@ class CollisionIndex {
         const placedCollisionCircles = [];
 
         const tileUnitAnchorPoint = new Point(symbol.anchorX, symbol.anchorY);
-        const screenAnchorPoint = projection.project(tileUnitAnchorPoint, posMatrix);
+        const screenAnchorPoint = projection.project(tileUnitAnchorPoint, posMatrix, getElevation);
         const perspectiveRatio = projection.getPerspectiveRatio(this.transform.cameraToCenterDistance, screenAnchorPoint.signedDistanceFromCamera);
         const labelPlaneFontSize = pitchWithMap ? fontSize / perspectiveRatio : fontSize * perspectiveRatio;
         const labelPlaneFontScale = labelPlaneFontSize / ONE_EM;
 
-        const labelPlaneAnchorPoint = projection.project(tileUnitAnchorPoint, labelPlaneMatrix).point;
+        const labelPlaneAnchorPoint = projection.project(tileUnitAnchorPoint, labelPlaneMatrix, getElevation).point;
 
         const projectionCache = {};
         const lineOffsetX = symbol.lineOffsetX * labelPlaneFontScale;
@@ -148,7 +157,8 @@ class CollisionIndex {
             lineVertexArray,
             labelPlaneMatrix,
             projectionCache,
-            false);
+            false,
+            getElevation);
 
         let collisionDetected = false;
         let inGrid = false;
@@ -178,7 +188,7 @@ class CollisionIndex {
 
             // The path might need to be converted into screen space if a pitched map is used as the label space
             if (labelToScreenMatrix) {
-                const screenSpacePath = projectedPath.map(p => projection.project(p, labelToScreenMatrix));
+                const screenSpacePath = projectedPath.map(p => projection.project(p, labelToScreenMatrix, getElevation));
 
                 // Do not try to place collision circles if even of the points is behind the camera.
                 // This is a plausible scenario with big camera pitch angles
@@ -265,7 +275,7 @@ class CollisionIndex {
         }
 
         return {
-            circles: ((!showCollisionCircles && collisionDetected) || !inGrid) ? [] : placedCollisionCircles,
+            circles: ((!showCollisionCircles && collisionDetected) || !inGrid || perspectiveRatio < this.perspectiveRatioCutoff) ? [] : placedCollisionCircles,
             offscreen: entirelyOffscreen,
             collisionDetected
         };
@@ -354,9 +364,15 @@ class CollisionIndex {
         }
     }
 
-    projectAndGetPerspectiveRatio(posMatrix: mat4, x: number, y: number) {
-        const p = [x, y, 0, 1] as vec4;
-        projection.xyTransformMat4(p, p, posMatrix);
+    projectAndGetPerspectiveRatio(posMatrix: mat4, x: number, y: number, getElevation: (x: number, y: number) => number) {
+        let p;
+        if (getElevation) { // slow because of handle z-index
+            p = [x, y, getElevation(x, y), 1] as vec4;
+            vec4.transformMat4(p, p, posMatrix);
+        } else { // fast because of ignore z-index
+            p = [x, y, 0, 1] as vec4;
+            projection.xyTransformMat4(p, p, posMatrix);
+        }
         const a = new Point(
             (((p[0] / p[3] + 1) / 2) * this.transform.width) + viewportPadding,
             (((-p[1] / p[3] + 1) / 2) * this.transform.height) + viewportPadding

package/src/symbol/placement.ts

@@ -22,6 +22,7 @@ import type {CollisionBoxArray, CollisionVertexArray, SymbolInstance} from '../d
 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';
 
 class OpacityState {
     opacity: number;
@@ -210,6 +211,7 @@ export type CrossTileID = string | number;
 
 export class Placement {
     transform: Transform;
+    terrain: Terrain;
     collisionIndex: CollisionIndex;
     placements: {
         [_ in CrossTileID]: JointPlacement;
@@ -238,8 +240,9 @@ export class Placement {
         [k in any]: CollisionCircleArray;
     };
 
-    constructor(transform: Transform, fadeDuration: number, crossSourceCollisions: boolean, prevPlacement?: Placement) {
+    constructor(transform: Transform, terrain: Terrain, fadeDuration: number, crossSourceCollisions: boolean, prevPlacement?: Placement) {
         this.transform = transform.clone();
+        this.terrain = terrain;
         this.collisionIndex = new CollisionIndex(this.transform);
         this.placements = {};
         this.opacities = {};
@@ -350,7 +353,8 @@ export class Placement {
         symbolInstance: SymbolInstance,
         bucket: SymbolBucket,
         orientation: number,
-        iconBox?: SingleCollisionBox | null
+        iconBox?: SingleCollisionBox | null,
+        getElevation?: (x: number, y: number) => number
     ): {
             shift: Point;
             placedGlyphBoxes: {
@@ -366,14 +370,14 @@ export class Placement {
             shiftVariableCollisionBox(
                 textBox, shift.x, shift.y,
                 rotateWithMap, pitchWithMap, this.transform.angle),
-            textOverlapMode, textPixelRatio, posMatrix, collisionGroup.predicate);
+            textOverlapMode, textPixelRatio, posMatrix, collisionGroup.predicate, getElevation);
 
         if (iconBox) {
             const placedIconBoxes = this.collisionIndex.placeCollisionBox(
                 shiftVariableCollisionBox(
                     iconBox, shift.x, shift.y,
                     rotateWithMap, pitchWithMap, this.transform.angle),
-                textOverlapMode, textPixelRatio, posMatrix, collisionGroup.predicate);
+                textOverlapMode, textPixelRatio, posMatrix, collisionGroup.predicate, getElevation);
             if (placedIconBoxes.box.length === 0) return;
         }
 
@@ -489,6 +493,14 @@ export class Placement {
                 verticalTextFeatureIndex = collisionArrays.verticalTextFeatureIndex;
             }
 
+            // update elevation of collisionArrays
+            const tileID = this.retainedQueryData[bucket.bucketInstanceId].tileID;
+            const getElevation = this.terrain ? (x: number, y: number) => this.terrain.getElevation(tileID, x, y) : null;
+            for (const boxType of ['textBox', 'verticalTextBox', 'iconBox', 'verticalIconBox']) {
+                const box = collisionArrays[boxType];
+                if (box) box.elevation = getElevation ? getElevation(box.anchorPointX, box.anchorPointY) : 0;
+            }
+
             const textBox = collisionArrays.textBox;
             if (textBox) {
 
@@ -528,7 +540,9 @@ export class Placement {
                             textOverlapMode,
                             textPixelRatio,
                             posMatrix,
-                            collisionGroup.predicate);
+                            collisionGroup.predicate,
+                            getElevation
+                        );
                         if (placedFeature && placedFeature.box && placedFeature.box.length) {
                             this.markUsedOrientation(bucket, orientation, symbolInstance);
                             this.placedOrientations[symbolInstance.crossTileID] = orientation;
@@ -583,7 +597,7 @@ export class Placement {
                             const result = this.attemptAnchorPlacement(
                                 anchor, collisionTextBox, width, height,
                                 textBoxScale, rotateWithMap, pitchWithMap, textPixelRatio, posMatrix,
-                                collisionGroup, overlapMode, symbolInstance, bucket, orientation, variableIconBox);
+                                collisionGroup, overlapMode, symbolInstance, bucket, orientation, variableIconBox, getElevation);
 
                             if (result) {
                                 placedBox = result.placedGlyphBoxes;
@@ -658,7 +672,9 @@ export class Placement {
                     pitchWithMap,
                     collisionGroup.predicate,
                     circlePixelDiameter,
-                    textPixelPadding);
+                    textPixelPadding,
+                    getElevation
+                );
 
                 assert(!placedGlyphCircles.circles.length || (!placedGlyphCircles.collisionDetected || showCollisionBoxes));
                 // If text-overlap is set to 'always', force "placedCircles" to true
@@ -674,7 +690,6 @@ export class Placement {
             }
 
             if (collisionArrays.iconBox) {
-
                 const placeIconFeature = iconBox => {
                     const shiftedIconBox = hasIconTextFit && shift ?
                         shiftVariableCollisionBox(
@@ -682,7 +697,7 @@ export class Placement {
                             rotateWithMap, pitchWithMap, this.transform.angle) :
                         iconBox;
                     return this.collisionIndex.placeCollisionBox(shiftedIconBox,
-                        iconOverlapMode, textPixelRatio, posMatrix, collisionGroup.predicate);
+                        iconOverlapMode, textPixelRatio, posMatrix, collisionGroup.predicate, getElevation);
                 };
 
                 if (placedVerticalText && placedVerticalText.box && placedVerticalText.box.length && collisionArrays.verticalIconBox) {