Mapbox to image context

src/snapshot/cloneplot.js

@@ -70,6 +70,7 @@ module.exports = function clonePlot(graphObj, options) {
     var oldLayout = graphObj.layout;
     var newData = extendDeep([], oldData);
     var newLayout = extendDeep({}, oldLayout, cloneLayoutOverride(options.tileClass));
+    var context = graphObj._context || {};
 
     if(options.width) newLayout.width = options.width;
     if(options.height) newLayout.height = options.height;
@@ -153,7 +154,8 @@ module.exports = function clonePlot(graphObj, options) {
                 options.plotGlPixelRatio,
             displaylogo: options.displaylogo || false,
             showLink: options.showLink || false,
-            showTips: options.showTips || false
+            showTips: options.showTips || false,
+            mapboxAccessToken: context.mapboxAccessToken
         }
     };
 

test/jasmine/tests/mapbox_test.js

@@ -964,5 +964,78 @@ describe('@noCI, mapbox plots', function() {
             }, MOUSE_DELAY);
         });
     }
+});
+
+describe('@noCI, mapbox toImage', function() {
+    var MINIMUM_LENGTH = 1e5;
+
+    var gd;
+
+    beforeEach(function() {
+        gd = createGraphDiv();
+    });
+
+    afterEach(function() {
+        Plotly.purge(gd);
+        Plotly.setPlotConfig({ mapboxAccessToken: null });
+        destroyGraphDiv();
+    });
+
+    it('should generate image data with global credentials', function(done) {
+        Plotly.setPlotConfig({
+            mapboxAccessToken: MAPBOX_ACCESS_TOKEN
+        });
+
+        Plotly.newPlot(gd, [{
+            type: 'scattermapbox',
+            lon: [0, 10, 20],
+            lat: [-10, 10, -10]
+        }])
+        .then(function() {
+            return Plotly.toImage(gd);
+        })
+        .then(function(imgData) {
+            expect(imgData.length).toBeGreaterThan(MINIMUM_LENGTH);
+        })
+        .catch(failTest)
+        .then(done);
+    }, LONG_TIMEOUT_INTERVAL);
+
+    it('should generate image data with config credentials', function(done) {
+        Plotly.newPlot(gd, [{
+            type: 'scattermapbox',
+            lon: [0, 10, 20],
+            lat: [-10, 10, -10]
+        }], {}, {
+            mapboxAccessToken: MAPBOX_ACCESS_TOKEN
+        })
+        .then(function() {
+            return Plotly.toImage(gd);
+        })
+        .then(function(imgData) {
+            expect(imgData.length).toBeGreaterThan(MINIMUM_LENGTH);
+        })
+        .catch(failTest)
+        .then(done);
+    }, LONG_TIMEOUT_INTERVAL);
 
+    it('should generate image data with layout credentials', function(done) {
+        Plotly.newPlot(gd, [{
+            type: 'scattermapbox',
+            lon: [0, 10, 20],
+            lat: [-10, 10, -10]
+        }], {
+            mapbox: {
+                accesstoken: MAPBOX_ACCESS_TOKEN
+            }
+        })
+        .then(function() {
+            return Plotly.toImage(gd);
+        })
+        .then(function(imgData) {
+            expect(imgData.length).toBeGreaterThan(MINIMUM_LENGTH);
+        })
+        .catch(failTest)
+        .then(done);
+    }, LONG_TIMEOUT_INTERVAL);
 });

test/jasmine/tests/scattermapbox_test.js

@@ -24,11 +24,6 @@ function move(fromX, fromY, toX, toY, delay) {
     });
 }
 
-Plotly.setPlotConfig({
-    mapboxAccessToken: require('@build/credentials.json').MAPBOX_ACCESS_TOKEN
-});
-
-
 describe('scattermapbox defaults', function() {
     'use strict';
 
@@ -341,6 +336,10 @@ describe('@noCI scattermapbox hover', function() {
     beforeAll(function(done) {
         jasmine.addMatchers(customMatchers);
 
+        Plotly.setPlotConfig({
+            mapboxAccessToken: require('@build/credentials.json').MAPBOX_ACCESS_TOKEN
+        });
+
         gd = createGraphDiv();
 
         var data = [{
@@ -520,6 +519,10 @@ describe('@noCI Test plotly events on a scattermapbox plot:', function() {
     beforeAll(function(done) {
         jasmine.addMatchers(customMatchers);
 
+        Plotly.setPlotConfig({
+            mapboxAccessToken: require('@build/credentials.json').MAPBOX_ACCESS_TOKEN
+        });
+
         gd = createGraphDiv();
         mockCopy = Lib.extendDeep({}, mock);
 

test/jasmine/tests/snapshot_test.js

@@ -80,7 +80,8 @@ describe('Plotly.Snapshot', function() {
                 displaylogo: false,
                 showLink: false,
                 showTips: false,
-                setBackground: 'opaque'
+                setBackground: 'opaque',
+                mapboxAccessToken: undefined
             };
 
             var themeTile = Plotly.Snapshot.clone(dummyGraphObj, themeOptions);