update padding approach, add error warnings 🙅

Author: Molly Lloyd

src/ui/camera.js

@@ -342,20 +342,44 @@ class Camera extends Evented {
             };
         }
 
+        if (!util.deepEqual(Object.keys(options.padding).sort((a, b)=> {
+            if (a < b) return -1;
+            if (a > b) return 1;
+            return 0;
+        }), ["bottom", "left", "right", "top"])) {
+            util.warnOnce("options.padding must be a positive number, or an Object with keys 'bottom', 'left', 'right', 'top'");
+            console.log(Object.keys(options.padding).sort((a, b)=> {
+                if (a < b) return -1;
+                if (a > b) return 1;
+                return 0;
+            }));
+            return;
+
+        }
+
         bounds = LngLatBounds.convert(bounds);
 
-        const offset = Point.convert(options.offset),
+        // we separate the passed padding option into two parts, the part that does not affect the map's center
+        // (lateral and vertical padding), and the part that does (paddingOffset). We add the padding offset
+        // to the options `offset` object where it can alter the map's center in the subsequent calls to
+        // `easeTo` and `flyTo`.
+        const paddingOffset = [options.padding.left - options.padding.right, options.padding.top - options.padding.bottom],
+            lateralPadding = Math.min(options.padding.right, options.padding.left),
+            verticalPadding = Math.min(options.padding.top, options.padding.bottom);
+        options.offset = [options.offset[0] + paddingOffset[0], options.offset[1] + paddingOffset[1]];
 
-            paddingOffset = [Math.min(options.padding.right, options.padding.left), Math.min(options.padding.top, options.padding.bottom)],
-            verticalPadding = Math.abs(options.padding.top - options.padding.bottom),
-            lateralPadding = Math.abs(options.padding.right - options.padding.left),
+        const offset = Point.convert(options.offset),
             tr = this.transform,
             nw = tr.project(bounds.getNorthWest()),
             se = tr.project(bounds.getSouthEast()),
             size = se.sub(nw),
             scaleX = (tr.width - lateralPadding * 2 - Math.abs(offset.x) * 2) / size.x,
             scaleY = (tr.height - verticalPadding * 2 - Math.abs(offset.y) * 2) / size.y;
 
+        if (scaleY < 0 || scaleX < 0) {
+            util.warnOnce('Map cannot fit within canvas with the given bounds, padding, and/or offset.');
+            return;
+        }
 
         options.center = tr.unproject(nw.add(se).div(2));
         options.zoom = Math.min(tr.scaleZoom(tr.scale * Math.min(scaleX, scaleY)), options.maxZoom);

test/unit/ui/camera.test.js

@@ -1153,16 +1153,16 @@ test('camera', (t) => {
 
             camera.fitBounds(bb, { padding: 15, duration:0 });
             t.deepEqual(fixedLngLat(camera.getCenter()), { lng: -100.5, lat: 34.717077774 }, 'pans to coordinates based on fitBounds with padding option as number applied');
-            t.equal(fixedNum(camera.getZoom(), 3), 2.064);
+            t.equal(fixedNum(camera.getZoom(), 3), 2.382);
             t.end();
         });
 
         t.test('padding object', (t) => {
             const camera = createCamera();
             const bb = [[-133, 16], [-68, 50]];
 
-            camera.fitBounds(bb, { padding: {north: 10, east: 75, south: 50, west: 25}, duration:0 });
-            t.deepEqual(fixedLngLat(camera.getCenter()), { lng: -82.921875, lat: 22.403743206 }, 'pans to coordinates based on fitBounds with padding option as object applied');
+            camera.fitBounds(bb, { padding: {top: 10, right: 75, bottom: 50, left: 25}, duration:0 });
+            t.deepEqual(fixedLngLat(camera.getCenter()), { lng: -91.522099448, lat: 28.608945184 }, 'pans to coordinates based on fitBounds with padding option as object applied');
             t.end();
         });