maplibre-gl 2.0.2 → 2.1.0

package/src/symbol/placement.ts

@@ -1,4 +1,5 @@
 import CollisionIndex from './collision_index';
+import type {FeatureKey} from './collision_index';
 import EXTENT from '../data/extent';
 import * as symbolSize from './symbol_size';
 import * as projection from './projection';
@@ -7,11 +8,12 @@ import {getAnchorAlignment, WritingMode} from './shaping';
 import {mat4} from 'gl-matrix';
 import assert from 'assert';
 import pixelsToTileUnits from '../source/pixels_to_tile_units';
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 import type Transform from '../geo/transform';
 import type StyleLayer from '../style/style_layer';
 import {PossiblyEvaluated} from '../style/properties';
 import type {SymbolLayoutProps, SymbolLayoutPropsPossiblyEvaluated} from '../style/style_layer/symbol_style_layer_properties';
+import {getOverlapMode, OverlapMode} from '../style/style_layer/symbol_style_layer';
 
 import type Tile from '../source/tile';
 import SymbolBucket, {CollisionArrays, SingleCollisionBox} from '../data/bucket/symbol_bucket';
@@ -99,7 +101,7 @@ export class RetainedQueryData {
 
 type CollisionGroup = {
   ID: number;
-  predicate?: any;
+  predicate?: (key: FeatureKey) => boolean;
 };
 
 class CollisionGroups {
@@ -181,20 +183,20 @@ export type VariableOffset = {
 };
 
 type TileLayerParameters = {
-    bucket: SymbolBucket;
-    layout: PossiblyEvaluated<SymbolLayoutProps, SymbolLayoutPropsPossiblyEvaluated>;
-    posMatrix: mat4;
-    textLabelPlaneMatrix: mat4;
-    labelToScreenMatrix: mat4;
-    scale: number;
-    textPixelRatio: number;
-    holdingForFade: boolean;
-    collisionBoxArray: CollisionBoxArray;
-    partiallyEvaluatedTextSize: {
-        uSize: number;
-        uSizeT: number;
-    };
-    collisionGroup: CollisionGroup;
+  bucket: SymbolBucket;
+  layout: PossiblyEvaluated<SymbolLayoutProps, SymbolLayoutPropsPossiblyEvaluated>;
+  posMatrix: mat4;
+  textLabelPlaneMatrix: mat4;
+  labelToScreenMatrix: mat4;
+  scale: number;
+  textPixelRatio: number;
+  holdingForFade: boolean;
+  collisionBoxArray: CollisionBoxArray;
+  partiallyEvaluatedTextSize: {
+    uSize: number;
+    uSizeT: number;
+  };
+  collisionGroup: CollisionGroup;
 };
 
 export type BucketPart = {
@@ -344,7 +346,7 @@ export class Placement {
       textPixelRatio: number,
       posMatrix: mat4,
       collisionGroup: CollisionGroup,
-      textAllowOverlap: boolean,
+      textOverlapMode: OverlapMode,
       symbolInstance: SymbolInstance,
       bucket: SymbolBucket,
       orientation: number,
@@ -364,14 +366,14 @@ export class Placement {
             shiftVariableCollisionBox(
                 textBox, shift.x, shift.y,
                 rotateWithMap, pitchWithMap, this.transform.angle),
-            textAllowOverlap, textPixelRatio, posMatrix, collisionGroup.predicate);
+            textOverlapMode, textPixelRatio, posMatrix, collisionGroup.predicate);
 
         if (iconBox) {
             const placedIconBoxes = this.collisionIndex.placeCollisionBox(
                 shiftVariableCollisionBox(
                     iconBox, shift.x, shift.y,
                     rotateWithMap, pitchWithMap, this.transform.angle),
-                textAllowOverlap, textPixelRatio, posMatrix, collisionGroup.predicate);
+                textOverlapMode, textPixelRatio, posMatrix, collisionGroup.predicate);
             if (placedIconBoxes.box.length === 0) return;
         }
 
@@ -424,8 +426,10 @@ export class Placement {
 
         const textOptional = layout.get('text-optional');
         const iconOptional = layout.get('icon-optional');
-        const textAllowOverlap = layout.get('text-allow-overlap');
-        const iconAllowOverlap = layout.get('icon-allow-overlap');
+        const textOverlapMode = getOverlapMode(layout, 'text-overlap', 'text-allow-overlap');
+        const textAlwaysOverlap = textOverlapMode === 'always';
+        const iconOverlapMode = getOverlapMode(layout, 'icon-overlap', 'icon-allow-overlap');
+        const iconAlwaysOverlap = iconOverlapMode === 'always';
         const rotateWithMap = layout.get('text-rotation-alignment') === 'map';
         const pitchWithMap = layout.get('text-pitch-alignment') === 'map';
         const hasIconTextFit = layout.get('icon-text-fit') !== 'none';
@@ -445,8 +449,8 @@ export class Placement {
         //  This is the reverse of our normal policy of "fade in on pan", but should look like any other
         //  collision and hopefully not be too noticeable.
         // See https://github.com/mapbox/mapbox-gl-js/issues/7172
-        const alwaysShowText = textAllowOverlap && (iconAllowOverlap || !bucket.hasIconData() || iconOptional);
-        const alwaysShowIcon = iconAllowOverlap && (textAllowOverlap || !bucket.hasTextData() || textOptional);
+        const alwaysShowText = textAlwaysOverlap && (iconAlwaysOverlap || !bucket.hasIconData() || iconOptional);
+        const alwaysShowIcon = iconAlwaysOverlap && (textAlwaysOverlap || !bucket.hasTextData() || textOptional);
 
         if (!bucket.collisionArrays && collisionBoxArray) {
             bucket.deserializeCollisionBoxes(collisionBoxArray);
@@ -519,8 +523,12 @@ export class Placement {
 
                 if (!layout.get('text-variable-anchor')) {
                     const placeBox = (collisionTextBox, orientation) => {
-                        const placedFeature = this.collisionIndex.placeCollisionBox(collisionTextBox, textAllowOverlap,
-                                                                                  textPixelRatio, posMatrix, collisionGroup.predicate);
+                        const placedFeature = this.collisionIndex.placeCollisionBox(
+                            collisionTextBox,
+                            textOverlapMode,
+                            textPixelRatio,
+                            posMatrix,
+                            collisionGroup.predicate);
                         if (placedFeature && placedFeature.box && placedFeature.box.length) {
                             this.markUsedOrientation(bucket, orientation, symbolInstance);
                             this.placedOrientations[symbolInstance.crossTileID] = orientation;
@@ -562,20 +570,20 @@ export class Placement {
                         const height = collisionTextBox.y2 - collisionTextBox.y1;
                         const textBoxScale = symbolInstance.textBoxScale;
 
-                        const variableIconBox = hasIconTextFit && !iconAllowOverlap ? collisionIconBox : null;
+                        const variableIconBox = hasIconTextFit && (iconOverlapMode === 'never') ? collisionIconBox : null;
 
                         let placedBox: {
                           box: Array<number>;
                           offscreen: boolean;
                         } = {box: [], offscreen: false};
-                        const placementAttempts = textAllowOverlap ? anchors.length * 2 : anchors.length;
+                        const placementAttempts = (textOverlapMode !== 'never') ? anchors.length * 2 : anchors.length;
                         for (let i = 0; i < placementAttempts; ++i) {
                             const anchor = anchors[i % anchors.length];
-                            const allowOverlap = (i >= anchors.length);
+                            const overlapMode = (i >= anchors.length) ? textOverlapMode : 'never';
                             const result = this.attemptAnchorPlacement(
                                 anchor, collisionTextBox, width, height,
                                 textBoxScale, rotateWithMap, pitchWithMap, textPixelRatio, posMatrix,
-                                collisionGroup, allowOverlap, symbolInstance, bucket, orientation, variableIconBox);
+                                collisionGroup, overlapMode, symbolInstance, bucket, orientation, variableIconBox);
 
                             if (result) {
                                 placedBox = result.placedGlyphBoxes;
@@ -637,26 +645,27 @@ export class Placement {
                 const textPixelPadding = layout.get('text-padding');
                 const circlePixelDiameter = symbolInstance.collisionCircleDiameter;
 
-                placedGlyphCircles = this.collisionIndex.placeCollisionCircles(textAllowOverlap,
-                        placedSymbol,
-                        bucket.lineVertexArray,
-                        bucket.glyphOffsetArray,
-                        fontSize,
-                        posMatrix,
-                        textLabelPlaneMatrix,
-                        labelToScreenMatrix,
-                        showCollisionBoxes,
-                        pitchWithMap,
-                        collisionGroup.predicate,
-                        circlePixelDiameter,
-                        textPixelPadding);
+                placedGlyphCircles = this.collisionIndex.placeCollisionCircles(
+                    textOverlapMode,
+                    placedSymbol,
+                    bucket.lineVertexArray,
+                    bucket.glyphOffsetArray,
+                    fontSize,
+                    posMatrix,
+                    textLabelPlaneMatrix,
+                    labelToScreenMatrix,
+                    showCollisionBoxes,
+                    pitchWithMap,
+                    collisionGroup.predicate,
+                    circlePixelDiameter,
+                    textPixelPadding);
 
                 assert(!placedGlyphCircles.circles.length || (!placedGlyphCircles.collisionDetected || showCollisionBoxes));
-                // If text-allow-overlap is set, force "placedCircles" to true
+                // If text-overlap is set to 'always', force "placedCircles" to true
                 // In theory there should always be at least one circle placed
                 // in this case, but for now quirks in text-anchor
                 // and text-offset may prevent that from being true.
-                placeText = textAllowOverlap || (placedGlyphCircles.circles.length > 0 && !placedGlyphCircles.collisionDetected);
+                placeText = textAlwaysOverlap || (placedGlyphCircles.circles.length > 0 && !placedGlyphCircles.collisionDetected);
                 offscreen = offscreen && placedGlyphCircles.offscreen;
             }
 
@@ -673,7 +682,7 @@ export class Placement {
                             rotateWithMap, pitchWithMap, this.transform.angle) :
                         iconBox;
                     return this.collisionIndex.placeCollisionBox(shiftedIconBox,
-                        iconAllowOverlap, textPixelRatio, posMatrix, collisionGroup.predicate);
+                        iconOverlapMode, textPixelRatio, posMatrix, collisionGroup.predicate);
                 };
 
                 if (placedVerticalText && placedVerticalText.box && placedVerticalText.box.length && collisionArrays.verticalIconBox) {
@@ -701,22 +710,42 @@ export class Placement {
 
             if (placeText && placedGlyphBoxes && placedGlyphBoxes.box) {
                 if (placedVerticalText && placedVerticalText.box && verticalTextFeatureIndex) {
-                    this.collisionIndex.insertCollisionBox(placedGlyphBoxes.box, layout.get('text-ignore-placement'),
-                        bucket.bucketInstanceId, verticalTextFeatureIndex, collisionGroup.ID);
+                    this.collisionIndex.insertCollisionBox(
+                        placedGlyphBoxes.box,
+                        textOverlapMode,
+                        layout.get('text-ignore-placement'),
+                        bucket.bucketInstanceId,
+                        verticalTextFeatureIndex,
+                        collisionGroup.ID);
                 } else {
-                    this.collisionIndex.insertCollisionBox(placedGlyphBoxes.box, layout.get('text-ignore-placement'),
-                        bucket.bucketInstanceId, textFeatureIndex, collisionGroup.ID);
+                    this.collisionIndex.insertCollisionBox(
+                        placedGlyphBoxes.box,
+                        textOverlapMode,
+                        layout.get('text-ignore-placement'),
+                        bucket.bucketInstanceId,
+                        textFeatureIndex,
+                        collisionGroup.ID);
                 }
 
             }
             if (placeIcon && placedIconBoxes) {
-                this.collisionIndex.insertCollisionBox(placedIconBoxes.box, layout.get('icon-ignore-placement'),
-                        bucket.bucketInstanceId, iconFeatureIndex, collisionGroup.ID);
+                this.collisionIndex.insertCollisionBox(
+                    placedIconBoxes.box,
+                    iconOverlapMode,
+                    layout.get('icon-ignore-placement'),
+                    bucket.bucketInstanceId,
+                    iconFeatureIndex,
+                    collisionGroup.ID);
             }
             if (placedGlyphCircles) {
                 if (placeText) {
-                    this.collisionIndex.insertCollisionCircles(placedGlyphCircles.circles, layout.get('text-ignore-placement'),
-                        bucket.bucketInstanceId, textFeatureIndex, collisionGroup.ID);
+                    this.collisionIndex.insertCollisionCircles(
+                        placedGlyphCircles.circles,
+                        textOverlapMode,
+                        layout.get('text-ignore-placement'),
+                        bucket.bucketInstanceId,
+                        textFeatureIndex,
+                        collisionGroup.ID);
                 }
 
                 if (showCollisionBoxes) {
@@ -887,7 +916,7 @@ export class Placement {
     updateLayerOpacities(styleLayer: StyleLayer, tiles: Array<Tile>) {
         const seenCrossTileIDs = {};
         for (const tile of tiles) {
-            const symbolBucket = (tile.getBucket(styleLayer) as SymbolBucket);
+            const symbolBucket = tile.getBucket(styleLayer) as SymbolBucket;
             if (symbolBucket && tile.latestFeatureIndex && styleLayer.id === symbolBucket.layerIds[0]) {
                 this.updateBucketOpacities(symbolBucket, seenCrossTileIDs, tile.collisionBoxArray);
             }

package/src/symbol/projection.ts

@@ -1,4 +1,4 @@
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 
 import {mat4, vec4} from 'gl-matrix';
 import * as symbolSize from './symbol_size';

package/src/symbol/quads.ts

@@ -1,4 +1,4 @@
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 
 import {GLYPH_PBF_BORDER} from '../style/parse_glyph_pbf';
 

package/src/symbol/symbol_layout.ts

@@ -28,7 +28,7 @@ import type {ImagePosition} from '../render/image_atlas';
 import type {GlyphPosition} from '../render/glyph_atlas';
 import type {PossiblyEvaluatedPropertyValue} from '../style/properties';
 
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 import murmur3 from 'murmurhash-js';
 
 // The symbol layout process needs `text-size` evaluated at up to five different zoom levels, and

package/src/symbol/symbol_style_layer.test.ts

@@ -1,4 +1,4 @@
-import SymbolStyleLayer from '../style/style_layer/symbol_style_layer';
+import SymbolStyleLayer, {getOverlapMode} from '../style/style_layer/symbol_style_layer';
 import FormatSectionOverride from '../style/format_section_override';
 import properties, {SymbolPaintPropsPossiblyEvaluated} from '../style/style_layer/symbol_style_layer_properties';
 import ZoomHistory from '../style/zoom_history';
@@ -101,3 +101,50 @@ describe('hasPaintOverrides', () => {
     });
 
 });
+
+describe('getOverlapMode', () => {
+    test('defaults - no props set', () => {
+        const props = {};
+        const layer = createSymbolLayer(props);
+
+        expect(getOverlapMode(layer.layout, 'icon-overlap', 'icon-allow-overlap')).toBe('never');
+        expect(getOverlapMode(layer.layout, 'text-overlap', 'text-allow-overlap')).toBe('never');
+    });
+
+    test('-allow-overlap set', () => {
+        const props = {layout: {'icon-allow-overlap': false, 'text-allow-overlap': true}};
+        const layer = createSymbolLayer(props);
+
+        expect(getOverlapMode(layer.layout, 'icon-overlap', 'icon-allow-overlap')).toBe('never');
+        expect(getOverlapMode(layer.layout, 'text-overlap', 'text-allow-overlap')).toBe('always');
+    });
+
+    test('-overlap set', () => {
+        let props = {layout: {'icon-overlap': 'never', 'text-overlap': 'always'}};
+        let layer = createSymbolLayer(props);
+
+        expect(getOverlapMode(layer.layout, 'icon-overlap', 'icon-allow-overlap')).toBe('never');
+        expect(getOverlapMode(layer.layout, 'text-overlap', 'text-allow-overlap')).toBe('always');
+
+        props = {layout: {'icon-overlap': 'always', 'text-overlap': 'cooperative'}};
+        layer = createSymbolLayer(props);
+
+        expect(getOverlapMode(layer.layout, 'icon-overlap', 'icon-allow-overlap')).toBe('always');
+        expect(getOverlapMode(layer.layout, 'text-overlap', 'text-allow-overlap')).toBe('cooperative');
+    });
+
+    test('-overlap beats -allow-overlap', () => {
+        const props = {
+            layout: {
+                'icon-overlap': 'never',
+                'icon-allow-overlap': true,
+                'text-overlap': 'cooperative',
+                'text-allow-overlap': false
+            }
+        };
+        const layer = createSymbolLayer(props);
+
+        expect(getOverlapMode(layer.layout, 'icon-overlap', 'icon-allow-overlap')).toBe('never');
+        expect(getOverlapMode(layer.layout, 'text-overlap', 'text-allow-overlap')).toBe('cooperative');
+    });
+});

package/src/ui/camera.test.ts

@@ -1777,14 +1777,6 @@ describe('#cameraForBounds', () => {
         expect(fixedLngLat(transform.center, 4)).toEqual({lng: -100.5, lat: 44.4717});
     });
 
-    test('offset as object', () => {
-        const camera = createCamera();
-        const bb = [[-133, 16], [-68, 50]];
-        const transform = camera.cameraForBounds(bb, {offset: {x: 0, y: 100}});
-
-        expect(fixedLngLat(transform.center, 4)).toEqual({lng: -100.5, lat: 44.4717});
-    });
-
     test('offset and padding', () => {
         const camera = createCamera();
         const bb = [[-133, 16], [-68, 50]];

package/src/ui/camera.ts

@@ -3,7 +3,7 @@ import {number as interpolate} from '../style-spec/util/interpolate';
 import browser from '../util/browser';
 import LngLat from '../geo/lng_lat';
 import LngLatBounds from '../geo/lng_lat_bounds';
-import Point, {PointLike} from '../util/point';
+import Point from '@mapbox/point-geometry';
 import {Event, Evented} from '../util/evented';
 import assert from 'assert';
 import {Debug} from '../util/debug';
@@ -14,6 +14,16 @@ import type {LngLatBoundsLike} from '../geo/lng_lat_bounds';
 import type {TaskID} from '../util/task_queue';
 import type {PaddingOptions} from '../geo/edge_insets';
 
+/**
+ * A [Point](https://github.com/mapbox/point-geometry) or an array of two numbers representing `x` and `y` screen coordinates in pixels.
+ *
+ * @typedef {(Point | [number, number])} PointLike
+ * @example
+ * var p1 = new Point(-77, 38); // a PointLike which is a Point
+ * var p2 = [-77, 38]; // a PointLike which is an array of two numbers
+ */
+export type PointLike = Point | [number, number];
+
 export type RequireAtLeastOne<T> = { [K in keyof T]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<keyof T, K>>>; }[keyof T];
 
 /**
@@ -599,7 +609,7 @@ abstract class Camera extends Evented {
      * @memberof Map#
      * @param bounds Center these bounds in the viewport and use the highest
      *      zoom level up to and including `Map#getMaxZoom()` that fits them in the viewport.
-     * @param {Object} [options] Options supports all properties from {@link AnimationOptions} and {@link CameraOptions} in addition to the fields below.
+     * @param {FitBoundsOptions} [options] Options supports all properties from {@link AnimationOptions} and {@link CameraOptions} in addition to the fields below.
      * @param {number | PaddingOptions} [options.padding] The amount of padding in pixels to add to the given bounds.
      * @param {boolean} [options.linear=false] If `true`, the map transitions using
      *     {@link Map#easeTo}. If `false`, the map transitions using {@link Map#flyTo}. See
@@ -955,7 +965,7 @@ abstract class Camera extends Evented {
      * unless 'options' includes `essential: true`.
      *
      * @memberof Map#
-     * @param {Object} options Options describing the destination and animation of the transition.
+     * @param {FlyToOptions} options Options describing the destination and animation of the transition.
      *     Accepts {@link CameraOptions}, {@link AnimationOptions},
      *     and the following additional options.
      * @param {number} [options.curve=1.42] The zooming "curve" that will occur along the

package/src/ui/control/navigation_control.ts

@@ -1,4 +1,4 @@
-import Point from '../../util/point';
+import Point from '@mapbox/point-geometry';
 
 import DOM from '../../util/dom';
 import {extend, bindAll} from '../../util/util';

package/src/ui/events.ts

@@ -1,7 +1,7 @@
 import {Event} from '../util/evented';
 
 import DOM from '../util/dom';
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 import {extend} from '../util/util';
 
 import type Map from './map';

package/src/ui/handler/box_zoom.ts

@@ -3,7 +3,7 @@ import DOM from '../../util/dom';
 import {Event} from '../../util/evented';
 
 import type Map from '../map';
-import type Point from '../../util/point';
+import type Point from '@mapbox/point-geometry';
 
 /**
  * The `BoxZoomHandler` allows the user to zoom the map to fit within a bounding box.

package/src/ui/handler/click_zoom.ts

@@ -1,4 +1,4 @@
-import type Point from '../../util/point';
+import type Point from '@mapbox/point-geometry';
 import type Map from '../map';
 
 export default class ClickZoomHandler {

package/src/ui/handler/handler_util.ts

@@ -1,5 +1,5 @@
 import assert from 'assert';
-import Point from '../../util/point';
+import Point from '@mapbox/point-geometry';
 
 export function indexTouches(touches: Array<Touch>, points: Array<Point>) {
     assert(touches.length === points.length);

package/src/ui/handler/map_event.ts

@@ -1,7 +1,7 @@
 import {MapMouseEvent, MapTouchEvent, MapWheelEvent} from '../events';
 import {Handler} from '../handler_manager';
 import type Map from '../map';
-import type Point from '../../util/point';
+import type Point from '@mapbox/point-geometry';
 
 export class MapEventHandler implements Handler {
 

package/src/ui/handler/mouse.ts

@@ -1,5 +1,5 @@
 import DOM from '../../util/dom';
-import type Point from '../../util/point';
+import type Point from '@mapbox/point-geometry';
 
 const LEFT_BUTTON = 0;
 const RIGHT_BUTTON = 2;

package/src/ui/handler/scroll_zoom.ts

@@ -8,7 +8,7 @@ import LngLat from '../../geo/lng_lat';
 
 import type Map from '../map';
 import type HandlerManager from '../handler_manager';
-import type Point from '../../util/point';
+import type Point from '@mapbox/point-geometry';
 
 // deltaY value for mouse scroll wheel identification
 const wheelZoomDelta = 4.000244140625;

package/src/ui/handler/tap_drag_zoom.ts

@@ -1,5 +1,5 @@
 import {TapRecognizer, MAX_TAP_INTERVAL} from './tap_recognizer';
-import type Point from '../../util/point';
+import type Point from '@mapbox/point-geometry';
 
 export default class TapDragZoomHandler {
 

package/src/ui/handler/tap_recognizer.ts

@@ -1,4 +1,4 @@
-import Point from '../../util/point';
+import Point from '@mapbox/point-geometry';
 import {indexTouches} from './handler_util';
 
 function getCentroid(points: Array<Point>) {

package/src/ui/handler/tap_zoom.ts

@@ -1,5 +1,5 @@
 import {TapRecognizer} from './tap_recognizer';
-import type Point from '../../util/point';
+import type Point from '@mapbox/point-geometry';
 import type Map from '../map';
 
 export default class TapZoomHandler {

package/src/ui/handler/touch_pan.ts

@@ -1,4 +1,4 @@
-import Point from '../../util/point';
+import Point from '@mapbox/point-geometry';
 import {indexTouches} from './handler_util';
 
 export default class TouchPanHandler {

package/src/ui/handler/touch_zoom_rotate.ts

@@ -1,4 +1,4 @@
-import Point from '../../util/point';
+import Point from '@mapbox/point-geometry';
 import DOM from '../../util/dom';
 
 class TwoTouchHandler {

package/src/ui/handler_inertia.ts

@@ -1,7 +1,7 @@
 import browser from '../util/browser';
 import type Map from './map';
 import {bezier, clamp, extend} from '../util/util';
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 import type {DragPanOptions} from './handler/shim/drag_pan';
 
 const defaultInertiaOptions = {

package/src/ui/handler_manager.ts

@@ -17,7 +17,7 @@ import DragPanHandler from './handler/shim/drag_pan';
 import DragRotateHandler from './handler/shim/drag_rotate';
 import TouchZoomRotateHandler from './handler/shim/touch_zoom_rotate';
 import {bindAll, extend} from '../util/util';
-import Point from '../util/point';
+import Point from '@mapbox/point-geometry';
 import assert from 'assert';
 
 export type InputEvent = MouseEvent | TouchEvent | KeyboardEvent | WheelEvent;

package/src/ui/map.test.ts

@@ -2048,6 +2048,67 @@ describe('Map', () => {
         });
     });
 
+    describe('setPixelRatio', () => {
+        test('resizes canvas', () => {
+            const container = window.document.createElement('div');
+            Object.defineProperty(container, 'clientWidth', {value: 512});
+            Object.defineProperty(container, 'clientHeight', {value: 512});
+            const map = createMap({container, pixelRatio: 1});
+            expect(map.getCanvas().width).toBe(512);
+            expect(map.getCanvas().height).toBe(512);
+            map.setPixelRatio(2);
+            expect(map.getCanvas().width).toBe(1024);
+            expect(map.getCanvas().height).toBe(1024);
+        });
+
+        test('resizes painter', () => {
+            const container = window.document.createElement('div');
+            Object.defineProperty(container, 'clientWidth', {value: 512});
+            Object.defineProperty(container, 'clientHeight', {value: 512});
+            const map = createMap({container, pixelRatio: 1});
+            expect(map.painter.pixelRatio).toBe(1);
+            expect(map.painter.width).toBe(512);
+            expect(map.painter.height).toBe(512);
+            map.setPixelRatio(2);
+            expect(map.painter.pixelRatio).toBe(2);
+            expect(map.painter.width).toBe(1024);
+            expect(map.painter.height).toBe(1024);
+        });
+    });
+
+    describe('getPixelRatio', () => {
+        test('returns the pixel ratio', () => {
+            const map = createMap({pixelRatio: 1});
+            expect(map.getPixelRatio()).toBe(1);
+            map.setPixelRatio(2);
+            expect(map.getPixelRatio()).toBe(2);
+        });
+    });
+
+    test('pixel ratio defaults to devicePixelRatio', () => {
+        const map = createMap();
+        expect(map.getPixelRatio()).toBe(devicePixelRatio);
+    });
+
+    test('canvas has the expected size', () => {
+        const container = window.document.createElement('div');
+        Object.defineProperty(container, 'clientWidth', {value: 512});
+        Object.defineProperty(container, 'clientHeight', {value: 512});
+        const map = createMap({container, pixelRatio: 2});
+        expect(map.getCanvas().width).toBe(1024);
+        expect(map.getCanvas().height).toBe(1024);
+    });
+
+    test('painter has the expected size and pixel ratio', () => {
+        const container = window.document.createElement('div');
+        Object.defineProperty(container, 'clientWidth', {value: 512});
+        Object.defineProperty(container, 'clientHeight', {value: 512});
+        const map = createMap({container, pixelRatio: 2});
+        expect(map.painter.pixelRatio).toBe(2);
+        expect(map.painter.width).toBe(1024);
+        expect(map.painter.height).toBe(1024);
+    });
+
 });
 
 function createStyle() {