mapbox: allow access token to be set per map

- use token in gd._context if not present in fullLayout
- make sure map is removed + re-created if access token changes
-

Author: etpinard

src/plots/mapbox/index.js

@@ -47,22 +47,21 @@ exports.layoutAttributes = require('./layout_attributes');
 exports.supplyLayoutDefaults = require('./layout_defaults');
 
 exports.plot = function plotMapbox(gd) {
-
-    if(!gd._context.mapboxAccessToken) {
-        throw new Error(constants.noAccessTokenErrorMsg);
-    }
-    else {
-        mapboxgl.accessToken = gd._context.mapboxAccessToken;
-    }
-
     var fullLayout = gd._fullLayout,
         calcData = gd.calcdata,
         mapboxIds = Plots.getSubplotIds(fullLayout, 'mapbox');
 
+    var accessToken = findAccessToken(gd, mapboxIds);
+    mapboxgl.accessToken = accessToken;
+
     for(var i = 0; i < mapboxIds.length; i++) {
         var id = mapboxIds[i],
             subplotCalcData = getSubplotCalcData(calcData, id),
-            mapbox = fullLayout[id]._subplot;
+            opts = fullLayout[id],
+            mapbox = opts._subplot;
+
+        // copy access token to fullLayout (to handle the context case)
+        opts.accesstoken = accessToken;
 
         if(!mapbox) {
             mapbox = createMapbox({
@@ -131,3 +130,27 @@ function getSubplotCalcData(calcData, id) {
 
     return subplotCalcData;
 }
+
+function findAccessToken(gd, mapboxIds) {
+    var fullLayout = gd._fullLayout,
+        context = gd._context;
+
+    // first look for access token in context
+    var accessToken = context.mapboxAccessToken;
+
+    // allow mapbox layout options to override it
+    for(var i = 0; i < mapboxIds.length; i++) {
+        var opts = fullLayout[mapboxIds[i]];
+
+        if(opts.accesstoken) {
+            accessToken = opts.accesstoken;
+            break;
+        }
+    }
+
+    if(!accessToken) {
+        throw new Error(constants.noAccessTokenErrorMsg);
+    }
+
+    return accessToken;
+}

src/plots/mapbox/layout_attributes.js

@@ -45,6 +45,16 @@ module.exports = {
         }
     },
 
+    accesstoken: {
+        valType: 'string',
+        noBlank: true,
+        strict: true,
+        role: 'info',
+        description: [
+            'Sets the mapbox access token to be set or as a configuration option',
+            'under `mapboxAccessToken`.'
+        ].join(' ')
+    },
     style: {
         valType: 'string',
         values: ['basic', 'streets', 'outdoors', 'light', 'dark', 'satellite', 'satellite-streets'],
@@ -55,6 +65,7 @@ module.exports = {
             'Either input the defaults Mapbox names or the URL to a custom style.'
         ].join(' ')
     },
+
     center: {
         lon: {
             valType: 'number',

src/plots/mapbox/layout_defaults.js

@@ -25,6 +25,7 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut, fullData) {
 };
 
 function handleDefaults(containerIn, containerOut, coerce) {
+    coerce('accesstoken');
     coerce('style');
     coerce('center.lon');
     coerce('center.lat');

src/plots/mapbox/mapbox.js

@@ -40,6 +40,7 @@ function Mapbox(opts) {
 
     // state variables used to infer how and what to update
     this.map = null;
+    this.accessToken = null;
     this.styleUrl = null;
     this.traceHash = {};
     this.layerList = [];
@@ -57,7 +58,16 @@ proto.plot = function(calcData, fullLayout, promises) {
     var self = this;
 
     // feed in new mapbox options
-    self.opts = fullLayout[this.id];
+    var opts = self.opts = fullLayout[this.id];
+
+    // remove map and create a new map if access token has change
+    if(self.map && (opts.accesstoken !== self.accessToken)) {
+        self.map.remove();
+        self.map = null;
+        self.styleUrl = null;
+        self.traceHash = [];
+        self.layerList = {};
+    }
 
     var promise;
 
@@ -83,6 +93,9 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
     // mapbox doesn't have a way to get the current style URL; do it ourselves
     var styleUrl = self.styleUrl = convertStyleUrl(opts.style);
 
+    // store access token associated with this map
+    self.accessToken = opts.accesstoken;
+
     var map = self.map = new mapboxgl.Map({
         container: self.div,
 
@@ -334,7 +347,7 @@ proto.updateLayers = function() {
 };
 
 proto.destroy = function() {
-    this.map.remove();
+    if(this.map) this.map.remove();
     this.container.removeChild(this.div);
 };
 

test/jasmine/tests/mapbox_test.js

@@ -188,6 +188,22 @@ describe('mapbox credentials', function() {
             mapboxAccessToken: dummyToken
         }).catch(function(err) {
             expect(err).toEqual(new Error(constants.mapOnErrorMsg));
+        }).then(done);
+    });
+
+    it('should use access token in mapbox layout options if present', function(done) {
+        Plotly.plot(gd, [{
+            type: 'scattermapbox',
+            lon: [10, 20, 30],
+            lat: [10, 20, 30]
+        }], {
+            mapbox: {
+                accesstoken: MAPBOX_ACCESS_TOKEN
+            }
+        }, {
+            mapboxAccessToken: dummyToken
+        }).then(function() {
+            expect(gd._fullLayout.mapbox.accesstoken).toEqual(MAPBOX_ACCESS_TOKEN);
             done();
         });
     });
@@ -476,6 +492,22 @@ describe('mapbox plots', function() {
         });
     });
 
+    it('should be able to update the access token', function(done) {
+        var promise = Plotly.relayout(gd, 'mapbox.accesstoken', 'wont-work');
+
+        promise.catch(function(err) {
+            expect(gd._fullLayout.mapbox.accesstoken).toEqual('wont-work');
+            expect(err).toEqual(new Error(constants.mapOnErrorMsg));
+        });
+
+        promise.then(function() {
+            return Plotly.relayout(gd, 'mapbox.accesstoken', MAPBOX_ACCESS_TOKEN);
+        }).then(function() {
+            expect(gd._fullLayout.mapbox.accesstoken).toEqual(MAPBOX_ACCESS_TOKEN);
+        }).then(done);
+    });
+
+
     it('should be able to update traces', function(done) {
         function assertDataPts(lengths) {
             var lines = getGeoJsonData(gd, 'lines'),