Merge pull request #4035 from plotly/mapbox-style-better-docs

Improve `mapbox.style` description + use mapbox-gl v1.1.1
plotly · Jul 23, 2019 · a9e7480 · a9e7480
2 parents 1400437 + 29c2bf9
commit a9e7480
Show file tree

Hide file tree

Showing 7 changed files with 226 additions and 164 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -91,7 +91,7 @@
     "glslify": "^7.0.0",
     "has-hover": "^1.0.1",
     "has-passive-events": "^1.0.0",
-    "mapbox-gl": "1.1.0",
+    "mapbox-gl": "^1.1.1",
     "matrix-camera-controller": "^2.1.3",
     "mouse-change": "^1.4.0",
     "mouse-event-offset": "^3.0.2",

diff --git a/src/plots/mapbox/constants.js b/src/plots/mapbox/constants.js
@@ -8,149 +8,152 @@
 
 'use strict';
 
-var requiredVersion = '1.1.0';
-
-module.exports = {
-    requiredVersion: requiredVersion,
-
-    styleUrlPrefix: 'mapbox://styles/mapbox/',
-    styleUrlSuffix: 'v9',
-
-    styleValuesMapbox: ['basic', 'streets', 'outdoors', 'light', 'dark', 'satellite', 'satellite-streets'],
-    styleValueOSM: 'open-street-map',
-    styleValueDflt: 'basic',
-
-    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',
+var requiredVersion = '1.1.1';
+
+var stylesNonMapbox = {
+    'open-street-map': {
+        id: 'osm',
+        version: 8,
+        sources: {
+            'plotly-osm-tiles': {
                 type: 'raster',
-                source: 'plotly-osm-tiles',
-                minzoom: 0,
-                maxzoom: 22
-            }]
+                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
+            }
         },
-        'white-bg': {
+        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',
-            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: 'background',
+            paint: {'background-color': '#FFFFFF'},
+            minzoom: 0,
+            maxzoom: 22
+        }]
+    },
+    'carto-positron': {
+        id: 'carto-positron',
+        version: 8,
+        sources: {
+            'plotly-carto-positron': {
                 type: 'raster',
-                source: 'plotly-carto-positron',
-                minzoom: 0,
-                maxzoom: 22
-            }]
+                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
+            }
         },
-        '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',
+        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',
-                source: 'plotly-carto-darkmatter',
-                minzoom: 0,
-                maxzoom: 22
-            }]
+                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
+            }
         },
-        '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',
+        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',
-                source: 'plotly-stamen-terrain',
-                minzoom: 0,
-                maxzoom: 22
-            }]
+                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
+            }
         },
-        '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',
+        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',
-                source: 'plotly-stamen-toner',
-                minzoom: 0,
-                maxzoom: 22
-            }]
+                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
+            }
         },
-        '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
-            }]
-        }
+        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
+        }]
+    }
+};
+
+var styleValuesNonMapbox = Object.keys(stylesNonMapbox);
+
+module.exports = {
+    requiredVersion: requiredVersion,
+
+    styleUrlPrefix: 'mapbox://styles/mapbox/',
+    styleUrlSuffix: 'v9',
+
+    styleValuesMapbox: ['basic', 'streets', 'outdoors', 'light', 'dark', 'satellite', 'satellite-streets'],
+    styleValueDflt: 'basic',
+    stylesNonMapbox: stylesNonMapbox,
+    styleValuesNonMapbox: styleValuesNonMapbox,
 
     traceLayerPrefix: 'plotly-trace-layer-',
     layoutLayerPrefix: 'plotly-layout-layer-',
@@ -168,6 +171,12 @@ module.exports = {
         'More info here: https://www.mapbox.com/help/define-access-token/'
     ].join('\n'),
 
+    missingStyleErrorMsg: [
+        'No valid mapbox style found, please set `mapbox.style` to one of:',
+        styleValuesNonMapbox.join(', '),
+        'or register a Mapbox access token to use a Mapbox-served style.'
+    ].join('\n'),
+
     multipleTokensErrorMsg: [
         'Set multiple mapbox access token across different mapbox subplot,',
         'using first token found as mapbox-gl does not allow multiple' +