add *open-street-map* mapbox.style value

... which is an alias to a mapbox style object pointing
    to the OpenStreetMap raster tiles

Author: etpinard

src/plots/mapbox/constants.js

@@ -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: [

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 {

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(' ')
     },
 

src/plots/mapbox/mapbox.js

@@ -17,7 +17,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) {
@@ -538,21 +537,24 @@ proto.getViewEdits = function(cont) {
 };
 
 function getStyleObj(val) {
-    var styleValues = layoutAttributes.style.values;
-    var styleDflt = layoutAttributes.style.dflt;
     var styleObj = {};
 
     if(Lib.isPlainObject(val)) {
         styleObj.id = val.id;
         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};

test/image/baselines/mapbox_osm-style.png

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