Merge pull request #6339 from plotly/mapbox-bounds

Add bounds to mapbox subplot

Author: archmoj

draftlogs/6339_add.md

@@ -0,0 +1 @@
+ - Add bounds to mapbox suplots [[6339](https://github.com/plotly/plotly.js/pull/6339)]

src/plots/mapbox/layout_attributes.js

@@ -95,6 +95,37 @@ var attrs = module.exports = overrideAll({
         ].join(' ')
     },
 
+    bounds: {
+        west: {
+            valType: 'number',
+            description: [
+                'Sets the minimum longitude of the map (in degrees East)',
+                'if `east`, `south` and `north` are declared.'
+            ].join(' ')
+        },
+        east: {
+            valType: 'number',
+            description: [
+                'Sets the maximum longitude of the map (in degrees East)',
+                'if `west`, `south` and `north` are declared.'
+            ].join(' ')
+        },
+        south: {
+            valType: 'number',
+            description: [
+                'Sets the minimum latitude of the map (in degrees North)',
+                'if `east`, `west` and `north` are declared.'
+            ].join(' ')
+        },
+        north: {
+            valType: 'number',
+            description: [
+                'Sets the maximum latitude of the map (in degrees North)',
+                'if `east`, `west` and `south` are declared.'
+            ].join(' ')
+        }
+    },
+
     layers: templatedArray('layer', {
         visible: {
             valType: 'boolean',

src/plots/mapbox/layout_defaults.js

@@ -26,6 +26,19 @@ function handleDefaults(containerIn, containerOut, coerce, opts) {
     coerce('bearing');
     coerce('pitch');
 
+    var west = coerce('bounds.west');
+    var east = coerce('bounds.east');
+    var south = coerce('bounds.south');
+    var north = coerce('bounds.north');
+    if(
+        west === undefined ||
+        east === undefined ||
+        south === undefined ||
+        north === undefined
+    ) {
+        delete containerOut.bounds;
+    }
+
     handleArrayContainerDefaults(containerIn, containerOut, {
         name: 'layers',
         handleItemDefaults: handleLayerDefaults

src/plots/mapbox/mapbox.js

@@ -91,6 +91,9 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
     // store access token associated with this map
     self.accessToken = opts.accesstoken;
 
+    var bounds = opts.bounds;
+    var maxBounds = bounds ? [[bounds.west, bounds.south], [bounds.east, bounds.north]] : null;
+
     // create the map!
     var map = self.map = new mapboxgl.Map({
         container: self.div,
@@ -100,6 +103,7 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
         zoom: opts.zoom,
         bearing: opts.bearing,
         pitch: opts.pitch,
+        maxBounds: maxBounds,
 
         interactive: !self.isStatic,
         preserveDrawingBuffer: self.isStatic,

test/image/baselines/mapbox_bubbles-text.png

@@ -39,6 +39,12 @@
   ],
   "layout": {
     "mapbox": {
+      "bounds": {
+        "west": -60,
+        "east": 60,
+        "south": -30,
+        "north": 30
+      },
       "style": "light",
       "zoom": 2.5,
       "center": {

test/image/mocks/mapbox_bubbles-text.json

@@ -1862,6 +1862,9 @@ describe('Test select box and lasso per trace:', function() {
             fig.data[0].lat.push(null);
 
             fig.layout.dragmode = 'select';
+
+            delete fig.layout.mapbox.bounds;
+
             fig.config = {
                 mapboxAccessToken: require('@build/credentials.json').MAPBOX_ACCESS_TOKEN
             };

test/jasmine/tests/select_test.js

@@ -3006,6 +3006,30 @@
      "editType": "plot",
      "valType": "number"
     },
+    "bounds": {
+     "east": {
+      "description": "Sets the maximum longitude of the map (in degrees East) if `west`, `south` and `north` are declared.",
+      "editType": "plot",
+      "valType": "number"
+     },
+     "editType": "plot",
+     "north": {
+      "description": "Sets the maximum latitude of the map (in degrees North) if `east`, `west` and `south` are declared.",
+      "editType": "plot",
+      "valType": "number"
+     },
+     "role": "object",
+     "south": {
+      "description": "Sets the minimum latitude of the map (in degrees North) if `east`, `west` and `north` are declared.",
+      "editType": "plot",
+      "valType": "number"
+     },
+     "west": {
+      "description": "Sets the minimum longitude of the map (in degrees East) if `east`, `south` and `north` are declared.",
+      "editType": "plot",
+      "valType": "number"
+     }
+    },
     "center": {
      "editType": "plot",
      "lat": {