Merge pull request #4068 from plotly/mapbox-extra-tilesets

mapbox: add shortcuts to additional tilesets
plotly · Jul 22, 2019 · 4db3809 · 4db3809
2 parents 4dde7d0 + 19585fb
commit 4db3809
Show file tree

Hide file tree

Showing 8 changed files with 226 additions and 21 deletions.
diff --git 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: '<a href="http://www.openstreetmap.org/about/" target="_blank">© OpenStreetMap</a>',
+                    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: '<a href="http://www.openstreetmap.org/about/" target="_blank">© OpenStreetMap</a>',
-                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: '<a href="https://carto.com/" target="_blank">© CARTO</a>',
+                    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: '<a href="https://carto.com/" target="_blank">© CARTO</a>',
+                    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 <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> | Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.',
+                    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 <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> | Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://www.openstreetmap.org/copyright">ODbL</a>.',
+                    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 <a href="http://stamen.com">Stamen Design</a>, under <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> | Data by <a href="http://openstreetmap.org">OpenStreetMap</a>, under <a href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.',
+                    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
@@ -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
diff --git a/test/image/baselines/mapbox_stamen-style.png b/test/image/baselines/mapbox_stamen-style.png
diff --git a/test/image/baselines/mapbox_white-bg-style.png b/test/image/baselines/mapbox_white-bg-style.png
diff --git a/test/image/mocks/mapbox_carto-style.json 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
@@ -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
@@ -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"
+    }
+  }
+}