Merge pull request #6778 from plotly/more-stamen-setup

additional setup needed to pass api key for `stamen` styles

Author: archmoj

draftlogs/6776_change.md

@@ -1,2 +1,2 @@
  - Change stamen styles to point to stadiamaps.com, please note that in addition
-   the users now need to provide their own API_KEY via MAPBOX_ACCESS_TOKEN
+   the users now need to provide their own API_KEY via MAPBOX_ACCESS_TOKEN [[#6776](https://github.com/plotly/plotly.js/pull/6776), [#6778](https://github.com/plotly/plotly.js/pull/6778)]

src/plots/mapbox/constants.js

@@ -110,7 +110,7 @@ var stylesNonMapbox = {
             'plotly-stamen-terrain': {
                 type: 'raster',
                 attribution: stamenTerrainOrToner,
-                tiles: ['https://tiles.stadiamaps.com/tiles/stamen_terrain/{z}/{x}/{y}.png'],
+                tiles: ['https://tiles.stadiamaps.com/tiles/stamen_terrain/{z}/{x}/{y}.png?api_key='],
                 tileSize: 256
             }
         },
@@ -130,7 +130,7 @@ var stylesNonMapbox = {
             'plotly-stamen-toner': {
                 type: 'raster',
                 attribution: stamenTerrainOrToner,
-                tiles: ['https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}.png'],
+                tiles: ['https://tiles.stadiamaps.com/tiles/stamen_toner/{z}/{x}/{y}.png?api_key='],
                 tileSize: 256
             }
         },
@@ -150,7 +150,7 @@ var stylesNonMapbox = {
             'plotly-stamen-watercolor': {
                 type: 'raster',
                 attribution: stamenWaterColor,
-                tiles: ['https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg'],
+                tiles: ['https://tiles.stadiamaps.com/tiles/stamen_watercolor/{z}/{x}/{y}.jpg?api_key='],
                 tileSize: 256
             }
         },

src/plots/mapbox/index.js

@@ -222,11 +222,11 @@ function findAccessToken(gd, mapboxIds) {
         var opts = fullLayout[mapboxIds[i]];
         var token = opts.accesstoken;
 
-        if(isMapboxStyle(opts.style)) {
+        if(isStyleRequireAccessToken(opts.style)) {
             if(token) {
                 Lib.pushUnique(tokensUseful, token);
             } else {
-                if(isMapboxStyle(opts._input.style)) {
+                if(isStyleRequireAccessToken(opts._input.style)) {
                     Lib.error('Uses Mapbox map style, but did not set an access token.');
                     hasOneSetMapboxStyle = true;
                 }
@@ -263,10 +263,11 @@ function findAccessToken(gd, mapboxIds) {
     }
 }
 
-function isMapboxStyle(s) {
+function isStyleRequireAccessToken(s) {
     return typeof s === 'string' && (
         constants.styleValuesMapbox.indexOf(s) !== -1 ||
-        s.indexOf('mapbox://') === 0
+        s.indexOf('mapbox://') === 0 ||
+        s.indexOf('stamen') === 0
     );
 }
 

src/plots/mapbox/mapbox.js

@@ -86,7 +86,7 @@ proto.createMap = function(calcData, fullLayout, resolve, reject) {
     var opts = fullLayout[self.id];
 
     // store style id and URL or object
-    var styleObj = self.styleObj = getStyleObj(opts.style);
+    var styleObj = self.styleObj = getStyleObj(opts.style, fullLayout);
 
     // store access token associated with this map
     self.accessToken = opts.accesstoken;
@@ -152,7 +152,7 @@ proto.updateMap = function(calcData, fullLayout, resolve, reject) {
     self.rejectOnError(reject);
 
     var promises = [];
-    var styleObj = getStyleObj(opts.style);
+    var styleObj = getStyleObj(opts.style, fullLayout);
 
     if(JSON.stringify(self.styleObj) !== JSON.stringify(styleObj)) {
         self.styleObj = styleObj;
@@ -768,7 +768,7 @@ proto.getViewEditsWithDerived = function(cont) {
     return obj;
 };
 
-function getStyleObj(val) {
+function getStyleObj(val, fullLayout) {
     var styleObj = {};
 
     if(Lib.isPlainObject(val)) {
@@ -781,6 +781,16 @@ function getStyleObj(val) {
             styleObj.style = convertStyleVal(val);
         } else if(constants.stylesNonMapbox[val]) {
             styleObj.style = constants.stylesNonMapbox[val];
+            var spec = styleObj.style.sources['plotly-' + val];
+            var tiles = spec ? spec.tiles : undefined;
+            if(
+                tiles &&
+                tiles[0] &&
+                tiles[0].slice(-9) === '?api_key='
+            ) {
+                // provide api_key for stamen styles
+                tiles[0] += fullLayout._mapboxAccessToken;
+            }
         } else {
             styleObj.style = val;
         }

test/image/make_baseline.py

@@ -78,7 +78,7 @@
 blacklist = [
     'mapbox_density0-legend',
     'mapbox_osm-style',
-    'mapbox_stamen-style', # used to pass before 2023 Jun 20
+    'mapbox_stamen-style', # Could pass by setting mapboxAccessToken to a stadiamaps.com token
     'mapbox_custom-style' # Figure out why needed this in https://github.com/plotly/plotly.js/pull/6610
 ]
 allNames = [a for a in allNames if a not in blacklist]