diff --git a/package-lock.json b/package-lock.json index 050078d9ee4..5a518561134 100644 --- a/package-lock.json +++ b/package-lock.json @@ -88,9 +88,9 @@ "integrity": "sha1-ioP5M1x4YO/6Lu7KJUMyqgru2PI=" }, "@mapbox/tiny-sdf": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-1.1.0.tgz", - "integrity": "sha512-dnhyk8X2BkDRWImgHILYAGgo+kuciNYX30CUKj/Qd5eNjh54OWM/mdOS/PWsPeN+3abtN+QDGYM4G220ynVJKA==" + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-1.1.1.tgz", + "integrity": "sha512-Ihn1nZcGIswJ5XGbgFAvVumOgWpvIjBX9jiRlIl46uQG9vJOF51ViBYHF95rEZupuyQbEmhLaDPLQlU7fUTsBg==" }, "@mapbox/unitbezier": { "version": "0.0.0", @@ -7068,9 +7068,9 @@ } }, "mapbox-gl": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.0.0.tgz", - "integrity": "sha512-+sfg6e3Ud6G9PNcdA56r6U0j2SJEQrnTTx/V8xt0xedIN9hrGIceKIukWz+tAgrw0KS5GKi6ThkWXPuwcGi36g==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.1.0.tgz", + "integrity": "sha512-ODwesguQJM7FobmSlv/qGJkmrzUTlIRe92dEBy587RV2k2QGsQDQUCk6/KE+lzVJuyk7WQappNkzhgagaxY5Eg==", "requires": { "@mapbox/geojson-rewind": "^0.4.0", "@mapbox/geojson-types": "^1.0.2", @@ -11086,9 +11086,9 @@ "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=" }, "tinyqueue": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.2.tgz", - "integrity": "sha512-1oUV+ZAQaeaf830ui/p5JZpzGBw46qs1pKHcfqIc6/QxYDQuEmcBLIhiT0xAxLnekz+qxQusubIYk4cAS8TB2A==" + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz", + "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==" }, "tmp": { "version": "0.0.33", diff --git a/package.json b/package.json index a31c823c602..f0580f74b5c 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,7 @@ }, "dependencies": { "@plotly/d3-sankey": "0.7.2", + "@plotly/d3-sankey-circular": "0.33.1", "@turf/area": "^6.0.1", "@turf/centroid": "^6.0.2", "alpha-shape": "^1.0.0", @@ -68,7 +69,6 @@ "d3-force": "^1.0.6", "d3-hierarchy": "^1.1.8", "d3-interpolate": "1", - "@plotly/d3-sankey-circular": "0.33.1", "delaunay-triangulate": "^1.1.6", "es6-promise": "^3.0.2", "fast-isnumeric": "^1.1.3", @@ -91,7 +91,7 @@ "glslify": "^7.0.0", "has-hover": "^1.0.1", "has-passive-events": "^1.0.0", - "mapbox-gl": "1.0.0", + "mapbox-gl": "1.1.0", "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 index 998692d8df6..e42b3128958 100644 --- a/src/plots/mapbox/constants.js +++ b/src/plots/mapbox/constants.js @@ -8,7 +8,7 @@ 'use strict'; -var requiredVersion = '1.0.0'; +var requiredVersion = '1.1.0'; module.exports = { requiredVersion: requiredVersion, @@ -16,6 +16,32 @@ module.exports = { styleUrlPrefix: 'mapbox://styles/mapbox/', styleUrlSuffix: 'v9', + styleValuesMapbox: ['basic', 'streets', 'outdoors', 'light', 'dark', 'satellite', 'satellite-streets'], + styleValueOSM: 'open-street-map', + styleValueDflt: 'basic', + + styleOSM: { + id: 'osm', + version: 8, + sources: { + 'plotly-osm-tiles': { + type: 'raster', + 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', + source: 'plotly-osm-tiles', + minzoom: 0, + maxzoom: 22 + }] + }, + controlContainerClassName: 'mapboxgl-control-container', wrongVersionErrorMsg: [ diff --git a/src/plots/mapbox/index.js b/src/plots/mapbox/index.js index 1c453c5896b..787ae408905 100644 --- a/src/plots/mapbox/index.js +++ b/src/plots/mapbox/index.js @@ -43,7 +43,7 @@ exports.attributes = { } }; -var layoutAttrs = exports.layoutAttributes = require('./layout_attributes'); +exports.layoutAttributes = require('./layout_attributes'); exports.supplyLayoutDefaults = require('./layout_defaults'); @@ -142,7 +142,7 @@ function findAccessToken(gd, mapboxIds) { var style = opts.style; var token = opts.accesstoken; - if(typeof style === 'string' && layoutAttrs.style.values.indexOf(style) !== -1) { + if(typeof style === 'string' && constants.styleValuesMapbox.indexOf(style) !== -1) { if(token) { Lib.pushUnique(tokensUseful, token); } else { diff --git a/src/plots/mapbox/layout_attributes.js b/src/plots/mapbox/layout_attributes.js index 259d3d3cd33..2b39202f6f0 100644 --- a/src/plots/mapbox/layout_attributes.js +++ b/src/plots/mapbox/layout_attributes.js @@ -6,7 +6,6 @@ * LICENSE file in the root directory of this source tree. */ - 'use strict'; var Lib = require('../../lib'); @@ -17,6 +16,8 @@ var textposition = require('../../traces/scatter/attributes').textposition; var overrideAll = require('../../plot_api/edit_types').overrideAll; var templatedArray = require('../../plot_api/plot_template').templatedArray; +var constants = require('./constants'); + var fontAttr = fontAttrs({ description: [ 'Sets the icon text font (color=mapbox.layer.paint.text-color, size=mapbox.layer.layout.text-size).', @@ -43,13 +44,14 @@ var attrs = module.exports = overrideAll({ }, style: { valType: 'any', - values: ['basic', 'streets', 'outdoors', 'light', 'dark', 'satellite', 'satellite-streets'], - dflt: 'basic', + values: constants.styleValuesMapbox.concat(constants.styleValueOSM), + dflt: constants.styleValueDflt, role: 'style', description: [ 'Sets the Mapbox map style.', 'Either input one of the default Mapbox style names or the URL to a custom style', - 'or a valid Mapbox style JSON.' + 'or a valid Mapbox style JSON.', + 'From OpenStreetMap raster tiles, use *open-street-map*.' ].join(' ') }, diff --git a/src/plots/mapbox/mapbox.js b/src/plots/mapbox/mapbox.js index 2b88fdfb906..3cedd49b098 100644 --- a/src/plots/mapbox/mapbox.js +++ b/src/plots/mapbox/mapbox.js @@ -21,7 +21,6 @@ var dragElement = require('../../components/dragelement'); var prepSelect = require('../cartesian/select').prepSelect; var selectOnClick = require('../cartesian/select').selectOnClick; var constants = require('./constants'); -var layoutAttributes = require('./layout_attributes'); var createMapboxLayer = require('./layers'); function Mapbox(gd, id) { @@ -632,8 +631,6 @@ proto.getViewEdits = function(cont) { }; function getStyleObj(val) { - var styleValues = layoutAttributes.style.values; - var styleDflt = layoutAttributes.style.dflt; var styleObj = {}; if(Lib.isPlainObject(val)) { @@ -641,12 +638,17 @@ function getStyleObj(val) { styleObj.style = val; } else if(typeof val === 'string') { styleObj.id = val; - styleObj.style = (styleValues.indexOf(val) !== -1) ? - convertStyleVal(val) : - val; + + if(constants.styleValuesMapbox.indexOf(val) !== -1) { + styleObj.style = convertStyleVal(val); + } else if(val === constants.styleValueOSM) { + styleObj.style = constants.styleOSM; + } else { + styleObj.style = val; + } } else { - styleObj.id = styleDflt; - styleObj.style = convertStyleVal(styleDflt); + styleObj.id = constants.styleValueDflt; + styleObj.style = convertStyleVal(constants.styleValueDflt); } styleObj.transition = {duration: 0, delay: 0}; diff --git a/test/image/baselines/mapbox_osm-style.png b/test/image/baselines/mapbox_osm-style.png index aaf86b38ac7..ce98fcf649b 100644 Binary files a/test/image/baselines/mapbox_osm-style.png and b/test/image/baselines/mapbox_osm-style.png differ diff --git a/test/image/mocks/mapbox_osm-style.json b/test/image/mocks/mapbox_osm-style.json index a69aa8c0466..beb5841d86f 100644 --- a/test/image/mocks/mapbox_osm-style.json +++ b/test/image/mocks/mapbox_osm-style.json @@ -2,12 +2,29 @@ "data": [ { "type": "scattermapbox", + "name": "on custom style pointing to OSM", "lon": [ 10, 20 ], "lat": [ 20, 10 ] + }, + { + "type": "scattermapbox", + "name": "using style:open-street-map", + "lon": [ 10, 20 ], + "lat": [ 20, 10 ], + "subplot": "mapbox2" } ], "layout": { + "grid": {"rows": 2, "columns": 1}, + + "legend": { + "x": 0, + "y": 1, "yanchor": "bottom" + }, + "mapbox": { + "domain": {"row": 0, "column": 0}, + "style": { "id": "osm", "version": 8, @@ -31,6 +48,11 @@ } ] } + }, + "mapbox2": { + "domain": {"row": 1, "column": 0}, + + "style": "open-street-map" } } }