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" + } + } +}