Skip to content

Commit a9e7480

Browse files
etpinardetpinard
authored
Merge pull request #4035 from plotly/mapbox-style-better-docs
Improve `mapbox.style` description + use mapbox-gl v1.1.1
2 parents 1400437 + 29c2bf9 commit a9e7480

File tree

7 files changed

+226
-164
lines changed

7 files changed

+226
-164
lines changed

‎package-lock.json

+11-11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@
9191
"glslify": "^7.0.0",
9292
"has-hover": "^1.0.1",
9393
"has-passive-events": "^1.0.0",
94-
"mapbox-gl": "1.1.0",
94+
"mapbox-gl": "^1.1.1",
9595
"matrix-camera-controller": "^2.1.3",
9696
"mouse-change": "^1.4.0",
9797
"mouse-event-offset": "^3.0.2",

‎src/plots/mapbox/constants.js

+140-131
Original file line numberDiff line numberDiff line change
@@ -8,149 +8,152 @@
88

99
'use strict';
1010

11-
var requiredVersion = '1.1.0';
12-
13-
module.exports = {
14-
requiredVersion: requiredVersion,
15-
16-
styleUrlPrefix: 'mapbox://styles/mapbox/',
17-
styleUrlSuffix: 'v9',
18-
19-
styleValuesMapbox: ['basic', 'streets', 'outdoors', 'light', 'dark', 'satellite', 'satellite-streets'],
20-
styleValueOSM: 'open-street-map',
21-
styleValueDflt: 'basic',
22-
23-
styles: {
24-
'open-street-map': {
25-
id: 'osm',
26-
version: 8,
27-
sources: {
28-
'plotly-osm-tiles': {
29-
type: 'raster',
30-
attribution: '<a href="http://www.openstreetmap.org/about/" target="_blank">© OpenStreetMap</a>',
31-
tiles: [
32-
'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
33-
'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png'
34-
],
35-
tileSize: 256
36-
}
37-
},
38-
layers: [{
39-
id: 'plotly-osm-tiles',
11+
var requiredVersion = '1.1.1';
12+
13+
var stylesNonMapbox = {
14+
'open-street-map': {
15+
id: 'osm',
16+
version: 8,
17+
sources: {
18+
'plotly-osm-tiles': {
4019
type: 'raster',
41-
source: 'plotly-osm-tiles',
42-
minzoom: 0,
43-
maxzoom: 22
44-
}]
20+
attribution: '<a href="http://www.openstreetmap.org/about/" target="_blank">© OpenStreetMap</a>',
21+
tiles: [
22+
'https://a.tile.openstreetmap.org/{z}/{x}/{y}.png',
23+
'https://b.tile.openstreetmap.org/{z}/{x}/{y}.png'
24+
],
25+
tileSize: 256
26+
}
4527
},
46-
'white-bg': {
28+
layers: [{
29+
id: 'plotly-osm-tiles',
30+
type: 'raster',
31+
source: 'plotly-osm-tiles',
32+
minzoom: 0,
33+
maxzoom: 22
34+
}]
35+
},
36+
'white-bg': {
37+
id: 'white-bg',
38+
version: 8,
39+
sources: {},
40+
layers: [{
4741
id: 'white-bg',
48-
version: 8,
49-
sources: {},
50-
layers: [{
51-
id: 'white-bg',
52-
type: 'background',
53-
paint: {'background-color': '#FFFFFF'},
54-
minzoom: 0,
55-
maxzoom: 22
56-
}]
57-
},
58-
'carto-positron': {
59-
id: 'carto-positron',
60-
version: 8,
61-
sources: {
62-
'plotly-carto-positron': {
63-
type: 'raster',
64-
attribution: '<a href="https://carto.com/" target="_blank">© CARTO</a>',
65-
tiles: ['https://cartodb-basemaps-c.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'],
66-
tileSize: 256
67-
}
68-
},
69-
layers: [{
70-
id: 'plotly-carto-positron',
42+
type: 'background',
43+
paint: {'background-color': '#FFFFFF'},
44+
minzoom: 0,
45+
maxzoom: 22
46+
}]
47+
},
48+
'carto-positron': {
49+
id: 'carto-positron',
50+
version: 8,
51+
sources: {
52+
'plotly-carto-positron': {
7153
type: 'raster',
72-
source: 'plotly-carto-positron',
73-
minzoom: 0,
74-
maxzoom: 22
75-
}]
54+
attribution: '<a href="https://carto.com/" target="_blank">© CARTO</a>',
55+
tiles: ['https://cartodb-basemaps-c.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png'],
56+
tileSize: 256
57+
}
7658
},
77-
'carto-darkmatter': {
78-
id: 'carto-darkmatter',
79-
version: 8,
80-
sources: {
81-
'plotly-carto-darkmatter': {
82-
type: 'raster',
83-
attribution: '<a href="https://carto.com/" target="_blank">© CARTO</a>',
84-
tiles: ['https://cartodb-basemaps-c.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png'],
85-
tileSize: 256
86-
}
87-
},
88-
layers: [{
89-
id: 'plotly-carto-darkmatter',
59+
layers: [{
60+
id: 'plotly-carto-positron',
61+
type: 'raster',
62+
source: 'plotly-carto-positron',
63+
minzoom: 0,
64+
maxzoom: 22
65+
}]
66+
},
67+
'carto-darkmatter': {
68+
id: 'carto-darkmatter',
69+
version: 8,
70+
sources: {
71+
'plotly-carto-darkmatter': {
9072
type: 'raster',
91-
source: 'plotly-carto-darkmatter',
92-
minzoom: 0,
93-
maxzoom: 22
94-
}]
73+
attribution: '<a href="https://carto.com/" target="_blank">© CARTO</a>',
74+
tiles: ['https://cartodb-basemaps-c.global.ssl.fastly.net/dark_all/{z}/{x}/{y}.png'],
75+
tileSize: 256
76+
}
9577
},
96-
'stamen-terrain': {
97-
id: 'stamen-terrain',
98-
version: 8,
99-
sources: {
100-
'plotly-stamen-terrain': {
101-
type: 'raster',
102-
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>.',
103-
tiles: ['https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png'],
104-
tileSize: 256
105-
}
106-
},
107-
layers: [{
108-
id: 'plotly-stamen-terrain',
78+
layers: [{
79+
id: 'plotly-carto-darkmatter',
80+
type: 'raster',
81+
source: 'plotly-carto-darkmatter',
82+
minzoom: 0,
83+
maxzoom: 22
84+
}]
85+
},
86+
'stamen-terrain': {
87+
id: 'stamen-terrain',
88+
version: 8,
89+
sources: {
90+
'plotly-stamen-terrain': {
10991
type: 'raster',
110-
source: 'plotly-stamen-terrain',
111-
minzoom: 0,
112-
maxzoom: 22
113-
}]
92+
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>.',
93+
tiles: ['https://stamen-tiles.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png'],
94+
tileSize: 256
95+
}
11496
},
115-
'stamen-toner': {
116-
id: 'stamen-toner',
117-
version: 8,
118-
sources: {
119-
'plotly-stamen-toner': {
120-
type: 'raster',
121-
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>.',
122-
tiles: ['https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png'],
123-
tileSize: 256
124-
}
125-
},
126-
layers: [{
127-
id: 'plotly-stamen-toner',
97+
layers: [{
98+
id: 'plotly-stamen-terrain',
99+
type: 'raster',
100+
source: 'plotly-stamen-terrain',
101+
minzoom: 0,
102+
maxzoom: 22
103+
}]
104+
},
105+
'stamen-toner': {
106+
id: 'stamen-toner',
107+
version: 8,
108+
sources: {
109+
'plotly-stamen-toner': {
128110
type: 'raster',
129-
source: 'plotly-stamen-toner',
130-
minzoom: 0,
131-
maxzoom: 22
132-
}]
111+
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>.',
112+
tiles: ['https://stamen-tiles.a.ssl.fastly.net/toner/{z}/{x}/{y}.png'],
113+
tileSize: 256
114+
}
133115
},
134-
'stamen-watercolor': {
135-
id: 'stamen-watercolor',
136-
version: 8,
137-
sources: {
138-
'plotly-stamen-watercolor': {
139-
type: 'raster',
140-
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>.',
141-
tiles: ['https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png'],
142-
tileSize: 256
143-
}
144-
},
145-
layers: [{
146-
id: 'plotly-stamen-watercolor',
147-
type: 'raster',
148-
source: 'plotly-stamen-watercolor',
149-
minzoom: 0,
150-
maxzoom: 22
151-
}]
152-
}
116+
layers: [{
117+
id: 'plotly-stamen-toner',
118+
type: 'raster',
119+
source: 'plotly-stamen-toner',
120+
minzoom: 0,
121+
maxzoom: 22
122+
}]
153123
},
124+
'stamen-watercolor': {
125+
id: 'stamen-watercolor',
126+
version: 8,
127+
sources: {
128+
'plotly-stamen-watercolor': {
129+
type: 'raster',
130+
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>.',
131+
tiles: ['https://stamen-tiles.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png'],
132+
tileSize: 256
133+
}
134+
},
135+
layers: [{
136+
id: 'plotly-stamen-watercolor',
137+
type: 'raster',
138+
source: 'plotly-stamen-watercolor',
139+
minzoom: 0,
140+
maxzoom: 22
141+
}]
142+
}
143+
};
144+
145+
var styleValuesNonMapbox = Object.keys(stylesNonMapbox);
146+
147+
module.exports = {
148+
requiredVersion: requiredVersion,
149+
150+
styleUrlPrefix: 'mapbox://styles/mapbox/',
151+
styleUrlSuffix: 'v9',
152+
153+
styleValuesMapbox: ['basic', 'streets', 'outdoors', 'light', 'dark', 'satellite', 'satellite-streets'],
154+
styleValueDflt: 'basic',
155+
stylesNonMapbox: stylesNonMapbox,
156+
styleValuesNonMapbox: styleValuesNonMapbox,
154157

155158
traceLayerPrefix: 'plotly-trace-layer-',
156159
layoutLayerPrefix: 'plotly-layout-layer-',
@@ -168,6 +171,12 @@ module.exports = {
168171
'More info here: https://www.mapbox.com/help/define-access-token/'
169172
].join('\n'),
170173

174+
missingStyleErrorMsg: [
175+
'No valid mapbox style found, please set `mapbox.style` to one of:',
176+
styleValuesNonMapbox.join(', '),
177+
'or register a Mapbox access token to use a Mapbox-served style.'
178+
].join('\n'),
179+
171180
multipleTokensErrorMsg: [
172181
'Set multiple mapbox access token across different mapbox subplot,',
173182
'using first token found as mapbox-gl does not allow multiple' +

0 commit comments

Comments
 (0)