diff --git a/src/components/modebar/buttons.js b/src/components/modebar/buttons.js index bc9e259f1fc..7e57c5ba08a 100644 --- a/src/components/modebar/buttons.js +++ b/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] || []; diff --git a/src/components/modebar/manage.js b/src/components/modebar/manage.js index ecbc7c46dc0..01817d58466 100644 --- a/src/components/modebar/manage.js +++ b/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) { diff --git a/test/jasmine/tests/modebar_test.js b/test/jasmine/tests/modebar_test.js index de6fa2e245d..c450a044201 100644 --- a/test/jasmine/tests/modebar_test.js +++ b/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'] ]);