account for padding in getBounds (#10386)

* account for padding in getBounds * add debug page * update documentation * lint * add unit test to check that getBounds returns the inset with padding
mapbox · Feb 17, 2021 · 9a08dd4 · 9a08dd4
1 parent 9d90327
commit 9a08dd4
Show file tree

Hide file tree

Showing 5 changed files with 108 additions and 4 deletions.
diff --git a/debug/padding.html b/debug/padding.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Mapbox GL JS debug page</title>
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
+    <link rel='stylesheet' href='../dist/mapbox-gl.css' />
+    <style>
+        body { margin: 0; padding: 0; }
+        html, body, #map { height: 100%; }
+        #getBounds { position: absolute; top: 0; left; 0; }
+        #setBounds { position: absolute; top: 0; left: 78px; }
+    </style>
+</head>
+
+<body>
+<div id='map'></div>
+<button id="getBounds">getBounds</button>
+<button id="setBounds">setBounds</button>
+
+<script src='../dist/mapbox-gl-dev.js'></script>
+<script src='../debug/access_token_generated.js'></script>
+<script>
+
+var map = window.map = new mapboxgl.Map({
+    container: 'map',
+    zoom: 12.5,
+    center: [-122.4194, 37.7749],
+    style: 'mapbox://styles/mapbox/streets-v10',
+    hash: true
+});
+
+map.setPadding({
+    left: 400,
+    top: 50,
+    right: 50,
+    bottom: 50
+});
+map.showPadding = true;
+
+map.on('load', function () {
+    map.addSource('bounds', {
+        type: 'geojson',
+        data: {
+            type: 'FeatureCollection',
+            features: []
+        }
+    });
+    map.addLayer({
+        type: 'line',
+        id: 'bounds',
+        source: 'bounds',
+        paint: {
+            'line-width': 10
+        }
+    });
+});
+
+var bounds;
+document.getElementById('getBounds').addEventListener('click', function () {
+    bounds = map.getBounds();
+    map.getSource('bounds').setData({
+        type: 'Feature',
+        properties: {},
+        geometry: {
+            type: 'Polygon',
+            coordinates: [[
+                bounds.getNorthEast().toArray(),
+                bounds.getSouthEast().toArray(),
+                bounds.getSouthWest().toArray(),
+                bounds.getNorthWest().toArray(),
+                bounds.getNorthEast().toArray()
+            ]]
+        }
+    });
+});
+document.getElementById('setBounds').addEventListener('click', function () {
+    map.fitBounds(bounds, {
+        duration: 0
+    });
+});
+</script>
+</body>
+</html>
diff --git a/src/geo/transform.js b/src/geo/transform.js
@@ -984,10 +984,10 @@ class Transform {
     getBounds(): LngLatBounds {
         if (this._terrainEnabled()) return this._getBounds3D();
         return new LngLatBounds()
-            .extend(this.pointLocation(new Point(0, 0)))
-            .extend(this.pointLocation(new Point(this.width, 0)))
-            .extend(this.pointLocation(new Point(this.width, this.height)))
-            .extend(this.pointLocation(new Point(0, this.height)));
+            .extend(this.pointLocation(new Point(this._edgeInsets.left, this._edgeInsets.top)))
+            .extend(this.pointLocation(new Point(this.width - this._edgeInsets.right, this._edgeInsets.top)))
+            .extend(this.pointLocation(new Point(this.width - this._edgeInsets.right, this.height - this._edgeInsets.bottom)))
+            .extend(this.pointLocation(new Point(this._edgeInsets.left, this.height - this._edgeInsets.bottom)));
     }
 
     _getBounds3D(): LngLatBounds {

diff --git a/src/ui/camera.js b/src/ui/camera.js
@@ -703,6 +703,7 @@ class Camera extends Evented {
     /**
      * Pans and zooms the map to contain its visible area within the specified geographical bounds.
      * This function will also reset the map's bearing to 0 if bearing is nonzero.
+     * If a padding is set on the map, the bounds are fit to the inset.
      *
      * @memberof Map#
      * @param bounds Center these bounds in the viewport and use the highest

diff --git a/src/ui/map.js b/src/ui/map.js
@@ -638,6 +638,7 @@ class Map extends Camera {
     /**
      * Returns the map's geographical bounds. When the bearing or pitch is non-zero, the visible region is not
      * an axis-aligned rectangle, and the result is the smallest bounds that encompasses the visible region.
+     * If a padding is set on the map, the bounds returned are for the inset.
      * @returns {LngLatBounds} The geographical bounds of the map as {@link LngLatBounds}.
      * @example
      * var bounds = map.getBounds();

diff --git a/test/unit/ui/map.test.js b/test/unit/ui/map.test.js
@@ -702,6 +702,24 @@ test('Map', (t) => {
             t.end();
         });
 
+        t.test('padded bounds', (t) => {
+            const map = createMap(t, {zoom: 1, bearing: 45, skipCSSStub: true, skipAuthenticateStub: true});
+
+            map.setPadding({
+                left: 100,
+                right: 10,
+                top: 10,
+                bottom: 10
+            });
+
+            t.deepEqual(
+                toFixed([[-33.5599507477, -31.7907658998], [33.5599507477, 31.7907658998]]),
+                toFixed(map.getBounds().toArray())
+            );
+
+            t.end();
+        });
+
         t.end();
 
         function toFixed(bounds) {