add bound limits to mapbox subplot

Author: archmoj

src/plots/mapbox/layout_attributes.js

@@ -95,6 +95,27 @@ var attrs = module.exports = overrideAll({
         ].join(' ')
     },
 
+    westbound: {
+        valType: 'number',
+        dflt: null,
+        description: 'Sets the minimum longitude of the map (in degrees East).'
+    },
+    eastbound: {
+        valType: 'number',
+        dflt: null,
+        description: 'Sets the maximum longitude of the map (in degrees East).'
+    },
+    southbound: {
+        valType: 'number',
+        dflt: null,
+        description: 'Sets the minimum latitude of the map (in degrees North).'
+    },
+    northbound: {
+        valType: 'number',
+        dflt: null,
+        description: 'Sets the maximum latitude of the map (in degrees North).'
+    },
+
     layers: templatedArray('layer', {
         visible: {
             valType: 'boolean',

src/plots/mapbox/layout_defaults.js

@@ -26,6 +26,11 @@ function handleDefaults(containerIn, containerOut, coerce, opts) {
     coerce('bearing');
     coerce('pitch');
 
+    coerce('westbound');
+    coerce('eastbound');
+    coerce('southbound');
+    coerce('northbound');
+
     handleArrayContainerDefaults(containerIn, containerOut, {
         name: 'layers',
         handleItemDefaults: handleLayerDefaults

src/plots/mapbox/mapbox.js

@@ -91,6 +91,17 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
     // store access token associated with this map
     self.accessToken = opts.accesstoken;
 
+    var westbound = opts.westbound;
+    var eastbound = opts.eastbound;
+    var southbound = opts.southbound;
+    var northbound = opts.northbound;
+    var maxBounds = (
+        westbound !== undefined &&
+        eastbound !== undefined &&
+        southbound !== undefined &&
+        northbound !== undefined
+    ) ? [[westbound, southbound], [eastbound, northbound]] : null;
+
     // create the map!
     var map = self.map = new mapboxgl.Map({
         container: self.div,
@@ -100,6 +111,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,10 @@
   ],
   "layout": {
     "mapbox": {
+      "westbound": -60,
+      "eastbound": 60,
+      "southbound": -30,
+      "northbound": 30,
       "style": "light",
       "zoom": 2.5,
       "center": {

test/image/mocks/mapbox_bubbles-text.json

@@ -3086,6 +3086,12 @@
       "valType": "info_array"
      }
     },
+    "eastbound": {
+     "description": "Sets the maximum longitude of the map (in degrees East).",
+     "dflt": null,
+     "editType": "plot",
+     "valType": "number"
+    },
     "editType": "plot",
     "layers": {
      "items": {
@@ -3306,13 +3312,25 @@
      },
      "role": "object"
     },
+    "northbound": {
+     "description": "Sets the maximum latitude of the map (in degrees North).",
+     "dflt": null,
+     "editType": "plot",
+     "valType": "number"
+    },
     "pitch": {
      "description": "Sets the pitch angle of the map (in degrees, where *0* means perpendicular to the surface of the map) (mapbox.pitch).",
      "dflt": 0,
      "editType": "plot",
      "valType": "number"
     },
     "role": "object",
+    "southbound": {
+     "description": "Sets the minimum latitude of the map (in degrees North).",
+     "dflt": null,
+     "editType": "plot",
+     "valType": "number"
+    },
     "style": {
      "description": "Defines the map layers that are rendered by default below the trace layers defined in `data`, which are themselves by default rendered below the layers defined in `layout.mapbox.layers`.  These layers can be defined either explicitly as a Mapbox Style object which can contain multiple layer definitions that load data from any public or private Tile Map Service (TMS or XYZ) or Web Map Service (WMS) or implicitly by using one of the built-in style objects which use WMSes which do not require any access tokens, or by using a default Mapbox style or custom Mapbox style URL, both of which require a Mapbox access token  Note that Mapbox access token can be set in the `accesstoken` attribute or in the `mapboxAccessToken` config option.  Mapbox Style objects are of the form described in the Mapbox GL JS documentation available at https://docs.mapbox.com/mapbox-gl-js/style-spec  The built-in plotly.js styles objects are: carto-darkmatter, carto-positron, open-street-map, stamen-terrain, stamen-toner, stamen-watercolor, white-bg  The built-in Mapbox styles are: basic, streets, outdoors, light, dark, satellite, satellite-streets  Mapbox style URLs are of the form: mapbox://mapbox.mapbox-<name>-<version>",
      "dflt": "basic",
@@ -3340,6 +3358,12 @@
      "editType": "none",
      "valType": "any"
     },
+    "westbound": {
+     "description": "Sets the minimum longitude of the map (in degrees East).",
+     "dflt": null,
+     "editType": "plot",
+     "valType": "number"
+    },
     "zoom": {
      "description": "Sets the zoom level of the map (mapbox.zoom).",
      "dflt": 1,