diff --git a/src/plots/mapbox/constants.js b/src/plots/mapbox/constants.js
index f6e565cfd1a..9534613b550 100644
--- a/src/plots/mapbox/constants.js
+++ b/src/plots/mapbox/constants.js
@@ -20,27 +20,136 @@ module.exports = {
styleValueOSM: 'open-street-map',
styleValueDflt: 'basic',
- styleOSM: {
- id: 'osm',
- version: 8,
- sources: {
- 'plotly-osm-tiles': {
+ styles: {
+ 'open-street-map': {
+ id: 'osm',
+ version: 8,
+ sources: {
+ 'plotly-osm-tiles': {
+ type: 'raster',
+ attribution: '© OpenStreetMap',
+ tiles: [
+ 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
+ 'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png'
+ ],
+ tileSize: 256
+ }
+ },
+ layers: [{
+ id: 'plotly-osm-tiles',
type: 'raster',
- attribution: '© OpenStreetMap',
- tiles: [
- 'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
- 'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png'
- ],
- tileSize: 256
- }
+ source: 'plotly-osm-tiles',
+ minzoom: 0,
+ maxzoom: 22
+ }]
},
- layers: [{
- id: 'plotly-osm-tiles',
- type: 'raster',
- source: 'plotly-osm-tiles',
- minzoom: 0,
- maxzoom: 22
- }]
+ 'white-bg': {
+ id: 'white-bg',
+ version: 8,
+ sources: {},
+ layers: [{
+ id: 'white-bg',
+ type: 'background',
+ paint: {'background-color': '#FFFFFF'},
+ minzoom: 0,
+ maxzoom: 22
+ }]
+ },
+ 'carto-positron': {
+ id: 'carto-positron',
+ version: 8,
+ sources: {
+ 'plotly-carto-positron': {
+ type: 'raster',
+ attribution: '© CARTO',
+ tiles: ['https://cartodb-basemaps-c.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'],
+ tileSize: 256
+ }
+ },
+ layers: [{
+ id: 'plotly-carto-positron',
+ type: 'raster',
+ source: 'plotly-carto-positron',
+ minzoom: 0,
+ maxzoom: 22
+ }]
+ },
+ 'carto-darkmatter': {
+ id: 'carto-darkmatter',
+ version: 8,
+ sources: {
+ 'plotly-carto-darkmatter': {
+ type: 'raster',
+ attribution: '© CARTO',
+ tiles: ['https://cartodb-basemaps-c.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png'],
+ tileSize: 256
+ }
+ },
+ layers: [{
+ id: 'plotly-carto-darkmatter',
+ type: 'raster',
+ source: 'plotly-carto-darkmatter',
+ minzoom: 0,
+ maxzoom: 22
+ }]
+ },
+ 'stamen-terrain': {
+ id: 'stamen-terrain',
+ version: 8,
+ sources: {
+ 'plotly-stamen-terrain': {
+ type: 'raster',
+ attribution: 'Map tiles by Stamen Design, under CC BY 3.0 | Data by OpenStreetMap, under ODbL.',
+ tiles: ['https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png'],
+ tileSize: 256
+ }
+ },
+ layers: [{
+ id: 'plotly-stamen-terrain',
+ type: 'raster',
+ source: 'plotly-stamen-terrain',
+ minzoom: 0,
+ maxzoom: 22
+ }]
+ },
+ 'stamen-toner': {
+ id: 'stamen-toner',
+ version: 8,
+ sources: {
+ 'plotly-stamen-toner': {
+ type: 'raster',
+ attribution: 'Map tiles by Stamen Design, under CC BY 3.0 | Data by OpenStreetMap, under ODbL.',
+ tiles: ['https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png'],
+ tileSize: 256
+ }
+ },
+ layers: [{
+ id: 'plotly-stamen-toner',
+ type: 'raster',
+ source: 'plotly-stamen-toner',
+ minzoom: 0,
+ maxzoom: 22
+ }]
+ },
+ 'stamen-watercolor': {
+ id: 'stamen-watercolor',
+ version: 8,
+ sources: {
+ 'plotly-stamen-watercolor': {
+ type: 'raster',
+ attribution: 'Map tiles by Stamen Design, under CC BY 3.0 | Data by OpenStreetMap, under CC BY SA.',
+ tiles: ['https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png'],
+ tileSize: 256
+ }
+ },
+ layers: [{
+ id: 'plotly-stamen-watercolor',
+ type: 'raster',
+ source: 'plotly-stamen-watercolor',
+ minzoom: 0,
+ maxzoom: 22
+ }]
+ }
},
controlContainerClassName: 'mapboxgl-control-container',
diff --git a/src/plots/mapbox/mapbox.js b/src/plots/mapbox/mapbox.js
index c4bb50d2773..ad35792b8f3 100644
--- a/src/plots/mapbox/mapbox.js
+++ b/src/plots/mapbox/mapbox.js
@@ -647,8 +647,8 @@ function getStyleObj(val) {
if(constants.styleValuesMapbox.indexOf(val) !== -1) {
styleObj.style = convertStyleVal(val);
- } else if(val === constants.styleValueOSM) {
- styleObj.style = constants.styleOSM;
+ } else if(constants.styles[val]) {
+ styleObj.style = constants.styles[val];
} else {
styleObj.style = val;
}
diff --git a/test/image/baselines/mapbox_carto-style.png b/test/image/baselines/mapbox_carto-style.png
new file mode 100644
index 00000000000..3994fa1da7e
Binary files /dev/null and b/test/image/baselines/mapbox_carto-style.png differ
diff --git a/test/image/baselines/mapbox_stamen-style.png b/test/image/baselines/mapbox_stamen-style.png
new file mode 100644
index 00000000000..eb2ae62b1da
Binary files /dev/null and b/test/image/baselines/mapbox_stamen-style.png differ
diff --git a/test/image/baselines/mapbox_white-bg-style.png b/test/image/baselines/mapbox_white-bg-style.png
new file mode 100644
index 00000000000..d027067dd66
Binary files /dev/null and b/test/image/baselines/mapbox_white-bg-style.png differ
diff --git a/test/image/mocks/mapbox_carto-style.json b/test/image/mocks/mapbox_carto-style.json
new file mode 100644
index 00000000000..43610e67ca8
--- /dev/null
+++ b/test/image/mocks/mapbox_carto-style.json
@@ -0,0 +1,34 @@
+{
+ "data": [
+ {
+ "type": "scattermapbox",
+ "name": "carto-positron",
+ "lon": [ 10, 20 ],
+ "lat": [ 20, 10 ]
+ },
+ {
+ "type": "scattermapbox",
+ "name": "carto-darkmatter",
+ "lon": [ 10, 20 ],
+ "lat": [ 20, 10 ],
+ "subplot": "mapbox2"
+ }
+ ],
+ "layout": {
+ "grid": {"rows": 1, "columns": 2},
+
+ "legend": {
+ "x": 0,
+ "y": 1, "yanchor": "bottom"
+ },
+
+ "mapbox": {
+ "domain": {"row": 0, "column": 0},
+ "style": "carto-positron"
+ },
+ "mapbox2": {
+ "domain": {"row": 0, "column": 1},
+ "style": "carto-darkmatter"
+ }
+ }
+}
diff --git a/test/image/mocks/mapbox_stamen-style.json b/test/image/mocks/mapbox_stamen-style.json
new file mode 100644
index 00000000000..01dc777c140
--- /dev/null
+++ b/test/image/mocks/mapbox_stamen-style.json
@@ -0,0 +1,44 @@
+{
+ "data": [
+ {
+ "type": "scattermapbox",
+ "name": "stamen-terrain",
+ "lon": [ 10, 20 ],
+ "lat": [ 20, 10 ]
+ },
+ {
+ "type": "scattermapbox",
+ "name": "stamen-toner",
+ "lon": [ 10, 20 ],
+ "lat": [ 20, 10 ],
+ "subplot": "mapbox2"
+ },
+ {
+ "type": "scattermapbox",
+ "name": "stamen-watercolor",
+ "lon": [ 10, 20 ],
+ "lat": [ 20, 10 ],
+ "subplot": "mapbox3"
+ }
+ ],
+ "layout": {
+ "grid": {"rows": 1, "columns": 3},
+
+ "legend": {
+ "x": 0,
+ "y": 1, "yanchor": "bottom"
+ },
+ "mapbox": {
+ "domain": {"row": 0, "column": 0},
+ "style": "stamen-terrain"
+ },
+ "mapbox2": {
+ "domain": {"row": 0, "column": 1},
+ "style": "stamen-toner"
+ },
+ "mapbox3": {
+ "domain": {"row": 0, "column": 2},
+ "style": "stamen-watercolor"
+ }
+ }
+}
diff --git a/test/image/mocks/mapbox_white-bg-style.json b/test/image/mocks/mapbox_white-bg-style.json
new file mode 100644
index 00000000000..3922d989ba3
--- /dev/null
+++ b/test/image/mocks/mapbox_white-bg-style.json
@@ -0,0 +1,18 @@
+{
+ "data": [
+ {
+ "type": "scattermapbox",
+ "name": "white-bg",
+ "lon": [ 10, 20 ],
+ "lat": [ 20, 10 ]
+ }
+ ],
+ "layout": {
+ "width": 200,
+ "height": 200,
+ "margin": {"t": 0, "b": 0, "l": 0, "r": 0},
+ "mapbox": {
+ "style": "white-bg"
+ }
+ }
+}