adapt find-mapbox-access-token for maps that don't use Mapbox styles

- that is if all mapbox subplots on graph do not use Mapbox styles,
  DO NOT error when mapbox access token isn't set
- moreover, add helpful log when multiple distinct tokens are set
  in same layout

Author: etpinard

src/plots/mapbox/constants.js

@@ -31,6 +31,12 @@ module.exports = {
         'More info here: https://www.mapbox.com/help/define-access-token/'
     ].join('\n'),
 
+    multipleTokensErrorMsg: [
+        'Set multiple mapbox access token across different mapbox subplot,',
+        'using first token found as mapbox-gl does not allow multiple' +
+        'access tokens on the same page.'
+    ].join('\n'),
+
     mapOnErrorMsg: 'Mapbox error.',
 
     // a subset of node_modules/mapbox-gl/dist/mapbox-gl.css

src/plots/mapbox/index.js

@@ -46,7 +46,7 @@ exports.attributes = {
     }
 };
 
-exports.layoutAttributes = require('./layout_attributes');
+var layoutAttrs = exports.layoutAttributes = require('./layout_attributes');
 
 exports.supplyLayoutDefaults = require('./layout_defaults');
 
@@ -132,24 +132,58 @@ exports.toSVG = function(gd) {
     }
 };
 
+// N.B. mapbox-gl only allows one accessToken to be set per page:
+// https://github.com/mapbox/mapbox-gl-js/issues/6331
 function findAccessToken(gd, mapboxIds) {
     var fullLayout = gd._fullLayout;
     var context = gd._context;
 
     // special case for Mapbox Atlas users
     if(context.mapboxAccessToken === '') return '';
 
+    var tokensUseful = [];
+    var tokensListed = [];
+    var wontWork = false;
+
     // Take the first token we find in a mapbox subplot.
     // These default to the context value but may be overridden.
     for(var i = 0; i < mapboxIds.length; i++) {
         var opts = fullLayout[mapboxIds[i]];
+        var style = opts.style;
+        var token = opts.accesstoken;
+
+        if(typeof style === 'string' && layoutAttrs.style.values.indexOf(style) !== -1) {
+            if(token) {
+                Lib.pushUnique(tokensUseful, token);
+            } else {
+                Lib.error('Uses Mapbox map style, but did not set an access token.');
+                wontWork = true;
+            }
+        }
 
-        if(opts.accesstoken) {
-            return opts.accesstoken;
+        if(token) {
+            Lib.pushUnique(tokensListed, token);
         }
     }
 
-    throw new Error(constants.noAccessTokenErrorMsg);
+    if(wontWork) {
+        throw new Error(constants.noAccessTokenErrorMsg);
+    }
+
+    if(tokensUseful.length) {
+        if(tokensUseful.length > 1) {
+            Lib.warn(constants.multipleTokensErrorMsg);
+        }
+        return tokensUseful[0];
+    } else {
+        if(tokensListed.length) {
+            Lib.log([
+                'Listed mapbox access token(s)', tokensListed.join(','),
+                'but did not use a Mapbox map style, ignoring token(s).'
+            ].join(' '));
+        }
+        return '';
+    }
 }
 
 exports.updateFx = function(gd) {

test/jasmine/tests/mapbox_test.js

@@ -196,10 +196,31 @@ describe('mapbox defaults', function() {
 });
 
 describe('mapbox credentials', function() {
-    'use strict';
+    var gd;
 
     var dummyToken = 'asfdsa124331wersdsa1321q3';
-    var gd;
+
+    var osmStyle = {
+        id: 'osm',
+        version: 8,
+        sources: {
+            'osm-tiles': {
+                type: 'raster',
+                tiles: [
+                    'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
+                    'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png'
+                ],
+                tileSize: 256
+            }
+        },
+        layers: [{
+            id: 'osm-tiles',
+            type: 'raster',
+            source: 'osm-tiles',
+            minzoom: 0,
+            maxzoom: 22
+        }]
+    };
 
     beforeEach(function() {
         gd = createGraphDiv();
@@ -219,13 +240,17 @@ describe('mapbox credentials', function() {
     });
 
     it('should throw error if token is not registered', function() {
+        spyOn(Lib, 'error');
+
         expect(function() {
             Plotly.plot(gd, [{
                 type: 'scattermapbox',
                 lon: [10, 20, 30],
                 lat: [10, 20, 30]
             }]);
         }).toThrow(new Error(constants.noAccessTokenErrorMsg));
+
+        expect(Lib.error).toHaveBeenCalledWith('Uses Mapbox map style, but did not set an access token.');
     }, LONG_TIMEOUT_INTERVAL);
 
     it('should throw error if token is invalid', function(done) {
@@ -270,6 +295,76 @@ describe('mapbox credentials', function() {
         });
     }, LONG_TIMEOUT_INTERVAL);
 
+    it('should warn when multiple tokens in mapbox layout options are present', function(done) {
+        spyOn(Lib, 'warn');
+        var cnt = 0;
+
+        Plotly.plot(gd, [{
+            type: 'scattermapbox',
+            lon: [10, 20, 30],
+            lat: [10, 20, 30]
+        }, {
+            type: 'scattermapbox',
+            lon: [10, 20, 30],
+            lat: [10, 20, 30],
+            subplot: 'mapbox2'
+        }], {
+            mapbox: { accesstoken: MAPBOX_ACCESS_TOKEN },
+            mapbox2: { accesstoken: dummyToken }
+        }).catch(function() {
+            cnt++;
+        }).then(function() {
+            expect(cnt).toEqual(0);
+            expect(gd._fullLayout.mapbox.accesstoken).toEqual(MAPBOX_ACCESS_TOKEN);
+            expect(Lib.warn).toHaveBeenCalledWith(constants.multipleTokensErrorMsg);
+            done();
+        });
+    }, LONG_TIMEOUT_INTERVAL);
+
+    it('should not throw when using a custom non-mapbox style', function(done) {
+        var cnt = 0;
+
+        Plotly.plot(gd, [{
+            type: 'scattermapbox',
+            lon: [10, 20, 30],
+            lat: [10, 20, 30]
+        }], {
+            mapbox: { style: osmStyle }
+        }).catch(function() {
+            cnt++;
+        }).then(function() {
+            expect(cnt).toEqual(0);
+            expect(gd._fullLayout.mapbox.accesstoken).toBe(undefined);
+            done();
+        });
+    }, LONG_TIMEOUT_INTERVAL);
+
+    it('should log when an access token is set while using a custom non-mapbox style', function(done) {
+        spyOn(Lib, 'log');
+        var cnt = 0;
+
+        Plotly.plot(gd, [{
+            type: 'scattermapbox',
+            lon: [10, 20, 30],
+            lat: [10, 20, 30]
+        }], {
+            mapbox: {
+                style: osmStyle,
+                accesstoken: MAPBOX_ACCESS_TOKEN
+            }
+        }).catch(function() {
+            cnt++;
+        }).then(function() {
+            expect(cnt).toEqual(0);
+            expect(Lib.log).toHaveBeenCalledWith([
+                'Listed mapbox access token(s)',
+                MAPBOX_ACCESS_TOKEN,
+                'but did not use a Mapbox map style, ignoring token(s).'
+            ].join(' '));
+            done();
+        });
+    }, LONG_TIMEOUT_INTERVAL);
+
     it('should bypass access token in mapbox layout options when config points to an Atlas server', function(done) {
         var cnt = 0;
         var msg = [