maplibre-gl 2.3.1-pre.2 → 2.4.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "maplibre-gl",
   "description": "BSD licensed community fork of mapbox-gl, a WebGL interactive maps library",
-  "version": "2.3.1-pre.2",
+  "version": "2.4.0",
   "main": "dist/maplibre-gl.js",
   "style": "dist/maplibre-gl.css",
   "license": "BSD-3-Clause",
@@ -52,10 +52,10 @@
     "@types/d3": "^7.4.0",
     "@types/diff": "^5.0.2",
     "@types/earcut": "^2.1.1",
-    "@types/eslint": "^8.4.5",
+    "@types/eslint": "^8.4.6",
     "@types/gl": "^4.1.1",
     "@types/glob": "^7.2.0",
-    "@types/jest": "^28.1.6",
+    "@types/jest": "^28.1.7",
     "@types/jsdom": "^20.0.0",
     "@types/minimist": "^1.2.2",
     "@types/murmurhash-js": "^1.0.3",
@@ -70,8 +70,8 @@
     "@types/shuffle-seed": "^1.1.0",
     "@types/supercluster": "^7.1.0",
     "@types/window-or-global": "^1.0.4",
-    "@typescript-eslint/eslint-plugin": "^5.32.0",
-    "@typescript-eslint/parser": "^5.32.0",
+    "@typescript-eslint/eslint-plugin": "^5.34.0",
+    "@typescript-eslint/parser": "^5.33.1",
     "acorn-import-assertions": "^1.8.0",
     "address": "^1.2.0",
     "benchmark": "^2.1.4",
@@ -80,13 +80,13 @@
     "d3": "^7.6.1",
     "d3-queue": "^3.0.7",
     "diff": "^5.1.0",
-    "documentation": "14.0.0-alpha.1",
+    "documentation": "14.0.0",
     "dts-bundle-generator": "^6.12.0",
     "eslint": "^8.22.0",
     "eslint-config-mourner": "^3.0.0",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^26.7.0",
+    "eslint-plugin-jest": "^26.8.7",
     "eslint-plugin-jsdoc": "^39.3.4",
     "eslint-plugin-react": "^7.30.1",
     "gl": "^5.0.3",
@@ -116,7 +116,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "request": "^2.88.0",
-    "rollup": "^2.78.0",
+    "rollup": "^2.78.1",
     "rollup-plugin-import-assert": "^2.1.0",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "rollup-plugin-terser": "^7.0.2",
@@ -125,8 +125,8 @@
     "shuffle-seed": "^1.1.6",
     "source-map-explorer": "^2.5.2",
     "st": "^3.0.0",
-    "stylelint": "^14.10.0",
-    "stylelint-config-standard": "^27.0.0",
+    "stylelint": "^14.11.0",
+    "stylelint-config-standard": "^28.0.0",
     "ts-jest": "^28.0.8",
     "ts-node": "^10.9.1",
     "typescript": "^4.7.4"
@@ -139,6 +139,7 @@
     "generate-typings": "node --loader ts-node/esm --experimental-specifier-resolution=node build/generate-typings.ts",
     "generate-query-test-fixtures": "node --loader ts-node/esm --experimental-specifier-resolution=node build/generate-query-test-fixtures.ts",
     "generate-debug-index-file": "node --loader ts-node/esm --experimental-specifier-resolution=node build/generate-debug-index-file.ts",
+    "build-dist": "npm run generate-typings && npm run build-dev && npm run build-prod && npm run build-csp && npm run build-css",
     "build-dev": "rollup --configPlugin @rollup/plugin-typescript -c --environment BUILD:dev",
     "watch-dev": "rollup --configPlugin @rollup/plugin-typescript -c --environment BUILD:dev --watch",
     "build-prod": "rollup --configPlugin @rollup/plugin-typescript -c --environment BUILD:production",

package/src/render/draw_debug.ts

@@ -66,7 +66,7 @@ function drawDebug(painter: Painter, sourceCache: SourceCache, coords: Array<Ove
     }
 }
 
-function drawDebugTile(painter, sourceCache, coord: OverscaledTileID) {
+function drawDebugTile(painter: Painter, sourceCache: SourceCache, coord: OverscaledTileID) {
     const context = painter.context;
     const gl = context.gl;
 

package/src/render/draw_fill.ts

@@ -1,6 +1,7 @@
 import Color from '../style-spec/util/color';
 import DepthMode from '../gl/depth_mode';
 import CullFaceMode from '../gl/cull_face_mode';
+import ColorMode from '../gl/color_mode';
 import {
     fillUniformValues,
     fillPatternUniformValues,
@@ -56,7 +57,14 @@ function drawFill(painter: Painter, sourceCache: SourceCache, layer: FillStyleLa
     }
 }
 
-function drawFillTiles(painter, sourceCache, layer, coords, depthMode, colorMode, isOutline) {
+function drawFillTiles(
+    painter: Painter,
+    sourceCache: SourceCache,
+    layer: FillStyleLayer,
+    coords: Array<OverscaledTileID>,
+    depthMode: Readonly<DepthMode>,
+    colorMode: Readonly<ColorMode>,
+    isOutline: boolean) {
     const gl = painter.context.gl;
 
     const patternProperty = layer.paint.get('fill-pattern');

package/src/render/draw_fill_extrusion.ts

@@ -45,7 +45,14 @@ function draw(painter: Painter, source: SourceCache, layer: FillExtrusionStyleLa
     }
 }
 
-function drawExtrusionTiles(painter, source, layer, coords, depthMode, stencilMode, colorMode) {
+function drawExtrusionTiles(
+    painter: Painter,
+    source: SourceCache,
+    layer: FillExtrusionStyleLayer,
+    coords: OverscaledTileID[],
+    depthMode: DepthMode,
+    stencilMode: Readonly<StencilMode>,
+    colorMode: Readonly<ColorMode>) {
     const context = painter.context;
     const gl = context.gl;
     const patternProperty = layer.paint.get('fill-extrusion-pattern');

package/src/render/draw_heatmap.ts

@@ -4,6 +4,8 @@ import DepthMode from '../gl/depth_mode';
 import StencilMode from '../gl/stencil_mode';
 import ColorMode from '../gl/color_mode';
 import CullFaceMode from '../gl/cull_face_mode';
+import Context from '../gl/context';
+import Framebuffer from '../gl/framebuffer';
 import {
     heatmapUniformValues,
     heatmapTextureUniformValues
@@ -67,7 +69,7 @@ function drawHeatmap(painter: Painter, sourceCache: SourceCache, layer: HeatmapS
     }
 }
 
-function bindFramebuffer(context, painter, layer) {
+function bindFramebuffer(context: Context, painter: Painter, layer: HeatmapStyleLayer) {
     const gl = context.gl;
     context.activeTexture.set(gl.TEXTURE1);
 
@@ -94,7 +96,7 @@ function bindFramebuffer(context, painter, layer) {
     }
 }
 
-function bindTextureToFramebuffer(context, painter, texture, fbo) {
+function bindTextureToFramebuffer(context: Context, painter: Painter, texture: WebGLTexture, fbo: Framebuffer) {
     const gl = context.gl;
     // Use the higher precision half-float texture where available (producing much smoother looking heatmaps);
     // Otherwise, fall back to a low precision texture
@@ -103,7 +105,7 @@ function bindTextureToFramebuffer(context, painter, texture, fbo) {
     fbo.colorAttachment.set(texture);
 }
 
-function renderTextureToMap(painter, layer) {
+function renderTextureToMap(painter: Painter, layer: HeatmapStyleLayer) {
     const context = painter.context;
     const gl = context.gl;
 

package/src/render/draw_hillshade.ts

@@ -2,6 +2,8 @@ import Texture from './texture';
 import StencilMode from '../gl/stencil_mode';
 import DepthMode from '../gl/depth_mode';
 import CullFaceMode from '../gl/cull_face_mode';
+import ColorMode from '../gl/color_mode';
+import Tile from '../source/tile';
 import {
     hillshadeUniformValues,
     hillshadeUniformPrepareValues
@@ -37,7 +39,14 @@ function drawHillshade(painter: Painter, sourceCache: SourceCache, layer: Hillsh
     context.viewport.set([0, 0, painter.width, painter.height]);
 }
 
-function renderHillshade(painter, coord, tile, layer, depthMode, stencilMode, colorMode) {
+function renderHillshade(
+    painter: Painter,
+    coord: OverscaledTileID,
+    tile: Tile,
+    layer: HillshadeStyleLayer,
+    depthMode: Readonly<DepthMode>,
+    stencilMode: Readonly<StencilMode>,
+    colorMode: Readonly<ColorMode>) {
     const context = painter.context;
     const gl = context.gl;
     const fbo = tile.fbo;
@@ -58,7 +67,13 @@ function renderHillshade(painter, coord, tile, layer, depthMode, stencilMode, co
 
 // hillshade rendering is done in two steps. the prepare step first calculates the slope of the terrain in the x and y
 // directions for each pixel, and saves those values to a framebuffer texture in the r and g channels.
-function prepareHillshade(painter, tile, layer, depthMode, stencilMode, colorMode) {
+function prepareHillshade(
+    painter: Painter,
+    tile: Tile,
+    layer: HillshadeStyleLayer,
+    depthMode: Readonly<DepthMode>,
+    stencilMode: Readonly<StencilMode>,
+    colorMode: Readonly<ColorMode>) {
     const context = painter.context;
     const gl = context.gl;
     const dem = tile.dem;

package/src/render/program/line_program.ts

@@ -186,7 +186,7 @@ function calculateTileRatio(tile: Tile, transform: Transform) {
     return 1 / pixelsToTileUnits(tile, 1, transform.tileZoom);
 }
 
-function calculateMatrix(painter, tile, layer, coord) {
+function calculateMatrix(painter: Painter, tile: Tile, layer: LineStyleLayer, coord: OverscaledTileID) {
     return painter.translatePosMatrix(
         coord ? coord.posMatrix : tile.tileID.posMatrix,
         tile,

package/src/style/style.ts

@@ -499,6 +499,7 @@ class Style extends Evented {
 
         // remove terrain
         if (!options) {
+            if (this.terrain) this.terrain.sourceCache.destruct();
             this.terrain = null;
             this.map.transform.updateElevation(this.terrain);
 

package/src/style/style_layer/symbol_style_layer.ts

@@ -24,7 +24,7 @@ import type {BucketParameters} from '../../data/bucket';
 import type {SymbolLayoutProps, SymbolPaintProps} from './symbol_style_layer_properties.g';
 import type EvaluationParameters from '../evaluation_parameters';
 import type {LayerSpecification} from '../../style-spec/types.g';
-import type {Feature, SourceExpression, CompositeExpression} from '../../style-spec/expression';
+import type {Feature, SourceExpression} from '../../style-spec/expression';
 import type {Expression} from '../../style-spec/expression/expression';
 import type {CanonicalTileID} from '../../source/tile_id';
 import {FormattedType} from '../../style-spec/expression/types';
@@ -122,12 +122,11 @@ class SymbolStyleLayer extends StyleLayer {
             const styleExpression = new StyleExpression(override, overriden.property.specification);
             let expression = null;
             if (overriden.value.kind === 'constant' || overriden.value.kind === 'source') {
-                expression = (new ZoomConstantExpression('source', styleExpression) as SourceExpression);
+                expression = new ZoomConstantExpression('source', styleExpression) as SourceExpression;
             } else {
-                expression = (new ZoomDependentExpression('composite',
+                expression = new ZoomDependentExpression('composite',
                     styleExpression,
-                    overriden.value.zoomStops,
-                    (overriden.value as any)._interpolationType) as CompositeExpression);
+                    overriden.value.zoomStops);
             }
             this.paint._values[overridable] = new PossiblyEvaluatedPropertyValue(overriden.property,
                 expression,

package/src/style-spec/CHANGELOG.md

@@ -6,7 +6,7 @@
 
 ### Breaking changes
 
-* Renamed `ParsingError` to `ExpressionParsingError` as there were two with the same name and added typescript typings [1468](https://github.com/maplibre/maplibre-gl-js/pull/1468)
+* Renamed `ParsingError` to `ExpressionParsingError` as there were two with the same name and added typescript typings [#1468](https://github.com/maplibre/maplibre-gl-js/pull/1468)
 
 ## 16.1.0
 
@@ -55,7 +55,7 @@
 ## 13.16.0
 
 ### ✨ Features and improvements
-* Added `volatile` source property to control storing the tiles in local storage. ([9702](https://github.com/mapbox/mapbox-gl-js/pull/9702))
+* Added `volatile` source property to control storing the tiles in local storage. ([#9702](https://github.com/mapbox/mapbox-gl-js/pull/9702))
 
 * Added `clusterMinPoints` option for clustered GeoJSON sources that defines the minimum number of points to form a cluster. ([#9748](https://github.com/mapbox/mapbox-gl-js/pull/9748))
 

package/src/ui/camera.test.ts

@@ -1,9 +1,10 @@
-import Camera from '../ui/camera';
+import Camera, {CameraOptions} from '../ui/camera';
 import Transform from '../geo/transform';
 import TaskQueue, {TaskID} from '../util/task_queue';
 import browser from '../util/browser';
 import {fixedLngLat, fixedNum} from '../../test/unit/lib/fixed';
 import {setMatchMedia} from '../util/test/util';
+import {mercatorZfromAltitude} from '../geo/mercator_coordinate';
 
 beforeEach(() => {
     setMatchMedia();
@@ -55,6 +56,68 @@ function assertTransitionTime(done, camera, min, max) {
         });
 }
 
+describe('#calculateCameraOptionsFromTo', () => {
+    // Choose initial zoom to avoid center being constrained by mercator latitude limits.
+    const camera = createCamera({zoom: 1});
+
+    test('look at north', () => {
+        const cameraOptions: CameraOptions = camera.calculateCameraOptionsFromTo({lng: 1, lat: 0}, 0, {lng: 1, lat: 1});
+        expect(cameraOptions).toBeDefined();
+        expect(cameraOptions.center).toBeDefined();
+        expect(cameraOptions.bearing).toBeCloseTo(0);
+    });
+
+    test('look at west', () => {
+        const cameraOptions = camera.calculateCameraOptionsFromTo({lng: 1, lat: 0}, 0, {lng: 0, lat: 0});
+        expect(cameraOptions).toBeDefined();
+        expect(cameraOptions.bearing).toBeCloseTo(-90);
+    });
+
+    test('pitch 45', () => {
+        // altitude same as grounddistance => 45°
+        // distance between lng x and lng x+1 is 111.2km at same lat
+        const cameraOptions: CameraOptions = camera.calculateCameraOptionsFromTo({lng: 1, lat: 0}, 111200, {lng: 0, lat: 0});
+        expect(cameraOptions).toBeDefined();
+        expect(cameraOptions.pitch).toBeCloseTo(45);
+    });
+
+    test('pitch 90', () => {
+        const cameraOptions = camera.calculateCameraOptionsFromTo({lng: 1, lat: 0}, 0, {lng: 0, lat: 0});
+        expect(cameraOptions).toBeDefined();
+        expect(cameraOptions.pitch).toBeCloseTo(90);
+    });
+
+    test('pitch 153.435', () => {
+
+        // distance between lng x and lng x+1 is 111.2km at same lat
+        // (elevation difference of cam and center) / 2 = grounddistance =>
+        // acos(111.2 / sqrt(111.2² + (111.2 * 2)²)) = acos(1/sqrt(5)) => 63.435 + 90 (looking up) = 153.435
+        const cameraOptions: CameraOptions = camera.calculateCameraOptionsFromTo({lng: 1, lat: 0}, 111200, {lng: 0, lat: 0}, 111200 * 3);
+        expect(cameraOptions).toBeDefined();
+        expect(cameraOptions.pitch).toBeCloseTo(153.435);
+    });
+
+    test('zoom distance 1000', () => {
+        const expectedZoom = Math.log2(camera.transform.cameraToCenterDistance / mercatorZfromAltitude(1000, 0) / camera.transform.tileSize);
+        const cameraOptions = camera.calculateCameraOptionsFromTo({lng: 0, lat: 0}, 0, {lng: 0, lat: 0}, 1000);
+
+        expect(cameraOptions).toBeDefined();
+        expect(cameraOptions.zoom).toBeCloseTo(expectedZoom);
+    });
+
+    test('zoom distance 1 lng (111.2km), 111.2km altitude away', () => {
+        const expectedZoom = Math.log2(camera.transform.cameraToCenterDistance / mercatorZfromAltitude(Math.hypot(111200, 111200), 0) / camera.transform.tileSize);
+        const cameraOptions = camera.calculateCameraOptionsFromTo({lng: 0, lat: 0}, 0, {lng: 1, lat: 0}, 111200);
+
+        expect(cameraOptions).toBeDefined();
+        expect(cameraOptions.zoom).toBeCloseTo(expectedZoom);
+    });
+
+    test('same To as From error', () => {
+        expect(() => { camera.calculateCameraOptionsFromTo({lng: 0, lat: 0}, 0, {lng: 0, lat: 0}, 0); }).toThrow();
+    });
+});
+
 describe('#jumpTo', () => {
     // Choose initial zoom to avoid center being constrained by mercator latitude limits.
     const camera = createCamera({zoom: 1});

package/src/ui/camera.ts

@@ -12,6 +12,7 @@ import type {LngLatLike} from '../geo/lng_lat';
 import type {LngLatBoundsLike} from '../geo/lng_lat_bounds';
 import type {TaskID} from '../util/task_queue';
 import type {PaddingOptions} from '../geo/edge_insets';
+import MercatorCoordinate from '../geo/mercator_coordinate';
 
 /**
  * A [Point](https://github.com/mapbox/point-geometry) or an array of two numbers representing `x` and `y` screen coordinates in pixels.
@@ -774,6 +775,41 @@ abstract class Camera extends Evented {
         return this.fire(new Event('moveend', eventData));
     }
 
+    /**
+     * Calculates pitch, zoom and bearing for looking at @param newCenter with the camera position being @param newCenter
+     * and returns them as Cameraoptions.
+     * @memberof Map#
+     * @param from The camera to look from
+     * @param altitudeFrom The altitude of the camera to look from
+     * @param to The center to look at
+     * @param altitudeTo Optional altitude of the center to look at. If none given the ground height will be used.
+     * @returns {CameraOptions} the calculated camera options
+     */
+    calculateCameraOptionsFromTo(from: LngLat, altitudeFrom: number, to: LngLat, altitudeTo: number = 0) : CameraOptions {
+        const fromMerc = MercatorCoordinate.fromLngLat(from, altitudeFrom);
+        const toMerc = MercatorCoordinate.fromLngLat(to, altitudeTo);
+        const dx = toMerc.x - fromMerc.x;
+        const dy = toMerc.y - fromMerc.y;
+        const dz = toMerc.z - fromMerc.z;
+
+        const distance3D = Math.hypot(dx, dy, dz);
+        if (distance3D === 0) throw new Error('Can\'t calculate camera options with same From and To');
+
+        const groundDistance = Math.hypot(dx, dy);
+
+        const zoom = this.transform.scaleZoom(this.transform.cameraToCenterDistance / distance3D / this.transform.tileSize);
+        const bearing = (Math.atan2(dx, -dy) * 180) / Math.PI;
+        let pitch = (Math.acos(groundDistance / distance3D) * 180) / Math.PI;
+        pitch = dz < 0 ? 90 - pitch : 90 + pitch;
+
+        return {
+            center: toMerc.toLngLat(),
+            zoom,
+            pitch,
+            bearing
+        };
+    }
+
     /**
      * Changes any combination of `center`, `zoom`, `bearing`, `pitch`, and `padding` with an animated transition
      * between old and new values. The map will retain its current values for any

package/src/ui/control/attribution_control.test.ts

@@ -1,6 +1,7 @@
 import AttributionControl from './attribution_control';
 import {createMap as globalCreateMap, setWebGlContext, setPerformance, setMatchMedia} from '../../util/test/util';
 import simulate from '../../../test/unit/lib/simulate_interaction';
+import {fakeServer} from 'nise';
 
 function createMap() {
 
@@ -272,6 +273,67 @@ describe('AttributionControl', () => {
         });
     });
 
+    test('does not show attributions for sources that are used for terrain when they are not in use', done => {
+        global.fetch = null;
+        const server = fakeServer.create();
+        server.respondWith('/source.json', JSON.stringify({
+            minzoom: 5,
+            maxzoom: 12,
+            attribution: 'Terrain',
+            tiles: ['http://example.com/{z}/{x}/{y}.pngraw'],
+            bounds: [-47, -7, -45, -5]
+        }));
+
+        const attribution = new AttributionControl();
+        map.addControl(attribution);
+
+        map.on('load', () => {
+            map.addSource('1', {type: 'raster-dem', url: '/source.json'});
+            server.respond();
+        });
+
+        let times = 0;
+        map.on('data', (e) => {
+            if (e.dataType === 'source' && e.sourceDataType === 'visibility') {
+                if (++times === 1) {
+                    expect(attribution._innerContainer.innerHTML).toBe('');
+                    done();
+                }
+            }
+        });
+    });
+
+    test('shows attributions for sources that are used for terrain', done => {
+        global.fetch = null;
+        const server = fakeServer.create();
+        server.respondWith('/source.json', JSON.stringify({
+            minzoom: 5,
+            maxzoom: 12,
+            attribution: 'Terrain',
+            tiles: ['http://example.com/{z}/{x}/{y}.pngraw'],
+            bounds: [-47, -7, -45, -5]
+        }));
+
+        const attribution = new AttributionControl();
+        map.addControl(attribution);
+
+        map.on('load', () => {
+            map.addSource('1', {type: 'raster-dem', url: '/source.json'});
+            server.respond();
+            map.setTerrain({source: '1'});
+        });
+
+        let times = 0;
+        map.on('data', (e) => {
+            if (e.dataType === 'source' && e.sourceDataType === 'visibility') {
+                if (++times === 1) {
+                    expect(attribution._innerContainer.innerHTML).toBe('Terrain');
+                    done();
+                }
+            }
+        });
+    });
+
     test('toggles attributions for sources whose visibility changes when zooming', done => {
         const attribution = new AttributionControl();
         map.addControl(attribution);

package/src/ui/control/attribution_control.ts

@@ -63,6 +63,7 @@ class AttributionControl implements IControl {
 
         this._map.on('styledata', this._updateData);
         this._map.on('sourcedata', this._updateData);
+        this._map.on('terrain', this._updateData);
         this._map.on('resize', this._updateCompact);
         this._map.on('drag', this._updateCompactMinimize);
 
@@ -74,6 +75,7 @@ class AttributionControl implements IControl {
 
         this._map.off('styledata', this._updateData);
         this._map.off('sourcedata', this._updateData);
+        this._map.off('terrain', this._updateData);
         this._map.off('resize', this._updateCompact);
         this._map.off('drag', this._updateCompactMinimize);
 
@@ -101,7 +103,7 @@ class AttributionControl implements IControl {
     }
 
     _updateData(e: any) {
-        if (e && (e.sourceDataType === 'metadata' || e.sourceDataType === 'visibility' || e.dataType === 'style')) {
+        if (e && (e.sourceDataType === 'metadata' || e.sourceDataType === 'visibility' || e.dataType === 'style' || e.type === 'terrain')) {
             this._updateAttributions();
         }
     }
@@ -131,7 +133,7 @@ class AttributionControl implements IControl {
         const sourceCaches = this._map.style.sourceCaches;
         for (const id in sourceCaches) {
             const sourceCache = sourceCaches[id];
-            if (sourceCache.used) {
+            if (sourceCache.used || sourceCache.usedForTerrain) {
                 const source = sourceCache.getSource();
                 if (source.attribution && attributions.indexOf(source.attribution) < 0) {
                     attributions.push(source.attribution);

package/src/ui/control/terrain_control.test.ts

@@ -0,0 +1,60 @@
+import TerrainControl from './terrain_control';
+import {createMap as globalCreateMap, setWebGlContext, setPerformance, setMatchMedia} from '../../util/test/util';
+
+function createMap() {
+
+    return globalCreateMap({
+        attributionControl: false,
+        style: {
+            version: 8,
+            sources: {
+                terrain: {
+                    minzoom: 5,
+                    maxzoom: 12,
+                    attribution: 'MapLibre',
+                    tiles: ['http://example.com/{z}/{x}/{y}.pngraw'],
+                    bounds: [-47, -7, -45, -5]
+                },
+            },
+            layers: [],
+            owner: 'mapblibre',
+            id: 'demotiles',
+        },
+        hash: true
+    }, undefined);
+}
+
+let map;
+
+beforeEach(() => {
+    setWebGlContext();
+    setPerformance();
+    setMatchMedia();
+    map = createMap();
+});
+
+afterEach(() => {
+    map.remove();
+});
+
+describe('TerrainControl', () => {
+    test('appears in top-right by default', () => {
+        map.addControl(new TerrainControl({source: 'terrain'}));
+
+        expect(
+            map.getContainer().querySelectorAll('.maplibregl-ctrl-top-right .maplibregl-ctrl-terrain')
+        ).toHaveLength(1);
+    });
+
+    test('appears in the position specified by the position option', () => {
+        map.addControl(new TerrainControl({source: 'terrain'}), 'bottom-right');
+
+        expect(
+            map.getContainer().querySelectorAll('.maplibregl-ctrl-bottom-right .maplibregl-ctrl-terrain')
+        ).toHaveLength(1);
+
+        expect(
+            map.getContainer().querySelectorAll('.maplibregl-ctrl-top-right .maplibregl-ctrl-terrain')
+        ).toHaveLength(0);
+    });
+});

package/src/ui/handler/map_event.test.ts

@@ -4,7 +4,7 @@ import simulate from '../../../test/unit/lib/simulate_interaction';
 import {setMatchMedia, setPerformance, setWebGlContext} from '../../util/test/util';
 
 function createMap() {
-    return new Map({interactive: false, container: DOM.create('div', '', window.document.body)} as any as MapOptions);
+    return new Map({interactive: true, container: DOM.create('div', '', window.document.body)} as any as MapOptions);
 }
 
 beforeEach(() => {
@@ -93,4 +93,68 @@ describe('map events', () => {
 
         map.remove();
     });
+
+    test('MapEvent handler fires contextmenu on MacOS/Linux, but only at mouseup', () => {
+        const map = createMap();
+        const target = map.getCanvas();
+        map.dragPan.enable();
+
+        const contextmenu = jest.fn();
+
+        map.on('contextmenu', contextmenu);
+
+        simulate.mousedown(map.getCanvas(), {target, button: 2, clientX: 10, clientY: 10});
+        simulate.contextmenu(map.getCanvas(), {target}); // triggered immediately after mousedown
+        expect(contextmenu).toHaveBeenCalledTimes(0);
+        simulate.mouseup(map.getCanvas(), {target, button: 2, clientX: 10, clientY: 10});
+        expect(contextmenu).toHaveBeenCalledTimes(1);
+    });
+
+    test('MapEvent handler does not fire contextmenu on MacOS/Linux, when moved', () => {
+        const map = createMap();
+        const target = map.getCanvas();
+        map.dragPan.enable();
+
+        const contextmenu = jest.fn();
+
+        map.on('contextmenu', contextmenu);
+
+        simulate.mousedown(map.getCanvas(), {target, button: 2, clientX: 10, clientY: 10});
+        simulate.contextmenu(map.getCanvas(), {target}); // triggered immediately after mousedown
+        simulate.mousemove(map.getCanvas(), {target, buttons: 2, clientX: 50, clientY: 10});
+        simulate.mouseup(map.getCanvas(), {target, button: 2, clientX: 70, clientY: 10});
+        expect(contextmenu).toHaveBeenCalledTimes(0);
+    });
+
+    test('MapEvent handler fires contextmenu on Windows', () => {
+        const map = createMap();
+        const target = map.getCanvas();
+        map.dragPan.enable();
+
+        const contextmenu = jest.fn();
+
+        map.on('contextmenu', contextmenu);
+
+        simulate.mousedown(map.getCanvas(), {target, button: 2, clientX: 10, clientY: 10});
+        simulate.mouseup(map.getCanvas(), {target, button: 2, clientX: 10, clientY: 10});
+        expect(contextmenu).toHaveBeenCalledTimes(0);
+        simulate.contextmenu(map.getCanvas(), {target, button: 2, clientX: 10, clientY: 10}); // triggered only after mouseup
+        expect(contextmenu).toHaveBeenCalledTimes(1);
+    });
+
+    test('MapEvent handler does not fire contextmenu on Windows, when moved', () => {
+        const map = createMap();
+        const target = map.getCanvas();
+        map.dragPan.enable();
+
+        const contextmenu = jest.fn();
+
+        map.on('contextmenu', contextmenu);
+
+        simulate.mousedown(map.getCanvas(), {target, button: 2, clientX: 10, clientY: 10});
+        simulate.mousemove(map.getCanvas(), {target, buttons: 2, clientX: 50, clientY: 10});
+        simulate.mouseup(map.getCanvas(), {target, button: 2, clientX: 50, clientY: 10});
+        simulate.contextmenu(map.getCanvas(), {target, button: 2, clientX: 10, clientY: 10}); // triggered only after mouseup
+        expect(contextmenu).toHaveBeenCalledTimes(0);
+    });
 });