maplibre-gl 2.1.8 → 2.2.0-pre.2

package/src/symbol/projection.ts

@@ -101,9 +101,15 @@ function getGlCoordMatrix(posMatrix: mat4,
     }
 }
 
-function project(point: Point, matrix: mat4) {
-    const pos = [point.x, point.y, 0, 1] as vec4;
-    xyTransformMat4(pos, pos, matrix);
+function project(point: Point, matrix: mat4, getElevation: (x: number, y: number) => number) {
+    let pos;
+    if (getElevation) { // slow because of handle z-index
+        pos = [point.x, point.y, getElevation(point.x, point.y), 1] as vec4;
+        vec4.transformMat4(pos, pos, matrix);
+    } else { // fast because of ignore z-index
+        pos = [point.x, point.y, 0, 1] as vec4;
+        xyTransformMat4(pos, pos, matrix);
+    }
     const w = pos[3];
     return {
         point: new Point(pos[0] / w, pos[1] / w),
@@ -139,7 +145,8 @@ function updateLineLabels(bucket: SymbolBucket,
     glCoordMatrix: mat4,
     pitchWithMap: boolean,
     keepUpright: boolean,
-    rotateToLine: boolean) {
+    rotateToLine: boolean,
+    getElevation: (x: number, y: number) => number) {
 
     const sizeData = isText ? bucket.textSizeData : bucket.iconSizeData;
     const partiallyEvaluatedSize = symbolSize.evaluateSizeForZoom(sizeData, painter.transform.zoom);
@@ -171,8 +178,14 @@ function updateLineLabels(bucket: SymbolBucket,
         // Awkward... but we're counting on the paired "vertical" symbol coming immediately after its horizontal counterpart
         useVertical = false;
 
-        const anchorPos = [symbol.anchorX, symbol.anchorY, 0, 1] as vec4;
-        vec4.transformMat4(anchorPos, anchorPos, posMatrix);
+        let anchorPos;
+        if (getElevation) {  // slow because of handle z-index
+            anchorPos = [symbol.anchorX, symbol.anchorY, getElevation(symbol.anchorX, symbol.anchorY), 1] as vec4;
+            vec4.transformMat4(anchorPos, anchorPos, posMatrix);
+        } else {  // fast because of ignore z-index
+            anchorPos = [symbol.anchorX, symbol.anchorY, 0, 1] as vec4;
+            xyTransformMat4(anchorPos, anchorPos, posMatrix);
+        }
 
         // Don't bother calculating the correct point for invisible labels.
         if (!isVisible(anchorPos, clippingBuffer)) {
@@ -187,18 +200,18 @@ function updateLineLabels(bucket: SymbolBucket,
         const pitchScaledFontSize = pitchWithMap ? fontSize / perspectiveRatio : fontSize * perspectiveRatio;
 
         const tileAnchorPoint = new Point(symbol.anchorX, symbol.anchorY);
-        const anchorPoint = project(tileAnchorPoint, labelPlaneMatrix).point;
+        const anchorPoint = project(tileAnchorPoint, labelPlaneMatrix, getElevation).point;
         const projectionCache = {};
 
         const placeUnflipped: any = placeGlyphsAlongLine(symbol, pitchScaledFontSize, false /*unflipped*/, keepUpright, posMatrix, labelPlaneMatrix, glCoordMatrix,
-            bucket.glyphOffsetArray, lineVertexArray, dynamicLayoutVertexArray, anchorPoint, tileAnchorPoint, projectionCache, aspectRatio, rotateToLine);
+            bucket.glyphOffsetArray, lineVertexArray, dynamicLayoutVertexArray, anchorPoint, tileAnchorPoint, projectionCache, aspectRatio, rotateToLine, getElevation);
 
         useVertical = placeUnflipped.useVertical;
 
         if (placeUnflipped.notEnoughRoom || useVertical ||
             (placeUnflipped.needsFlipping &&
              (placeGlyphsAlongLine(symbol, pitchScaledFontSize, true /*flipped*/, keepUpright, posMatrix, labelPlaneMatrix, glCoordMatrix,
-                 bucket.glyphOffsetArray, lineVertexArray, dynamicLayoutVertexArray, anchorPoint, tileAnchorPoint, projectionCache, aspectRatio, rotateToLine) as any).notEnoughRoom)) {
+                 bucket.glyphOffsetArray, lineVertexArray, dynamicLayoutVertexArray, anchorPoint, tileAnchorPoint, projectionCache, aspectRatio, rotateToLine, getElevation) as any).notEnoughRoom)) {
             hideGlyphs(symbol.numGlyphs, dynamicLayoutVertexArray);
         }
     }
@@ -210,7 +223,7 @@ function updateLineLabels(bucket: SymbolBucket,
     }
 }
 
-function placeFirstAndLastGlyph(fontScale: number, glyphOffsetArray: GlyphOffsetArray, lineOffsetX: number, lineOffsetY: number, flip: boolean, anchorPoint: Point, tileAnchorPoint: Point, symbol: any, lineVertexArray: SymbolLineVertexArray, labelPlaneMatrix: mat4, projectionCache: any, rotateToLine: boolean) {
+function placeFirstAndLastGlyph(fontScale: number, glyphOffsetArray: GlyphOffsetArray, lineOffsetX: number, lineOffsetY: number, flip: boolean, anchorPoint: Point, tileAnchorPoint: Point, symbol: any, lineVertexArray: SymbolLineVertexArray, labelPlaneMatrix: mat4, projectionCache: any, rotateToLine: boolean, getElevation: (x: number, y: number) => number) {
     const glyphEndIndex = symbol.glyphStartIndex + symbol.numGlyphs;
     const lineStartIndex = symbol.lineStartIndex;
     const lineEndIndex = symbol.lineStartIndex + symbol.lineLength;
@@ -219,12 +232,12 @@ function placeFirstAndLastGlyph(fontScale: number, glyphOffsetArray: GlyphOffset
     const lastGlyphOffset = glyphOffsetArray.getoffsetX(glyphEndIndex - 1);
 
     const firstPlacedGlyph = placeGlyphAlongLine(fontScale * firstGlyphOffset, lineOffsetX, lineOffsetY, flip, anchorPoint, tileAnchorPoint, symbol.segment,
-        lineStartIndex, lineEndIndex, lineVertexArray, labelPlaneMatrix, projectionCache, rotateToLine);
+        lineStartIndex, lineEndIndex, lineVertexArray, labelPlaneMatrix, projectionCache, rotateToLine, getElevation);
     if (!firstPlacedGlyph)
         return null;
 
     const lastPlacedGlyph = placeGlyphAlongLine(fontScale * lastGlyphOffset, lineOffsetX, lineOffsetY, flip, anchorPoint, tileAnchorPoint, symbol.segment,
-        lineStartIndex, lineEndIndex, lineVertexArray, labelPlaneMatrix, projectionCache, rotateToLine);
+        lineStartIndex, lineEndIndex, lineVertexArray, labelPlaneMatrix, projectionCache, rotateToLine, getElevation);
     if (!lastPlacedGlyph)
         return null;
 
@@ -252,7 +265,7 @@ function requiresOrientationChange(writingMode, firstPoint, lastPoint, aspectRat
     return null;
 }
 
-function placeGlyphsAlongLine(symbol, fontSize, flip, keepUpright, posMatrix, labelPlaneMatrix, glCoordMatrix, glyphOffsetArray, lineVertexArray, dynamicLayoutVertexArray, anchorPoint, tileAnchorPoint, projectionCache, aspectRatio, rotateToLine) {
+function placeGlyphsAlongLine(symbol, fontSize, flip, keepUpright, posMatrix, labelPlaneMatrix, glCoordMatrix, glyphOffsetArray, lineVertexArray, dynamicLayoutVertexArray, anchorPoint, tileAnchorPoint, projectionCache, aspectRatio, rotateToLine, getElevation) {
     const fontScale = fontSize / 24;
     const lineOffsetX = symbol.lineOffsetX * fontScale;
     const lineOffsetY = symbol.lineOffsetY * fontScale;
@@ -265,12 +278,12 @@ function placeGlyphsAlongLine(symbol, fontSize, flip, keepUpright, posMatrix, la
 
         // Place the first and the last glyph in the label first, so we can figure out
         // the overall orientation of the label and determine whether it needs to be flipped in keepUpright mode
-        const firstAndLastGlyph = placeFirstAndLastGlyph(fontScale, glyphOffsetArray, lineOffsetX, lineOffsetY, flip, anchorPoint, tileAnchorPoint, symbol, lineVertexArray, labelPlaneMatrix, projectionCache, rotateToLine);
+        const firstAndLastGlyph = placeFirstAndLastGlyph(fontScale, glyphOffsetArray, lineOffsetX, lineOffsetY, flip, anchorPoint, tileAnchorPoint, symbol, lineVertexArray, labelPlaneMatrix, projectionCache, rotateToLine, getElevation);
         if (!firstAndLastGlyph) {
             return {notEnoughRoom: true};
         }
-        const firstPoint = project(firstAndLastGlyph.first.point, glCoordMatrix).point;
-        const lastPoint = project(firstAndLastGlyph.last.point, glCoordMatrix).point;
+        const firstPoint = project(firstAndLastGlyph.first.point, glCoordMatrix, getElevation).point;
+        const lastPoint = project(firstAndLastGlyph.last.point, glCoordMatrix, getElevation).point;
 
         if (keepUpright && !flip) {
             const orientationChange = requiresOrientationChange(symbol.writingMode, firstPoint, lastPoint, aspectRatio);
@@ -284,24 +297,24 @@ function placeGlyphsAlongLine(symbol, fontSize, flip, keepUpright, posMatrix, la
             // Since first and last glyph fit on the line, we're sure that the rest of the glyphs can be placed
             // $FlowFixMe
             placedGlyphs.push(placeGlyphAlongLine(fontScale * glyphOffsetArray.getoffsetX(glyphIndex), lineOffsetX, lineOffsetY, flip, anchorPoint, tileAnchorPoint, symbol.segment,
-                lineStartIndex, lineEndIndex, lineVertexArray, labelPlaneMatrix, projectionCache, rotateToLine));
+                lineStartIndex, lineEndIndex, lineVertexArray, labelPlaneMatrix, projectionCache, rotateToLine, getElevation));
         }
         placedGlyphs.push(firstAndLastGlyph.last);
     } else {
         // Only a single glyph to place
         // So, determine whether to flip based on projected angle of the line segment it's on
         if (keepUpright && !flip) {
-            const a = project(tileAnchorPoint, posMatrix).point;
+            const a = project(tileAnchorPoint, posMatrix, getElevation).point;
             const tileVertexIndex = (symbol.lineStartIndex + symbol.segment + 1);
             // $FlowFixMe
             const tileSegmentEnd = new Point(lineVertexArray.getx(tileVertexIndex), lineVertexArray.gety(tileVertexIndex));
-            const projectedVertex = project(tileSegmentEnd, posMatrix);
+            const projectedVertex = project(tileSegmentEnd, posMatrix, getElevation);
             // We know the anchor will be in the viewport, but the end of the line segment may be
             // behind the plane of the camera, in which case we can use a point at any arbitrary (closer)
             // point on the segment.
             const b = (projectedVertex.signedDistanceFromCamera > 0) ?
                 projectedVertex.point :
-                projectTruncatedLineSegment(tileAnchorPoint, tileSegmentEnd, a, 1, posMatrix);
+                projectTruncatedLineSegment(tileAnchorPoint, tileSegmentEnd, a, 1, posMatrix, getElevation);
 
             const orientationChange = requiresOrientationChange(symbol.writingMode, a, b, aspectRatio);
             if (orientationChange) {
@@ -310,7 +323,7 @@ function placeGlyphsAlongLine(symbol, fontSize, flip, keepUpright, posMatrix, la
         }
         // $FlowFixMe
         const singleGlyph = placeGlyphAlongLine(fontScale * glyphOffsetArray.getoffsetX(symbol.glyphStartIndex), lineOffsetX, lineOffsetY, flip, anchorPoint, tileAnchorPoint, symbol.segment,
-            symbol.lineStartIndex, symbol.lineStartIndex + symbol.lineLength, lineVertexArray, labelPlaneMatrix, projectionCache, rotateToLine);
+            symbol.lineStartIndex, symbol.lineStartIndex + symbol.lineLength, lineVertexArray, labelPlaneMatrix, projectionCache, rotateToLine, getElevation);
         if (!singleGlyph)
             return {notEnoughRoom: true};
 
@@ -323,18 +336,19 @@ function placeGlyphsAlongLine(symbol, fontSize, flip, keepUpright, posMatrix, la
     return {};
 }
 
-function projectTruncatedLineSegment(previousTilePoint: Point, currentTilePoint: Point, previousProjectedPoint: Point, minimumLength: number, projectionMatrix: mat4) {
+function projectTruncatedLineSegment(previousTilePoint: Point, currentTilePoint: Point, previousProjectedPoint: Point, minimumLength: number, projectionMatrix: mat4, getElevation: (x: number, y: number) => number) {
     // We are assuming "previousTilePoint" won't project to a point within one unit of the camera plane
     // If it did, that would mean our label extended all the way out from within the viewport to a (very distant)
     // point near the plane of the camera. We wouldn't be able to render the label anyway once it crossed the
     // plane of the camera.
-    const projectedUnitVertex = project(previousTilePoint.add(previousTilePoint.sub(currentTilePoint)._unit()), projectionMatrix).point;
+    const projectedUnitVertex = project(previousTilePoint.add(previousTilePoint.sub(currentTilePoint)._unit()), projectionMatrix, getElevation).point;
     const projectedUnitSegment = previousProjectedPoint.sub(projectedUnitVertex);
 
     return previousProjectedPoint.add(projectedUnitSegment._mult(minimumLength / projectedUnitSegment.mag()));
 }
 
-function placeGlyphAlongLine(offsetX: number,
+function placeGlyphAlongLine(
+    offsetX: number,
     lineOffsetX: number,
     lineOffsetY: number,
     flip: boolean,
@@ -348,7 +362,8 @@ function placeGlyphAlongLine(offsetX: number,
     projectionCache: {
         [_: number]: Point;
     },
-    rotateToLine: boolean) {
+    rotateToLine: boolean,
+    getElevation: (x: number, y: number) => number) {
 
     const combinedOffsetX = flip ?
         offsetX - lineOffsetX :
@@ -390,7 +405,7 @@ function placeGlyphAlongLine(offsetX: number,
         current = projectionCache[currentIndex];
         if (current === undefined) {
             const currentVertex = new Point(lineVertexArray.getx(currentIndex), lineVertexArray.gety(currentIndex));
-            const projection = project(currentVertex, labelPlaneMatrix);
+            const projection = project(currentVertex, labelPlaneMatrix, getElevation);
             if (projection.signedDistanceFromCamera > 0) {
                 current = projectionCache[currentIndex] = projection.point;
             } else {
@@ -401,7 +416,7 @@ function placeGlyphAlongLine(offsetX: number,
                     tileAnchorPoint :
                     new Point(lineVertexArray.getx(previousLineVertexIndex), lineVertexArray.gety(previousLineVertexIndex));
                 // Don't cache because the new vertex might not be far enough out for future glyphs on the same segment
-                current = projectTruncatedLineSegment(previousTilePoint, currentVertex, prev, absOffsetX - distanceToPrev + 1, labelPlaneMatrix);
+                current = projectTruncatedLineSegment(previousTilePoint, currentVertex, prev, absOffsetX - distanceToPrev + 1, labelPlaneMatrix, getElevation);
             }
         }
 

package/src/ui/camera.ts

@@ -898,6 +898,7 @@ abstract class Camera extends Evented {
 
     _prepareEase(eventData: any, noMoveStart: boolean, currently: any = {}) {
         this._moving = true;
+        this.fire(new Event('freezeElevation', {freeze: true}));
 
         if (!noMoveStart && !currently.moving) {
             this.fire(new Event('movestart', eventData));
@@ -933,6 +934,7 @@ abstract class Camera extends Evented {
             return;
         }
         delete this._easeId;
+        this.fire(new Event('freezeElevation', {freeze: false}));
 
         const wasZooming = this._zooming;
         const wasRotating = this._rotating;

package/src/ui/control/terrain_control.ts

@@ -0,0 +1,77 @@
+import DOM from '../../util/dom';
+import {bindAll} from '../../util/util';
+
+import type Map from '../map';
+import type {IControl} from './control';
+import type {TerrainSpecification} from '../../style-spec/types.g';
+
+/**
+ * An `TerrainControl` control adds a button to turn terrain on and off.
+ *
+ * @implements {IControl}
+ * @param {Object} [options]
+ * @param {string} [options.id] The ID of the raster-dem source to use.
+ * @param {exaggeration: number; elevationOffset: number} [options.options] Allowed options are exaggeration: number; elevationOffset: number
+ * @example
+ * var map = new maplibregl.Map({TerrainControl: false})
+ *     .addControl(new maplibregl.TerrainControl({
+ *         source: "terrain"
+ *     }));
+ */
+class TerrainControl implements IControl {
+    options: TerrainSpecification;
+    _map: Map;
+    _container: HTMLElement;
+    _terrainButton: HTMLButtonElement;
+
+    constructor(options: TerrainSpecification) {
+        this.options = options;
+
+        bindAll([
+            '_toggleTerrain',
+            '_updateTerrainIcon',
+        ], this);
+    }
+
+    onAdd(map: Map) {
+        this._map = map;
+        this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-group mapboxgl-ctrl mapboxgl-ctrl-group');
+        this._terrainButton = DOM.create('button', 'maplibregl-ctrl-terrain mapboxgl-ctrl-terrain', this._container);
+        DOM.create('span', 'maplibregl-ctrl-icon mapboxgl-ctrl-icon', this._terrainButton).setAttribute('aria-hidden', 'true');
+        this._terrainButton.type = 'button';
+        this._terrainButton.addEventListener('click', this._toggleTerrain);
+
+        this._updateTerrainIcon();
+        this._map.on('terrain', this._updateTerrainIcon);
+        return this._container;
+    }
+
+    onRemove() {
+        DOM.remove(this._container);
+        this._map.off('terrain', this._updateTerrainIcon);
+        this._map = undefined;
+    }
+
+    _toggleTerrain() {
+        if (this._map.getTerrain()) {
+            this._map.setTerrain(null);
+        } else {
+            this._map.setTerrain(this.options);
+        }
+        this._updateTerrainIcon();
+    }
+
+    _updateTerrainIcon() {
+        this._terrainButton.classList.remove('maplibregl-ctrl-terrain', 'mapboxgl-ctrl-terrain');
+        this._terrainButton.classList.remove('maplibregl-ctrl-terrain-enabled', 'mapboxgl-ctrl-terrain-enabled');
+        if (this._map.style.terrain) {
+            this._terrainButton.classList.add('maplibregl-ctrl-terrain-enabled', 'mapboxgl-ctrl-terrain-enabled');
+            this._terrainButton.title = this._map._getUIString('TerrainControl.disableTerrain');
+        } else {
+            this._terrainButton.classList.add('maplibregl-ctrl-terrain', 'mapboxgl-ctrl-terrain');
+            this._terrainButton.title = this._map._getUIString('TerrainControl.enableTerrain');
+        }
+    }
+}
+
+export default TerrainControl;

package/src/ui/default_locale.ts

@@ -13,8 +13,9 @@ const defaultLocale = {
     'ScaleControl.Meters': 'm',
     'ScaleControl.Kilometers': 'km',
     'ScaleControl.Miles': 'mi',
-    'ScaleControl.NauticalMiles': 'nm'
-
+    'ScaleControl.NauticalMiles': 'nm',
+    'TerrainControl.enableTerrain': 'Enable terrain',
+    'TerrainControl.disableTerrain': 'Disable terrain'
 };
 
 export default defaultLocale;

package/src/ui/events.ts

@@ -311,6 +311,10 @@ export type MapDataEvent = {
     sourceDataType: MapSourceDataType;
 };
 
+export type MapTerrainEvent = {
+    type: 'terrain';
+};
+
 export type MapContextEvent = {
     type: 'webglcontextlost' | 'webglcontextrestored';
     originalEvent: WebGLContextEvent;
@@ -386,6 +390,8 @@ export type MapEventType = {
     pitchend: MapLibreEvent<MouseEvent | TouchEvent | undefined>;
 
     wheel: MapWheelEvent;
+
+    terrain: MapTerrainEvent;
 };
 
 export type MapEvent =
@@ -1394,8 +1400,17 @@ export type MapEvent =
      */
     | 'style.load'
 
+    /**
+     * @event terrain
+     * @memberof Map
+     * @instance
+     * @private
+     */
+    | 'terrain'
+
     /**
      * Fired when a request for one of the map's sources' tiles is aborted.
+     * Fired when a request for one of the map's sources' data is aborted.
      * See {@link MapDataEvent} for more information.
      *
      * @event dataabort
@@ -1406,7 +1421,7 @@ export type MapEvent =
      * // Initialize the map
      * var map = new maplibregl.Map({ // map options });
      * // Set an event listener that fires
-     * // when a request for one of the map's sources' tiles is aborted.
+     * // when a request for one of the map's sources' data is aborted.
      * map.on('dataabort', function() {
      *   console.log('A dataabort event occurred.');
      * });
@@ -1414,7 +1429,7 @@ export type MapEvent =
     | 'dataabort'
 
     /**
-     * Fired when a request for one of the map's sources' tiles is aborted.
+     * Fired when a request for one of the map's sources' data is aborted.
      * See {@link MapDataEvent} for more information.
      *
      * @event sourcedataabort
@@ -1425,7 +1440,7 @@ export type MapEvent =
      * // Initialize the map
      * var map = new maplibregl.Map({ // map options });
      * // Set an event listener that fires
-     * // when a request for one of the map's sources' tiles is aborted.
+     * // when a request for one of the map's sources' data is aborted.
      * map.on('sourcedataabort', function() {
      *   console.log('A sourcedataabort event occurred.');
      * });

package/src/ui/handler_manager.ts

@@ -18,6 +18,7 @@ import DragRotateHandler from './handler/shim/drag_rotate';
 import TouchZoomRotateHandler from './handler/shim/touch_zoom_rotate';
 import {bindAll, extend} from '../util/util';
 import Point from '@mapbox/point-geometry';
+import LngLat from '../geo/lng_lat';
 import assert from 'assert';
 
 export type InputEvent = MouseEvent | TouchEvent | KeyboardEvent | WheelEvent;
@@ -100,6 +101,7 @@ class HandlerManager {
     _handlersById: {[x: string]: Handler};
     _updatingCamera: boolean;
     _changes: Array<[HandlerResult, any, any]>;
+    _drag: {center: Point; lngLat: LngLat; point: Point; handlerName: string};
     _previousActiveHandlers: {[x: string]: Handler};
     _listeners: Array<[Window | Document | HTMLElement, string, {
         passive?: boolean;
@@ -411,11 +413,11 @@ class HandlerManager {
     }
 
     _updateMapTransform(combinedResult: any, combinedEventsInProgress: any, deactivatedHandlers: any) {
-
         const map = this._map;
         const tr = map.transform;
+        const terrain = map.style && map.style.terrain;
 
-        if (!hasChange(combinedResult)) {
+        if (!hasChange(combinedResult) && !(terrain && this._drag)) {
             return this._fireEvents(combinedEventsInProgress, deactivatedHandlers, true);
         }
 
@@ -433,7 +435,35 @@ class HandlerManager {
         if (bearingDelta) tr.bearing += bearingDelta;
         if (pitchDelta) tr.pitch += pitchDelta;
         if (zoomDelta) tr.zoom += zoomDelta;
-        tr.setLocationAtPoint(loc, around);
+
+        if (!terrain) {
+            tr.setLocationAtPoint(loc, around);
+        } else {
+            // when 3d-terrain is enabled act a litte different:
+            //    - draging do not drag the picked point itself, instead it drags the map by pixel-delta.
+            //      With this approach it is no longer possible to pick a point from somewhere near
+            //      the horizon to the center in one move.
+            //      So this logic avoids the problem, that in such cases you easily loose orientation.
+            //    - scrollzoom does not zoom into the mouse-point, instead it zooms into map-center
+            //      this should be fixed in future-version
+            // when dragging starts, remember mousedown-location and panDelta from this point
+            if (combinedEventsInProgress.drag && !this._drag) {
+                this._drag = {
+                    center: tr.centerPoint,
+                    lngLat: tr.pointLocation(around),
+                    point: around,
+                    handlerName: combinedEventsInProgress.drag.handlerName
+                };
+                map.fire(new Event('freezeElevation', {freeze: true}));
+            // when dragging ends, recalcuate the zoomlevel for the new center coordinate
+            } else if (this._drag && deactivatedHandlers[this._drag.handlerName]) {
+                map.fire(new Event('freezeElevation', {freeze: false}));
+                this._drag = null;
+            // drag map
+            } else if (combinedEventsInProgress.drag && this._drag) {
+                tr.center = tr.pointLocation(tr.centerPoint.sub(panDelta));
+            }
+        }
 
         this._map._update();
         if (!combinedResult.noInertia) this._inertia.record(combinedResult);

package/src/ui/map.ts

@@ -51,7 +51,8 @@ import type {
     FilterSpecification,
     StyleSpecification,
     LightSpecification,
-    SourceSpecification
+    SourceSpecification,
+    TerrainSpecification
 } from '../style-spec/types.g';
 import {Callback} from '../types/callback';
 import type {ControlPosition, IControl} from './control/control';
@@ -432,6 +433,10 @@ class Map extends Camera {
         this.on('move', () => this._update(false));
         this.on('moveend', () => this._update(false));
         this.on('zoom', () => this._update(true));
+        this.on('terrain', () => {
+            this.painter.terrainFacilitator.dirty = true;
+            this._update(true);
+        });
 
         if (typeof window !== 'undefined') {
             addEventListener('online', this._onWindowOnline, false);
@@ -873,7 +878,7 @@ class Map extends Camera {
      * var point = map.project(coordinate);
      */
     project(lnglat: LngLatLike) {
-        return this.transform.locationPoint(LngLat.convert(lnglat));
+        return this.transform.locationPoint(LngLat.convert(lnglat), this.style && this.style.terrain);
     }
 
     /**
@@ -889,7 +894,7 @@ class Map extends Camera {
      * });
      */
     unproject(point: PointLike) {
-        return this.transform.pointLocation(Point.convert(point));
+        return this.transform.pointLocation(Point.convert(point), this.style && this.style.terrain);
     }
 
     /**
@@ -1571,6 +1576,28 @@ class Map extends Camera {
         return source.loaded();
     }
 
+    /**
+     * Loads a 3D terrain mesh, based on a "raster-dem" source.
+     * @param {TerrainSpecification} [options] Options object.
+     * @returns {Map} `this`
+     * @example
+     * map.setTerrain({ source: 'terrain' });
+     */
+    setTerrain(options: TerrainSpecification): Map {
+        this.style.setTerrain(options);
+        return this;
+    }
+
+    /**
+     * Get the terrain-options if terrain is loaded
+     * @returns {TerrainSpecification} the TerrainSpecification passed to setTerrain
+     * @example
+     * map.getTerrain(); // { source: 'terrain' };
+     */
+    getTerrain(): TerrainSpecification {
+        return this.style.terrain && this.style.terrain.options;
+    }
+
     /**
      * Returns a Boolean indicating whether all tiles in the viewport from all sources on
      * the style are loaded.
@@ -1579,8 +1606,7 @@ class Map extends Camera {
      * @example
      * var tilesLoaded = map.areTilesLoaded();
      */
-
-    areTilesLoaded() {
+    areTilesLoaded(): boolean {
         const sources = this.style && this.style.sourceCaches;
         for (const id in sources) {
             const source = sources[id];
@@ -1614,7 +1640,7 @@ class Map extends Camera {
      * @example
      * map.removeSource('bathymetry-data');
      */
-    removeSource(id: string) {
+    removeSource(id: string): Map {
         this.style.removeSource(id);
         return this._update(true);
     }
@@ -2550,6 +2576,10 @@ class Map extends Camera {
             this.style._updateSources(this.transform);
         }
 
+        // update terrain stuff
+        if (this.style.terrain) this.style.terrain.sourceCache.update(this.transform, this.style.terrain);
+        this.transform.updateElevation(this.style.terrain);
+
         this._placementDirty = this.style && this.style._updatePlacement(this.painter.transform, this.showCollisionBoxes, this._fadeDuration, this._crossSourceCollisions);
 
         // Actually draw

package/src/ui/marker.test.ts

@@ -4,6 +4,7 @@ import Popup from './popup';
 import LngLat from '../geo/lng_lat';
 import Point from '@mapbox/point-geometry';
 import simulate from '../../test/unit/lib/simulate_interaction';
+import type Terrain from '../render/terrain';
 
 function createMap(options = {}) {
     const container = window.document.createElement('div');
@@ -771,4 +772,24 @@ describe('marker', () => {
 
         map.remove();
     });
+
+    test('Marker removed after update when terrain is on should clear timeout', () => {
+        jest.spyOn(global, 'setTimeout');
+        jest.spyOn(global, 'clearTimeout');
+        const map = createMap();
+        const marker = new Marker()
+            .setLngLat([0, 0])
+            .addTo(map);
+        map.style.terrain = {
+            getElevation: () => 0
+        } as any as Terrain;
+
+        marker.setOffset([10, 10]);
+
+        expect(setTimeout).toHaveBeenCalled();
+        marker.remove();
+        expect(clearTimeout).toHaveBeenCalled();
+
+        map.remove();
+    });
 });

package/src/ui/marker.ts

@@ -74,6 +74,7 @@ export default class Marker extends Evented {
     _pitchAlignment: string;
     _rotationAlignment: string;
     _originalTabIndex: string; // original tabindex of _element
+    _opacityTimeout: ReturnType<typeof setTimeout>;
 
     constructor(options?: MarkerOptions, legacyOptions?: MarkerOptions) {
         super();
@@ -264,6 +265,10 @@ export default class Marker extends Evented {
      * @returns {Marker} `this`
      */
     remove() {
+        if (this._opacityTimeout) {
+            clearTimeout(this._opacityTimeout);
+            delete this._opacityTimeout;
+        }
         if (this._map) {
             this._map.off('click', this._onMapClick);
             this._map.off('move', this._update);
@@ -469,6 +474,15 @@ export default class Marker extends Evented {
         }
 
         DOM.setTransform(this._element, `${anchorTranslate[this._anchor]} translate(${this._pos.x}px, ${this._pos.y}px) ${pitch} ${rotation}`);
+
+        // in case of 3D, ask the terrain coords-framebuffer for this pos and check if the marker is visible
+        // call this logic in setTimeout with a timeout of 100ms to save performance in map-movement
+        if (this._map.style && this._map.style.terrain && !this._opacityTimeout) this._opacityTimeout = setTimeout(() => {
+            const lnglat = this._map.unproject(this._pos);
+            const metresPerPixel = 40075016.686 * Math.abs(Math.cos(this._lngLat.lat * Math.PI / 180)) / Math.pow(2, this._map.transform.tileZoom + 8);
+            this._element.style.opacity = lnglat.distanceTo(this._lngLat) > metresPerPixel * 20 ? '0.2' : '1.0';
+            this._opacityTimeout = null;
+        }, 100);
     }
 
     /**

package/src/util/primitives.ts

@@ -1,5 +1,4 @@
 import {mat4, vec3, vec4} from 'gl-matrix';
-import assert from 'assert';
 
 class Frustum {
 
@@ -19,10 +18,12 @@ class Frustum {
 
         const scale = Math.pow(2, zoom);
 
-        // Transform frustum corner points from clip space to tile space
-        const frustumCoords = clipSpaceCorners
-            .map(v => vec4.transformMat4([] as any, v as any, invProj))
-            .map(v => vec4.scale([] as any, v, 1.0 / v[3] / worldSize * scale));
+        // Transform frustum corner points from clip space to tile space, Z to meters
+        const frustumCoords = clipSpaceCorners.map(v => {
+            v = vec4.transformMat4([] as any, v as any, invProj) as any;
+            const s = 1.0 / v[3] / worldSize * scale;
+            return vec4.mul(v as any, v as any, [s, s, 1.0 / v[3], s] as vec4);
+        });
 
         const frustumPlanePointIndices = [
             [0, 1, 2],  // near
@@ -84,14 +85,16 @@ class Aabb {
     intersects(frustum: Frustum): number {
         // Execute separating axis test between two convex objects to find intersections
         // Each frustum plane together with 3 major axes define the separating axes
-        // Note: test only 4 points as both min and max points have equal elevation
-        assert(this.min[2] === 0 && this.max[2] === 0);
 
         const aabbPoints = [
-            [this.min[0], this.min[1], 0.0, 1],
-            [this.max[0], this.min[1], 0.0, 1],
-            [this.max[0], this.max[1], 0.0, 1],
-            [this.min[0], this.max[1], 0.0, 1]
+            [this.min[0], this.min[1], this.min[2], 1],
+            [this.max[0], this.min[1], this.min[2], 1],
+            [this.max[0], this.max[1], this.min[2], 1],
+            [this.min[0], this.max[1], this.min[2], 1],
+            [this.min[0], this.min[1], this.max[2], 1],
+            [this.max[0], this.min[1], this.max[2], 1],
+            [this.max[0], this.max[1], this.max[2], 1],
+            [this.min[0], this.max[1], this.max[2], 1]
         ];
 
         let fullyInside = true;