add *resetViewMapbox* button to mapbox subplots

- resets view back to initial values
- keep track of those initial values on instantiation
- add *toggleHover* button too (that just works)

Author: etpinard

src/components/modebar/buttons.js

@@ -574,3 +574,29 @@ function setSpikelineVisibility(gd) {
 
     return aobj;
 }
+
+modeBarButtons.resetViewMapbox = {
+    name: 'resetViewMapbox',
+    title: 'Reset view',
+    attr: 'reset',
+    icon: Icons.home,
+    click: function(gd) {
+        var fullLayout = gd._fullLayout;
+        var subplotIds = Plots.getSubplotIds(fullLayout, 'mapbox');
+        var aObj = {};
+
+        for(var i = 0; i < subplotIds.length; i++) {
+            var id = subplotIds[i];
+            var subplotObj = fullLayout[id]._subplot;
+            var viewInitial = subplotObj.viewInitial;
+            var viewKeys = Object.keys(viewInitial);
+
+            for(var j = 0; j < viewKeys.length; j++) {
+                var key = viewKeys[j];
+                aObj[id + '.' + key] = viewInitial[key];
+            }
+        }
+
+        Plotly.relayout(gd, aObj);
+    }
+};

src/components/modebar/manage.js

@@ -148,6 +148,9 @@ function getButtonGroups(gd, buttonsToRemove, buttonsToAdd) {
     else if(hasPie) {
         addGroup(['hoverClosestPie']);
     }
+    else if(hasMapbox) {
+        addGroup(['resetViewMapbox', 'toggleHover']);
+    }
 
     return appendButtonsToGroups(groups, buttonsToAdd);
 }

src/plots/mapbox/index.js

@@ -11,6 +11,7 @@
 
 var mapboxgl = require('mapbox-gl');
 
+var Lib = require('../../lib');
 var Plots = require('../plots');
 var xmlnsNamespaces = require('../../constants/xmlns_namespaces');
 
@@ -75,6 +76,15 @@ exports.plot = function plotMapbox(gd) {
             fullLayout[id]._subplot = mapbox;
         }
 
+        if(!mapbox.viewInitial) {
+            mapbox.viewInitial = {
+                center: Lib.extendFlat({}, opts.center),
+                zoom: opts.zoom,
+                bearing: opts.bearing,
+                pitch: opts.pitch
+            };
+        }
+
         mapbox.plot(subplotCalcData, fullLayout, gd._promises);
     }
 };

test/jasmine/tests/modebar_test.js

@@ -270,6 +270,44 @@ describe('ModeBar', function() {
             checkButtons(modeBar, buttons, 1);
         });
 
+        it('creates mode bar (mapbox version)', function() {
+            var buttons = getButtons([
+                ['toImage', 'sendDataToCloud'],
+                ['pan2d'],
+                ['resetViewMapbox', 'toggleHover']
+            ]);
+
+            var gd = getMockGraphInfo();
+            gd._fullLayout._basePlotModules = [{ name: 'mapbox' }];
+
+            manageModeBar(gd);
+            var modeBar = gd._fullLayout._modeBar;
+
+            checkButtons(modeBar, buttons, 1);
+        });
+
+        it('creates mode bar (mapbox + selected version)', function() {
+            var buttons = getButtons([
+                ['toImage', 'sendDataToCloud'],
+                ['pan2d', 'select2d', 'lasso2d'],
+                ['resetViewMapbox', 'toggleHover']
+            ]);
+
+            var gd = getMockGraphInfo();
+            gd._fullLayout._basePlotModules = [{ name: 'mapbox' }];
+            gd._fullData = [{
+                type: 'scatter',
+                visible: true,
+                mode: 'markers',
+                _module: {selectPoints: true}
+            }];
+
+            manageModeBar(gd);
+            var modeBar = gd._fullLayout._modeBar;
+
+            checkButtons(modeBar, buttons, 1);
+        });
+
         it('creates mode bar (gl2d version)', function() {
             var buttons = getButtons([
                 ['toImage', 'sendDataToCloud'],
@@ -882,5 +920,50 @@ describe('ModeBar', function() {
 
         });
 
+        describe('mapbox handlers', function() {
+            it('button *resetViewMapbox* should reset the mapbox view attribute to their default', function(done) {
+                var gd = createGraphDiv();
+
+                function _assert(centerLon, centerLat, zoom) {
+                    var mapboxLayout = gd._fullLayout.mapbox;
+
+                    expect(mapboxLayout.center.lon).toBe(centerLon, 'center.lon');
+                    expect(mapboxLayout.center.lat).toBe(centerLat, 'center.lat');
+                    expect(mapboxLayout.zoom).toBe(zoom, 'zoom');
+                }
+
+                Plotly.plot(gd, [{
+                    type: 'scattermapbox',
+                    lon: [10, 20, 30],
+                    lat: [10, 20, 30]
+                }], {
+                    mapbox: {
+                        center: {lon: 10, lat: 10},
+                        zoom: 8
+                    }
+                }, {
+                    mapboxAccessToken: require('@build/credentials.json').MAPBOX_ACCESS_TOKEN
+                })
+                .then(function() {
+                    _assert(10, 10, 8);
+
+                    return Plotly.relayout(gd, {
+                        'mapbox.zoom': 10,
+                        'mapbox.center.lon': 30
+                    });
+                })
+                .then(function() {
+                    _assert(30, 10, 10);
+
+                    var button = selectButton(gd._fullLayout._modeBar, 'resetViewMapbox');
+
+                    button.isActive(false);
+                    button.click(false);
+                    _assert(10, 10, 8);
+                    button.isActive(false);
+                })
+                .then(done);
+            });
+        });
     });
 });