Merge pull request #4398 from plotly/mapbox-zoom-inout-modebar-buttons

Add modebar buttons zoomInMapbox and zoomOutMapbox

Author: etpinard

src/components/modebar/buttons.js

@@ -618,6 +618,42 @@ modeBarButtons.resetViewMapbox = {
     }
 };
 
+modeBarButtons.zoomInMapbox = {
+    name: 'zoomInMapbox',
+    title: function(gd) { return _(gd, 'Zoom in'); },
+    attr: 'zoom',
+    val: 'in',
+    icon: Icons.zoom_plus,
+    click: handleMapboxZoom
+};
+
+modeBarButtons.zoomOutMapbox = {
+    name: 'zoomOutMapbox',
+    title: function(gd) { return _(gd, 'Zoom out'); },
+    attr: 'zoom',
+    val: 'out',
+    icon: Icons.zoom_minus,
+    click: handleMapboxZoom
+};
+
+function handleMapboxZoom(gd, ev) {
+    var button = ev.currentTarget;
+    var val = button.getAttribute('data-val');
+    var fullLayout = gd._fullLayout;
+    var subplotIds = fullLayout._subplots.mapbox || [];
+    var scalar = 1.05;
+    var aObj = {};
+
+    for(var i = 0; i < subplotIds.length; i++) {
+        var id = subplotIds[i];
+        var current = fullLayout[id].zoom;
+        var next = (val === 'in') ? scalar * current : current / scalar;
+        aObj[id + '.zoom'] = next;
+    }
+
+    Registry.call('_guiRelayout', gd, aObj);
+}
+
 function resetView(gd, subplotType) {
     var fullLayout = gd._fullLayout;
     var subplotIds = fullLayout._subplots[subplotType] || [];

src/components/modebar/manage.js

@@ -126,6 +126,7 @@ function getButtonGroups(gd) {
         hoverGroup = ['hoverClosest3d'];
         resetGroup = ['resetCameraDefault3d', 'resetCameraLastSave3d'];
     } else if(hasMapbox) {
+        zoomGroup = ['zoomInMapbox', 'zoomOutMapbox'];
         hoverGroup = ['toggleHover'];
         resetGroup = ['resetViewMapbox'];
     } else if(hasGL2D) {

test/jasmine/tests/modebar_test.js

@@ -484,7 +484,7 @@ describe('ModeBar', function() {
             var buttons = getButtons([
                 ['toImage'],
                 ['pan2d'],
-                ['resetViewMapbox'],
+                ['zoomInMapbox', 'zoomOutMapbox', 'resetViewMapbox'],
                 ['toggleHover']
             ]);
 
@@ -502,7 +502,7 @@ describe('ModeBar', function() {
             var buttons = getButtons([
                 ['toImage'],
                 ['pan2d', 'select2d', 'lasso2d'],
-                ['resetViewMapbox'],
+                ['zoomInMapbox', 'zoomOutMapbox', 'resetViewMapbox'],
                 ['toggleHover']
             ]);