maplibre-gl 2.2.0-pre.2 → 2.2.0

package/src/symbol/check_max_angle.test.ts

@@ -4,14 +4,14 @@ import Anchor from './anchor';
 
 describe('checkMaxAngle', () => {
     test('line with no sharp angles', () => {
-        const line = [ new Point(0, 0), new Point(20, -1), new Point(40, 1), new Point(60, 0) ];
+        const line = [new Point(0, 0), new Point(20, -1), new Point(40, 1), new Point(60, 0)];
         const anchor = new Anchor(30, 0, 0, 1);
         expect(checkMaxAngle(line, anchor, 25, 20, Math.PI / 8)).toBeTruthy();
         expect(checkMaxAngle(line, anchor, 25, 20, 0)).toBeFalsy();
     });
 
     test('one sharp corner', () => {
-        const line = [ new Point(0, 0), new Point(0, 10), new Point(10, 10) ];
+        const line = [new Point(0, 0), new Point(0, 10), new Point(10, 10)];
         const anchor = new Anchor(0, 10, 0, 1);
         expect(checkMaxAngle(line, anchor, 10, 5, Math.PI / 2)).toBeTruthy();
         expect(checkMaxAngle(line, anchor, 10, 5, Math.PI / 2 - 0.01)).toBeFalsy();
@@ -27,20 +27,20 @@ describe('checkMaxAngle', () => {
     });
 
     test('label appears on the first line segment', () => {
-        const line = [ new Point(0, 0), new Point(100, 0) ];
+        const line = [new Point(0, 0), new Point(100, 0)];
         const anchor = new Anchor(50, 0, 0, 0);
         expect(checkMaxAngle(line, anchor, 30, 5, Math.PI / 2)).toBeTruthy();
     });
 
     test('not enough space before the end of the line', () => {
-        const line = [ new Point(0, 0), new Point(10, 0), new Point(20, 0), new Point(30, 0) ];
+        const line = [new Point(0, 0), new Point(10, 0), new Point(20, 0), new Point(30, 0)];
         const anchor = new Anchor(5, 0, 0, 0);
         expect(checkMaxAngle(line, anchor, 11, 5, Math.PI)).toBeFalsy();
         expect(checkMaxAngle(line, anchor, 10, 5, Math.PI)).toBeTruthy();
     });
 
     test('not enough space after the beginning of the line', () => {
-        const line = [ new Point(0, 0), new Point(10, 0), new Point(20, 0), new Point(30, 0) ];
+        const line = [new Point(0, 0), new Point(10, 0), new Point(20, 0), new Point(30, 0)];
         const anchor = new Anchor(25, 0, 0, 2);
         expect(checkMaxAngle(line, anchor, 11, 5, Math.PI)).toBeFalsy();
         expect(checkMaxAngle(line, anchor, 10, 5, Math.PI)).toBeTruthy();

package/src/symbol/collision_feature.test.ts

@@ -2,6 +2,7 @@ import CollisionFeature from './collision_feature';
 import Anchor from './anchor';
 import Point from '@mapbox/point-geometry';
 import {CollisionBoxArray} from '../data/array_types.g';
+import {SymbolPadding} from '../style/style_layer/symbol_style_layer';
 
 describe('CollisionFeature', () => {
 
@@ -14,11 +15,13 @@ describe('CollisionFeature', () => {
         bottom: 10
     };
 
+    const padding: SymbolPadding = [0, 0, 0, 0];
+
     test('point label', () => {
         const point = new Point(500, 0);
         const anchor = new Anchor(point.x, point.y, 0, undefined);
 
-        const cf = new CollisionFeature(collisionBoxArray, anchor, 0, 0, 0, shapedText, 1, 0, false, 0);
+        const cf = new CollisionFeature(collisionBoxArray, anchor, 0, 0, 0, shapedText, 1, padding, false, 0);
         expect(cf.circleDiameter).toBeFalsy();
         expect(cf.boxEndIndex - cf.boxStartIndex).toBe(1);
 
@@ -29,9 +32,23 @@ describe('CollisionFeature', () => {
         expect(box.y2).toBe(10);
     });
 
+    test('point label with padding', () => {
+        const point = new Point(500, 0);
+        const anchor = new Anchor(point.x, point.y, 0, undefined);
+        const pointPadding: SymbolPadding = [10, 20, -5, -10]; // top, right, bottom, left
+        const cf = new CollisionFeature(collisionBoxArray, anchor, 0, 0, 0, shapedText, 1, pointPadding, false, 0);
+
+        expect(cf.boxEndIndex - cf.boxStartIndex).toBe(1);
+        const box = collisionBoxArray.get(cf.boxStartIndex);
+        expect(box.x1).toBe(-40);
+        expect(box.x2).toBe(70);
+        expect(box.y1).toBe(-20);
+        expect(box.y2).toBe(5);
+    });
+
     test('Compute line height for runtime collision circles (line label)', () => {
         const anchor = new Anchor(505, 95, 0, 1);
-        const cf = new CollisionFeature(collisionBoxArray, anchor, 0, 0, 0, shapedText, 1, 0, true, 0);
+        const cf = new CollisionFeature(collisionBoxArray, anchor, 0, 0, 0, shapedText, 1, padding, true, 0);
         expect(cf.circleDiameter).toBeTruthy();
         expect(cf.circleDiameter).toBe(shapedText.bottom - shapedText.top);
         expect(cf.boxEndIndex - cf.boxStartIndex).toBe(0);
@@ -46,7 +63,7 @@ describe('CollisionFeature', () => {
         };
 
         const anchor = new Anchor(505, 95, 0, 1);
-        const cf = new CollisionFeature(collisionBoxArray, anchor, 0, 0, 0, shapedText, 1, 0, true, 0);
+        const cf = new CollisionFeature(collisionBoxArray, anchor, 0, 0, 0, shapedText, 1, padding, true, 0);
         expect(cf.boxEndIndex - cf.boxStartIndex).toBe(0);
         expect(cf.circleDiameter).toBeFalsy();
     });
@@ -60,7 +77,7 @@ describe('CollisionFeature', () => {
         };
 
         const anchor = new Anchor(505, 95, 0, 1);
-        const cf = new CollisionFeature(collisionBoxArray, anchor, 0, 0, 0, shapedText, 1, 0, true, 0);
+        const cf = new CollisionFeature(collisionBoxArray, anchor, 0, 0, 0, shapedText, 1, padding, true, 0);
         expect(cf.boxEndIndex - cf.boxStartIndex).toBe(0);
         expect(cf.circleDiameter).toBeFalsy();
     });
@@ -74,7 +91,7 @@ describe('CollisionFeature', () => {
         };
 
         const anchor = new Anchor(505, 95, 0, 1);
-        const cf = new CollisionFeature(collisionBoxArray, anchor, 0, 0, 0, shapedText, 1, 0, true, 0);
+        const cf = new CollisionFeature(collisionBoxArray, anchor, 0, 0, 0, shapedText, 1, padding, true, 0);
         expect(cf.boxEndIndex - cf.boxStartIndex).toBe(0);
         expect(cf.circleDiameter).toBe(10);
     });

package/src/symbol/collision_feature.ts

@@ -1,6 +1,7 @@
 import type {CollisionBoxArray} from '../data/array_types.g';
 import Point from '@mapbox/point-geometry';
 import type Anchor from './anchor';
+import {SymbolPadding} from '../style/style_layer/symbol_style_layer';
 
 /**
  * A CollisionFeature represents the area of the tile covered by a single label.
@@ -33,7 +34,7 @@ class CollisionFeature {
         bucketIndex: number,
         shaped: any,
         boxScale: number,
-        padding: number,
+        padding: SymbolPadding,
         alignLine: boolean,
         rotate: number) {
 
@@ -59,10 +60,11 @@ class CollisionFeature {
                 this.circleDiameter = height;
             }
         } else {
-            let y1 = shaped.top * boxScale - padding;
-            let y2 = shaped.bottom * boxScale + padding;
-            let x1 = shaped.left * boxScale - padding;
-            let x2 = shaped.right * boxScale + padding;
+            // margin is in CSS order: [top, right, bottom, left]
+            let y1 = shaped.top * boxScale - padding[0];
+            let y2 = shaped.bottom * boxScale + padding[2];
+            let x1 = shaped.left * boxScale - padding[3];
+            let x2 = shaped.right * boxScale + padding[1];
 
             const collisionPadding = shaped.collisionPadding;
             if (collisionPadding) {

package/src/symbol/collision_index.ts

@@ -364,7 +364,7 @@ class CollisionIndex {
         }
     }
 
-    projectAndGetPerspectiveRatio(posMatrix: mat4, x: number, y: number, getElevation: (x: number, y: number) => number) {
+    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;

package/src/symbol/get_anchors.test.ts

@@ -32,7 +32,7 @@ describe('getAnchors', () => {
         expect(anchors).toEqual([
             {x: 1, y: 2, angle: 1.5707963267948966, segment: 1},
             {x: 1, y: 5, angle: 1.5707963267948966, segment: 4},
-            {x: 1, y: 8, angle: 1.5707963267948966, segment: 7} ]);
+            {x: 1, y: 8, angle: 1.5707963267948966, segment: 7}]);
 
         expect(
             labelLength / 2 + 1 <= anchors[0].y && anchors[0].y < labelLength / 2 + 3 * glyphSize + 1
@@ -46,7 +46,7 @@ describe('getAnchors', () => {
         expect(anchors).toEqual([
             {x: 1, y: 2, angle: 1.5707963267948966, segment: 1},
             {x: 1, y: 5, angle: 1.5707963267948966, segment: 3},
-            {x: 1, y: 7, angle: 1.5707963267948966, segment: 6} ]);
+            {x: 1, y: 7, angle: 1.5707963267948966, segment: 6}]);
 
     });
 
@@ -56,7 +56,7 @@ describe('getAnchors', () => {
         expect(anchors).toEqual([
             {x: 1, y: 2, angle: 1.5707963267948966, segment: 1},
             {x: 1, y: 5, angle: 1.5707963267948966, segment: 4},
-            {x: 1, y: 8, angle: 1.5707963267948966, segment: 7} ]);
+            {x: 1, y: 8, angle: 1.5707963267948966, segment: 7}]);
 
     });
 
@@ -66,7 +66,7 @@ describe('getAnchors', () => {
         expect(anchors).toEqual([
             {x: 1, y: 1, angle: 1.5707963267948966, segment: 1},
             {x: 1, y: 4, angle: 1.5707963267948966, segment: 3},
-            {x: 1, y: 6, angle: 1.5707963267948966, segment: 6} ]);
+            {x: 1, y: 6, angle: 1.5707963267948966, segment: 6}]);
 
     });
 

package/src/symbol/{mergelines.test.ts → merge_lines.test.ts}

@@ -1,4 +1,4 @@
-import mergeLines from './mergelines';
+import mergeLines from './merge_lines';
 import Point from '@mapbox/point-geometry';
 
 function makeFeatures(lines) {

package/src/symbol/{mergelines.ts → merge_lines.ts}

@@ -1,6 +1,6 @@
 import type {SymbolFeature} from '../data/bucket/symbol_bucket';
 
-export default function(features: Array<SymbolFeature>): Array<SymbolFeature> {
+export default function mergeLines(features: Array<SymbolFeature>): Array<SymbolFeature> {
     const leftIndex: {[_: string]: number} = {};
     const rightIndex: {[_: string]: number} = {};
     const mergedFeatures = [];

package/src/symbol/projection.ts

@@ -101,7 +101,7 @@ function getGlCoordMatrix(posMatrix: mat4,
     }
 }
 
-function project(point: Point, matrix: mat4, getElevation: (x: number, y: number) => number) {
+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;

package/src/symbol/quads.test.ts

@@ -4,7 +4,7 @@ import {getIconQuads} from './quads';
 describe('getIconQuads', () => {
     const image = Object.freeze({
         pixelRatio: 1,
-        displaySize: Object.freeze([ 15, 11 ]),
+        displaySize: Object.freeze([15, 11]),
         paddedRect: Object.freeze({x: 0, y: 0, w: 17, h: 13})
     }) as ImagePosition;
 

package/src/symbol/shaping.ts

@@ -340,16 +340,16 @@ const whitespace: {
 const breakable: {
     [_: number]: boolean;
 } = {
-    [0x0a]:   true, // newline
-    [0x20]:   true, // space
-    [0x26]:   true, // ampersand
-    [0x28]:   true, // left parenthesis
-    [0x29]:   true, // right parenthesis
-    [0x2b]:   true, // plus sign
-    [0x2d]:   true, // hyphen-minus
-    [0x2f]:   true, // solidus
-    [0xad]:   true, // soft hyphen
-    [0xb7]:   true, // middle dot
+    [0x0a]: true, // newline
+    [0x20]: true, // space
+    [0x26]: true, // ampersand
+    [0x28]: true, // left parenthesis
+    [0x29]: true, // right parenthesis
+    [0x2b]: true, // plus sign
+    [0x2d]: true, // hyphen-minus
+    [0x2f]: true, // solidus
+    [0xad]: true, // soft hyphen
+    [0xb7]: true, // middle dot
     [0x200b]: true, // zero-width space
     [0x2010]: true, // hyphen
     [0x2013]: true, // en dash

package/src/symbol/symbol_layout.ts

@@ -30,6 +30,7 @@ import type {PossiblyEvaluatedPropertyValue} from '../style/properties';
 
 import Point from '@mapbox/point-geometry';
 import murmur3 from 'murmurhash-js';
+import {getIconPadding, SymbolPadding} from '../style/style_layer/symbol_style_layer';
 
 // The symbol layout process needs `text-size` evaluated at up to five different zoom levels, and
 // `icon-size` at up to three:
@@ -393,7 +394,7 @@ function addFeature(bucket: SymbolBucket,
         iconBoxScale = bucket.tilePixelRatio * layoutIconSize,
         symbolMinDistance = bucket.tilePixelRatio * layout.get('symbol-spacing'),
         textPadding = layout.get('text-padding') * bucket.tilePixelRatio,
-        iconPadding = layout.get('icon-padding') * bucket.tilePixelRatio,
+        iconPadding = getIconPadding(layout, feature, canonical, bucket.tilePixelRatio),
         textMaxAngle = layout.get('text-max-angle') / 180 * Math.PI,
         textAlongLine = layout.get('text-rotation-alignment') !== 'viewport' && layout.get('symbol-placement') !== 'point',
         iconAlongLine = layout.get('icon-rotation-alignment') === 'map' && layout.get('symbol-placement') !== 'point',
@@ -424,7 +425,7 @@ function addFeature(bucket: SymbolBucket,
 
         addSymbol(bucket, anchor, line, shapedTextOrientations, shapedIcon, imageMap, verticallyShapedIcon, bucket.layers[0],
             bucket.collisionBoxArray, feature.index, feature.sourceLayerIndex, bucket.index,
-            textBoxScale, textPadding, textAlongLine, textOffset,
+            textBoxScale, [textPadding, textPadding, textPadding, textPadding], textAlongLine, textOffset,
             iconBoxScale, iconPadding, iconAlongLine, iconOffset,
             feature, sizes, isSDFIcon, canonical, layoutTextSize);
     };
@@ -583,11 +584,11 @@ function addSymbol(bucket: SymbolBucket,
     sourceLayerIndex: number,
     bucketIndex: number,
     textBoxScale: number,
-    textPadding: number,
+    textPadding: SymbolPadding,
     textAlongLine: boolean,
     textOffset: [number, number],
     iconBoxScale: number,
-    iconPadding: number,
+    iconPadding: SymbolPadding,
     iconAlongLine: boolean,
     iconOffset: [number, number],
     feature: SymbolFeature,

package/src/symbol/symbol_style_layer.test.ts

@@ -67,7 +67,7 @@ describe('hasPaintOverrides', () => {
     });
 
     test('format expression, overriden text-color', () => {
-        const props = {layout: {'text-field': ['format', ['get', 'name'], {'text-color':'red'}]}};
+        const props = {layout: {'text-field': ['format', ['get', 'name'], {'text-color': 'red'}]}};
         const layer = createSymbolLayer(props);
         expect(SymbolStyleLayer.hasPaintOverride(layer.layout, 'text-color')).toBe(true);
 

package/src/symbol/transform_text.ts

@@ -4,7 +4,7 @@ import type SymbolStyleLayer from '../style/style_layer/symbol_style_layer';
 import type {Feature} from '../style-spec/expression';
 import Formatted from '../style-spec/expression/types/formatted';
 
-function transformText(text: string, layer: SymbolStyleLayer, feature: Feature) {
+function transformTextInternal(text: string, layer: SymbolStyleLayer, feature: Feature) {
     const transform = layer.layout.get('text-transform').evaluate(feature, {});
     if (transform === 'uppercase') {
         text = text.toLocaleUpperCase();
@@ -19,9 +19,9 @@ function transformText(text: string, layer: SymbolStyleLayer, feature: Feature)
     return text;
 }
 
-export default function(text: Formatted, layer: SymbolStyleLayer, feature: Feature): Formatted {
+export default function transformText(text: Formatted, layer: SymbolStyleLayer, feature: Feature): Formatted {
     text.sections.forEach(section => {
-        section.text = transformText(section.text, layer, feature);
+        section.text = transformTextInternal(section.text, layer, feature);
     });
     return text;
 }

package/src/ui/camera.test.ts

@@ -926,17 +926,17 @@ describe('#flyTo', () => {
     });
 
     test('does not throw when cameras current zoom is sufficiently greater than passed zoom option', () => {
-        const camera = createCamera({zoom: 22, center:[0, 0]});
-        expect(() => camera.flyTo({zoom:10, center:[0, 0]})).not.toThrow();
+        const camera = createCamera({zoom: 22, center: [0, 0]});
+        expect(() => camera.flyTo({zoom: 10, center: [0, 0]})).not.toThrow();
     });
 
     test('does not throw when cameras current zoom is above maxzoom and an offset creates infinite zoom out factor', () => {
         const transform = new Transform(0, 20.9999, 0, 60, true);
         transform.resize(512, 512);
         const camera = attachSimulateFrame(new CameraMock(transform, {} as any))
-            .jumpTo({zoom: 21, center:[0, 0]});
+            .jumpTo({zoom: 21, center: [0, 0]});
         camera._update = () => {};
-        expect(() => camera.flyTo({zoom:7.5, center:[0, 0], offset:[0, 70]})).not.toThrow();
+        expect(() => camera.flyTo({zoom: 7.5, center: [0, 0], offset: [0, 70]})).not.toThrow();
     });
 
     test('zooms to specified level', () => {
@@ -1798,7 +1798,7 @@ describe('#fitBounds', () => {
     test('no padding passed', () => {
         const camera = createCamera();
         const bb = [[-133, 16], [-68, 50]];
-        camera.fitBounds(bb, {duration:0});
+        camera.fitBounds(bb, {duration: 0});
 
         expect(fixedLngLat(camera.getCenter(), 4)).toEqual({lng: -100.5, lat: 34.7171});
         expect(fixedNum(camera.getZoom(), 3)).toBe(2.469);
@@ -1807,7 +1807,7 @@ describe('#fitBounds', () => {
     test('padding number', () => {
         const camera = createCamera();
         const bb = [[-133, 16], [-68, 50]];
-        camera.fitBounds(bb, {padding: 15, duration:0});
+        camera.fitBounds(bb, {padding: 15, duration: 0});
 
         expect(fixedLngLat(camera.getCenter(), 4)).toEqual({lng: -100.5, lat: 34.7171});
         expect(fixedNum(camera.getZoom(), 3)).toBe(2.382);
@@ -1816,7 +1816,7 @@ describe('#fitBounds', () => {
     test('padding object', () => {
         const camera = createCamera();
         const bb = [[-133, 16], [-68, 50]];
-        camera.fitBounds(bb, {padding: {top: 10, right: 75, bottom: 50, left: 25}, duration:0});
+        camera.fitBounds(bb, {padding: {top: 10, right: 75, bottom: 50, left: 25}, duration: 0});
 
         expect(fixedLngLat(camera.getCenter(), 4)).toEqual({lng: -96.5558, lat: 32.0833});
     });
@@ -1824,7 +1824,7 @@ describe('#fitBounds', () => {
     test('padding does not get propagated to transform.padding', () => {
         const camera = createCamera();
         const bb = [[-133, 16], [-68, 50]];
-        camera.fitBounds(bb, {padding: {top: 10, right: 75, bottom: 50, left: 25}, duration:0});
+        camera.fitBounds(bb, {padding: {top: 10, right: 75, bottom: 50, left: 25}, duration: 0});
         const padding = camera.transform.padding;
 
         expect(padding).toEqual({
@@ -1842,7 +1842,7 @@ describe('#fitScreenCoordinates', () => {
         const p0 = [128, 128];
         const p1 = [256, 256];
         const bearing = 225;
-        camera.fitScreenCoordinates(p0, p1, bearing, {duration:0});
+        camera.fitScreenCoordinates(p0, p1, bearing, {duration: 0});
 
         expect(fixedLngLat(camera.getCenter(), 4)).toEqual({lng: -45, lat: 40.9799});
         expect(fixedNum(camera.getZoom(), 3)).toBe(1.5);
@@ -1854,7 +1854,7 @@ describe('#fitScreenCoordinates', () => {
         const p0 = [128, 128];
         const p1 = [256, 256];
         const bearing = 0;
-        camera.fitScreenCoordinates(p0, p1, bearing, {duration:0});
+        camera.fitScreenCoordinates(p0, p1, bearing, {duration: 0});
 
         expect(fixedLngLat(camera.getCenter(), 4)).toEqual({lng: -45, lat: 40.9799});
         expect(fixedNum(camera.getZoom(), 3)).toBe(2);
@@ -1866,7 +1866,7 @@ describe('#fitScreenCoordinates', () => {
         const p1 = [128, 128];
         const p0 = [256, 256];
         const bearing = 0;
-        camera.fitScreenCoordinates(p0, p1, bearing, {duration:0});
+        camera.fitScreenCoordinates(p0, p1, bearing, {duration: 0});
 
         expect(fixedLngLat(camera.getCenter(), 4)).toEqual({lng: -45, lat: 40.9799});
         expect(fixedNum(camera.getZoom(), 3)).toBe(2);

package/src/ui/control/geolocate_control.ts

@@ -516,7 +516,7 @@ class GeolocateControl extends Evented implements IControl {
                 numberOfWatches++;
                 let positionOptions;
                 if (numberOfWatches > 1) {
-                    positionOptions = {maximumAge:600000, timeout:0};
+                    positionOptions = {maximumAge: 600000, timeout: 0};
                     noTimeout = true;
                 } else {
                     positionOptions = this.options.positionOptions;

package/src/ui/control/terrain_control.ts

@@ -11,14 +11,16 @@ import type {TerrainSpecification} from '../../style-spec/types.g';
  * @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
+ * @param {Object} [options.options]
+ * @param {number} [options.options.elevationOffset]
+ * @param {number} [options.options.exaggeration]
  * @example
  * var map = new maplibregl.Map({TerrainControl: false})
  *     .addControl(new maplibregl.TerrainControl({
  *         source: "terrain"
  *     }));
  */
-class TerrainControl implements IControl {
+export default class TerrainControl implements IControl {
     options: TerrainSpecification;
     _map: Map;
     _container: HTMLElement;
@@ -73,5 +75,3 @@ class TerrainControl implements IControl {
         }
     }
 }
-
-export default TerrainControl;

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

@@ -0,0 +1,167 @@
+import browser from '../../util/browser';
+import Map from '../map';
+import DOM from '../../util/dom';
+import simulate from '../../../test/unit/lib/simulate_interaction';
+import {setMatchMedia, setPerformance, setWebGlContext} from '../../util/test/util';
+
+function createMap() {
+    return new Map({
+        container: DOM.create('div', '', window.document.body),
+        style: {
+            'version': 8,
+            'sources': {},
+            'layers': []
+        },
+        cooperativeGestures: true
+    });
+}
+
+beforeEach(() => {
+    setPerformance();
+    setWebGlContext();
+    setMatchMedia();
+});
+
+describe('CoopGesturesHandler', () => {
+
+    test('Does not zoom on wheel if no key is down', () => {
+        const browserNow = jest.spyOn(browser, 'now');
+        let now = 1555555555555;
+        browserNow.mockReturnValue(now);
+
+        const map = createMap();
+        map._renderTaskQueue.run();
+
+        const startZoom = map.getZoom();
+        // simulate a single 'wheel' event
+        simulate.wheel(map.getCanvas(), {type: 'wheel', deltaY: -simulate.magicWheelZoomDelta});
+        map._renderTaskQueue.run();
+
+        now += 400;
+        browserNow.mockReturnValue(now);
+        map._renderTaskQueue.run();
+
+        const endZoom = map.getZoom();
+        expect(endZoom).toBeCloseTo(startZoom);
+
+        map.remove();
+    });
+
+    test('Zooms on wheel if control key is down', () => {
+        // NOTE: This should pass regardless of whether cooperativeGestures is enabled or not
+        const browserNow = jest.spyOn(browser, 'now');
+        let now = 1555555555555;
+        browserNow.mockReturnValue(now);
+
+        const map = createMap();
+        map._renderTaskQueue.run();
+
+        simulate.keydown(document, {type: 'keydown', key: 'Control'});
+        map._renderTaskQueue.run();
+
+        const startZoom = map.getZoom();
+        // simulate a single 'wheel' event
+        simulate.wheel(map.getCanvas(), {type: 'wheel', deltaY: -simulate.magicWheelZoomDelta});
+        map._renderTaskQueue.run();
+
+        now += 400;
+        browserNow.mockReturnValue(now);
+        map._renderTaskQueue.run();
+
+        const endZoom = map.getZoom();
+        expect(endZoom - startZoom).toBeCloseTo(0.0285, 3);
+
+        map.remove();
+    });
+
+    test('Does not pan on touchmove with a single touch', () => {
+        const map = createMap();
+        const target = map.getCanvas();
+        const startCenter = map.getCenter();
+        map._renderTaskQueue.run();
+
+        const dragstart = jest.fn();
+        const drag      = jest.fn();
+        const dragend   = jest.fn();
+
+        map.on('dragstart', dragstart);
+        map.on('drag',      drag);
+        map.on('dragend',   dragend);
+
+        simulate.touchstart(target, {touches: [{target, clientX: 0, clientY: 0}]});
+        map._renderTaskQueue.run();
+
+        simulate.touchmove(target, {touches: [{target, clientX: 10, clientY: 10}]});
+        map._renderTaskQueue.run();
+
+        simulate.touchend(target);
+        map._renderTaskQueue.run();
+
+        const endCenter = map.getCenter();
+        expect(endCenter.lng).toEqual(startCenter.lng);
+        expect(endCenter.lat).toEqual(startCenter.lat);
+
+        map.remove();
+    });
+
+    test('Does pan on touchmove with a double touch', () => {
+        // NOTE: This should pass regardless of whether cooperativeGestures is enabled or not
+        const map = createMap();
+        const target = map.getCanvas();
+        const startCenter = map.getCenter();
+        map._renderTaskQueue.run();
+
+        const dragstart = jest.fn();
+        const drag      = jest.fn();
+        const dragend   = jest.fn();
+
+        map.on('dragstart', dragstart);
+        map.on('drag',      drag);
+        map.on('dragend',   dragend);
+
+        simulate.touchstart(target, {touches: [{target, clientX: 0, clientY: 0}, {target, clientX: 1, clientY: 1}]});
+        map._renderTaskQueue.run();
+
+        simulate.touchmove(target, {touches: [{target, clientX: 10, clientY: 10}, {target, clientX: 11, clientY: 11}]});
+        map._renderTaskQueue.run();
+
+        simulate.touchend(target);
+        map._renderTaskQueue.run();
+
+        const endCenter = map.getCenter();
+        expect(endCenter.lng).toBeGreaterThan(startCenter.lng);
+        expect(endCenter.lat).toBeGreaterThan(startCenter.lat);
+
+        map.remove();
+    });
+
+    test('Drag pitch works with 3 fingers', () => {
+        // NOTE: This should pass regardless of whether cooperativeGestures is enabled or not
+        const map = createMap();
+        const target = map.getCanvas();
+        const startPitch = map.getPitch();
+        map._renderTaskQueue.run();
+
+        const dragstart = jest.fn();
+        const drag      = jest.fn();
+        const dragend   = jest.fn();
+
+        map.on('dragstart', dragstart);
+        map.on('drag',      drag);
+        map.on('dragend',   dragend);
+
+        simulate.touchstart(target, {touches: [{target, clientX: 0, clientY: 0}, {target, clientX: 1, clientY: 1}, {target, clientX: 2, clientY: 2}]});
+        map._renderTaskQueue.run();
+
+        simulate.touchmove(target, {touches: [{target, clientX: 0, clientY: -10}, {target, clientX: 1, clientY: -11}, {target, clientX: 2, clientY: -12}]});
+        map._renderTaskQueue.run();
+
+        simulate.touchend(target);
+        map._renderTaskQueue.run();
+
+        const endPitch = map.getPitch();
+        expect(endPitch).toBeGreaterThan(startPitch);
+
+        map.remove();
+    });
+});

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

@@ -2,6 +2,7 @@ import DOM from '../../util/dom';
 import simulate from '../../../test/unit/lib/simulate_interaction';
 import {setMatchMedia, setPerformance, setWebGlContext} from '../../util/test/util';
 import Map, {MapOptions} from '../map';
+import type {MapGeoJSONFeature} from '../../util/vectortile_to_geojson';
 
 function createMap(clickTolerance?, dragPan?) {
     return new Map({
@@ -456,7 +457,7 @@ describe('drag_pan', () => {
         const target = map.getCanvas();
 
         jest.spyOn(map, 'getLayer').mockReturnValue(true as any);
-        jest.spyOn(map, 'queryRenderedFeatures').mockReturnValue([{}]);
+        jest.spyOn(map, 'queryRenderedFeatures').mockReturnValue([{} as MapGeoJSONFeature]);
 
         map.on('touchstart', 'point', (e) => {
             e.preventDefault();

package/src/ui/handler/scroll_zoom.ts

@@ -148,6 +148,13 @@ class ScrollZoomHandler {
 
     wheel(e: WheelEvent) {
         if (!this.isEnabled()) return;
+        if (this._map._cooperativeGestures) {
+            if (this._map._metaPress) {
+                e.preventDefault();
+            } else {
+                return;
+            }
+        }
         let value = e.deltaMode === WheelEvent.DOM_DELTA_LINE ? e.deltaY * 40 : e.deltaY;
         const now = browser.now(),
             timeDelta = now - (this._lastWheelEventTime || 0);