bring back mapbox in various places

Author: archmoj

.circleci/test.sh

@@ -95,6 +95,7 @@ case $1 in
     make-baselines-virtual-webgl)
         SUITE=$({\
                   find $ROOT/test/image/mocks/gl*     -type f -printf "%f\n"; \
+                  find $ROOT/test/image/mocks/mapbox* -type f -printf "%f\n"; \
                   find $ROOT/test/image/mocks/mapnew* -type f -printf "%f\n"; \
                 } | sed 's/\.json$//1' | circleci tests split)
         python3 test/image/make_baseline.py virtual-webgl $SUITE || EXIT_STATE=$?

devtools/test_dashboard/devtools.js

@@ -4,6 +4,7 @@
 
 var Fuse = require('fuse.js/dist/fuse.common.js');
 var mocks = require('../../build/test_dashboard_mocks.json');
+var credentials = require('../../build/credentials.json');
 var Lib = require('../../src/lib');
 
 require('./perf');
@@ -18,6 +19,10 @@ var Tabs = {
             // use local topojson files
             topojsonURL: '../../node_modules/sane-topojson/dist/',
 
+            // register mapbox access token
+            // run `npm run preset` if you haven't yet
+            mapboxAccessToken: credentials.MAPBOX_ACCESS_TOKEN,
+
             // show all logs in console
             logging: 2
         });

draftlogs/7015_change.md

@@ -36,6 +36,9 @@ Plotly.register([
     require('./heatmapgl'),
     require('../src/traces/parcoords/strict'),
     require('./parcats'),
+    require('./scattermapbox'),
+    require('./choroplethmapbox'),
+    require('./densitymapbox'),
     require('./scattermapnew'),
     require('./choroplethmapnew'),
     require('./densitymapnew'),

lib/index-strict.js

@@ -74,6 +74,7 @@
     "@plotly/d3": "3.8.2",
     "@plotly/d3-sankey": "0.7.2",
     "@plotly/d3-sankey-circular": "0.33.1",
+    "@plotly/mapbox-gl": "1.13.4",
     "@turf/area": "^6.4.0",
     "@turf/bbox": "^6.4.0",
     "@turf/centroid": "^6.0.2",

lib/locales/si.js

@@ -1561,7 +1561,11 @@ function getHoverLabelText(d, showCommonLabel, hovermode, fullLayout, t0, g) {
     if(d.zLabel !== undefined) {
         if(d.xLabel !== undefined) text += 'x: ' + d.xLabel + '<br>';
         if(d.yLabel !== undefined) text += 'y: ' + d.yLabel + '<br>';
-        if(d.trace.type !== 'choropleth' && d.trace.type !== 'choroplethmapnew') {
+        if(
+            d.trace.type !== 'choropleth' &&
+            d.trace.type !== 'choroplethmapbox' &&
+            d.trace.type !== 'choroplethmapnew'
+        ) {
             text += (text ? 'z: ' : '') + d.zLabel;
         }
     } else if(showCommonLabel && d[h0 + 'Label'] === t0) {

package-lock.json

@@ -19,16 +19,16 @@ module.exports = function supplyLayoutDefaults(layoutIn, layoutOut) {
     var dragMode = coerce('dragmode');
     if(dragMode === 'select') coerce('selectdirection');
 
-    // if only mapnew or geo subplots is present on graph,
+    // if only mapbox, mapnew or geo subplots is present on graph,
     // reset 'zoom' dragmode to 'pan' until 'zoom' is implemented,
     // so that the correct modebar button is active
-    var hasMapnew = layoutOut._has('mapnew');
+    var hasMap = layoutOut._has('mapbox') || layoutOut._has('mapnew');
     var hasGeo = layoutOut._has('geo');
     var len = layoutOut._basePlotModules.length;
 
     if(layoutOut.dragmode === 'zoom' && (
-        ((hasMapnew || hasGeo) && len === 1) ||
-        (hasMapnew && hasGeo && len === 2)
+        ((hasMap || hasGeo) && len === 1) ||
+        (hasMap && hasGeo && len === 2)
     )) {
         layoutOut.dragmode = 'pan';
     }

package.json

@@ -541,12 +541,14 @@ module.exports = function style(s, gd, legend) {
                     useGradient = true;
                     break;
                 case 'choropleth' :
+                case 'choroplethmapbox' :
                 case 'choroplethmapnew' :
                     ptsData = [
                         ['M-6,-6V6H6V-6Z']
                     ];
                     useGradient = true;
                     break;
+                case 'densitymapbox' :
                 case 'densitymapnew' :
                     ptsData = [
                         ['M-6,0 a6,6 0 1,0 12,0 a 6,6 0 1,0 -12,0']

src/components/fx/hover.js

@@ -651,6 +651,7 @@ modeBarButtons.resetViews = {
         handleCamera3d(gd, ev);
 
         resetView(gd, 'geo');
+        resetView(gd, 'mapbox');
         resetView(gd, 'mapnew');
     }
 };
@@ -684,6 +685,17 @@ function setSpikelineVisibility(gd) {
     return aobj;
 }
 
+modeBarButtons.resetViewMapbox = {
+    name: 'resetViewMapbox',
+    _cat: 'resetView',
+    title: function(gd) { return _(gd, 'Reset view'); },
+    attr: 'reset',
+    icon: Icons.home,
+    click: function(gd) {
+        resetView(gd, 'mapbox');
+    }
+};
+
 modeBarButtons.resetViewMapnew = {
     name: 'resetViewMapnew',
     _cat: 'resetView',
@@ -695,6 +707,16 @@ modeBarButtons.resetViewMapnew = {
     }
 };
 
+modeBarButtons.zoomInMapbox = {
+    name: 'zoomInMapbox',
+    _cat: 'zoomin',
+    title: function(gd) { return _(gd, 'Zoom in'); },
+    attr: 'zoom',
+    val: 'in',
+    icon: Icons.zoom_plus,
+    click: handleMapboxZoom
+};
+
 modeBarButtons.zoomInMapnew = {
     name: 'zoomInMapnew',
     _cat: 'zoomin',
@@ -705,6 +727,16 @@ modeBarButtons.zoomInMapnew = {
     click: handleMapnewZoom
 };
 
+modeBarButtons.zoomOutMapbox = {
+    name: 'zoomOutMapbox',
+    _cat: 'zoomout',
+    title: function(gd) { return _(gd, 'Zoom out'); },
+    attr: 'zoom',
+    val: 'out',
+    icon: Icons.zoom_minus,
+    click: handleMapboxZoom
+};
+
 modeBarButtons.zoomOutMapnew = {
     name: 'zoomOutMapnew',
     _cat: 'zoomout',
@@ -715,11 +747,19 @@ modeBarButtons.zoomOutMapnew = {
     click: handleMapnewZoom
 };
 
+function handleMapboxZoom(gd, ev) {
+    _handleMapZoom(gd, ev, 'mapbox');
+}
+
 function handleMapnewZoom(gd, ev) {
+    _handleMapZoom(gd, ev, 'mapnew');
+}
+
+function _handleMapZoom(gd, ev, mapType) {
     var button = ev.currentTarget;
     var val = button.getAttribute('data-val');
     var fullLayout = gd._fullLayout;
-    var subplotIds = fullLayout._subplots.mapnew || [];
+    var subplotIds = fullLayout._subplots[mapType] || [];
     var scalar = 1.05;
     var aObj = {};
 

src/components/fx/layout_defaults.js

@@ -109,6 +109,7 @@ function getButtonGroups(gd) {
     var hasFunnelarea = fullLayout._has('funnelarea');
     var hasGL2D = fullLayout._has('gl2d');
     var hasTernary = fullLayout._has('ternary');
+    var hasMapbox = fullLayout._has('mapbox');
     var hasMapnew = fullLayout._has('mapnew');
     var hasPolar = fullLayout._has('polar');
     var hasSmith = fullLayout._has('smith');
@@ -154,7 +155,7 @@ function getButtonGroups(gd) {
     var resetGroup = [];
     var dragModeGroup = [];
 
-    if((hasCartesian || hasGL2D || hasPie || hasFunnelarea || hasTernary) + hasGeo + hasGL3D + hasMapnew + hasPolar + hasSmith > 1) {
+    if((hasCartesian || hasGL2D || hasPie || hasFunnelarea || hasTernary) + hasGeo + hasGL3D + hasMapbox + hasMapnew + hasPolar + hasSmith > 1) {
         // graphs with more than one plot types get 'union buttons'
         // which reset the view or toggle hover labels across all subplots.
         hoverGroup = ['toggleHover'];
@@ -166,6 +167,10 @@ function getButtonGroups(gd) {
     } else if(hasGL3D) {
         hoverGroup = ['hoverClosest3d'];
         resetGroup = ['resetCameraDefault3d', 'resetCameraLastSave3d'];
+    } else if(hasMapbox) {
+        zoomGroup = ['zoomInMapbox', 'zoomOutMapbox'];
+        hoverGroup = ['toggleHover'];
+        resetGroup = ['resetViewMapbox'];
     } else if(hasMapnew) {
         zoomGroup = ['zoomInMapnew', 'zoomOutMapnew'];
         hoverGroup = ['toggleHover'];
@@ -200,7 +205,7 @@ function getButtonGroups(gd) {
         dragModeGroup = ['zoom3d', 'pan3d', 'orbitRotation', 'tableRotation'];
     } else if(((hasCartesian || hasGL2D) && !allAxesFixed) || hasTernary) {
         dragModeGroup = ['zoom2d', 'pan2d'];
-    } else if(hasMapnew || hasGeo) {
+    } else if(hasMapbox || hasMapnew || hasGeo) {
         dragModeGroup = ['pan2d'];
     } else if(hasPolar) {
         dragModeGroup = ['zoom2d'];
@@ -228,7 +233,7 @@ function getButtonGroups(gd) {
                 if(DRAW_MODES.indexOf(b) !== -1) {
                     // accept pre-defined drag modes i.e. shape drawing features as string
                     if(
-                        fullLayout._has('mapnew') || // draw shapes in paper coordinate (could be improved in future to support data coordinate, when there is no pitch)
+                        fullLayout._has('mapbox') || fullLayout._has('mapnew') || // draw shapes in paper coordinate (could be improved in future to support data coordinate, when there is no pitch)
                         fullLayout._has('cartesian') // draw shapes in data coordinate
                     ) {
                         dragModeGroup.push(b);

src/components/legend/style.js

@@ -752,7 +752,7 @@ function clearSelectionsCache(dragOptions, immediateSelect) {
             var selections;
             if(
                 isSelectMode &&
-                !hasSubplot(dragOptions) // only allow cartesian - no mapnew for now
+                !hasSubplot(dragOptions) // only allow cartesian - no maps for now
             ) {
                 selections = newSelections(outlines, dragOptions);
             }
@@ -1549,7 +1549,7 @@ function getFillRangeItems(dragOptions) {
     var plotinfo = dragOptions.plotinfo;
 
     return (
-        plotinfo.fillRangeItems || // allow subplots (i.e. geo, mapnew, sankey) to override fillRangeItems routine
+        plotinfo.fillRangeItems || // allow subplots (i.e. geo, mapbox, mapnew, sankey) to override fillRangeItems routine
         makeFillRangeItems(dragOptions.xaxes.concat(dragOptions.yaxes))
     );
 }

src/components/modebar/buttons.js

@@ -517,6 +517,7 @@ function setPlotContext(gd, config) {
         szOut.cartesian = 1;
         szOut.gl3d = 1;
         szOut.geo = 1;
+        szOut.mapbox = 1;
         szOut.mapnew = 1;
     } else if(typeof szIn === 'string') {
         var parts = szIn.split('+');
@@ -526,6 +527,7 @@ function setPlotContext(gd, config) {
     } else if(szIn !== false) {
         szOut.gl3d = 1;
         szOut.geo = 1;
+        szOut.mapbox = 1;
         szOut.mapnew = 1;
     }
 }
@@ -2387,6 +2389,7 @@ var layoutUIControlPatterns = [
     {pattern: /^(ternary\d*\.[abc]axis)\.(min|title\.text)$/},
     {pattern: /^(polar\d*\.radialaxis)\.((auto)?range|angle|title\.text)/},
     {pattern: /^(polar\d*\.angularaxis)\.rotation/},
+    {pattern: /^(mapbox\d*)\.(center|zoom|bearing|pitch)/},
     {pattern: /^(mapnew\d*)\.(center|zoom|bearing|pitch)/},
 
     {pattern: /^legend\.(x|y)$/, attr: 'editrevision'},

src/components/modebar/manage.js

@@ -157,12 +157,12 @@ var configAttributes = {
 
     scrollZoom: {
         valType: 'flaglist',
-        flags: ['cartesian', 'gl3d', 'geo', 'mapnew'],
+        flags: ['cartesian', 'gl3d', 'geo', 'mapbox', 'mapnew'],
         extras: [true, false],
         dflt: 'gl3d+geo+mapnew',
         description: [
             'Determines whether mouse wheel or two-finger scroll zooms is enable.',
-            'Turned on by default for gl3d, geo and mapnew subplots',
+            'Turned on by default for gl3d, geo, mapbox and mapnew subplots',
             '(as these subplot types do not have zoombox via pan),',
             'but turned off by default for cartesian subplots.',
             'Set `scrollZoom` to *false* to disable scrolling for all subplots.'
@@ -192,7 +192,7 @@ var configAttributes = {
             'This is the time interval (in ms) between first mousedown and',
             '2nd mouseup to constitute a double-click.',
             'This setting propagates to all on-subplot double clicks',
-            '(except for geo and mapnew) and on-legend double clicks.'
+            '(except for geo, mapbox and mapnew) and on-legend double clicks.'
         ].join(' ')
     },
 
@@ -382,6 +382,16 @@ var configAttributes = {
         ].join(' ')
     },
 
+    mapboxAccessToken: {
+        valType: 'string',
+        dflt: null,
+        description: [
+            'Mapbox access token (required to plot mapbox trace types)',
+            'If using an Mapbox Atlas server, set this option to \'\'',
+            'so that plotly.js won\'t attempt to authenticate to the public Mapbox server.'
+        ].join(' ')
+    },
+
     logging: {
         valType: 'integer',
         min: 0,

src/components/selections/select.js

@@ -526,7 +526,7 @@ proto.updateFx = function(fullLayout, geoLayout) {
             }
 
             if(clickMode.indexOf('event') > -1) {
-                // TODO: like pie and mapnew, this doesn't support right-click
+                // TODO: like pie and maps, this doesn't support right-click
                 // actually this one is worse, as right-click starts a pan, or leaves
                 // select in a weird state.
                 // Also, only tangentially related, we should cancel hover during pan

src/plot_api/plot_api.js

@@ -326,6 +326,8 @@ plots.supplyDefaults = function(gd, opts) {
 
     var formatObj = getFormatObj(gd, d3FormatKeys);
 
+    // stash the token from context so mapbox subplots can use it as default
+    newFullLayout._mapboxAccessToken = context.mapboxAccessToken;
 
     // first fill in what we can of layout without looking at data
     // because fullData needs a few things from layout

src/plot_api/plot_config.js

@@ -4,6 +4,7 @@ var Loggers = require('./lib/loggers');
 var noop = require('./lib/noop');
 var pushUnique = require('./lib/push_unique');
 var isPlainObject = require('./lib/is_plain_object');
+var addStyleRule = require('./lib/dom').addStyleRule;
 var ExtendModule = require('./lib/extend');
 
 var basePlotAttributes = require('./plots/attributes');
@@ -275,6 +276,14 @@ function registerTraceModule(_module) {
     var basePlotModule = _module.basePlotModule;
     var bpmName = basePlotModule.name;
 
+    // add mapbox-gl CSS here to avoid console warning on instantiation
+    if(bpmName === 'mapbox') {
+        var styleRules = basePlotModule.constants.styleRules;
+        for(var k in styleRules) {
+            addStyleRule('.js-plotly-plot .plotly .mapboxgl-' + k, styleRules[k]);
+        }
+    }
+
     // add maplibre-gl CSS here to avoid console warning on instantiation
     if(bpmName === 'mapnew') {
         addCss('https://unpkg.com/maplibre-gl@^4.3.2/dist/maplibre-gl.css');
@@ -283,7 +292,7 @@ function registerTraceModule(_module) {
     // if `plotly-geo-assets.js` is not included,
     // add `PlotlyGeoAssets` global to stash references to all fetched
     // topojson / geojson data
-    if((bpmName === 'geo' || bpmName === 'mapnew') &&
+    if((bpmName === 'geo' || bpmName === 'mapbox' || bpmName === 'mapnew') &&
         (window.PlotlyGeoAssets === undefined)
     ) {
         window.PlotlyGeoAssets = {topojson: {}};

src/plots/geo/geo.js

@@ -55,6 +55,7 @@ module.exports = function clonePlot(graphObj, options) {
     var oldLayout = graphObj.layout;
     var newData = extendDeep([], oldData);
     var newLayout = extendDeep({}, oldLayout, cloneLayoutOverride(options.tileClass));
+    var context = graphObj._context || {};
 
     if(options.width) newLayout.width = options.width;
     if(options.height) newLayout.height = options.height;
@@ -142,6 +143,7 @@ module.exports = function clonePlot(graphObj, options) {
             displaylogo: options.displaylogo || false,
             showLink: options.showLink || false,
             showTips: options.showTips || false,
+            mapboxAccessToken: context.mapboxAccessToken
         }
     };
 

src/plots/plots.js

@@ -8,6 +8,7 @@ exports.getDelay = function(fullLayout) {
     return (
         fullLayout._has('gl3d') ||
         fullLayout._has('gl2d') ||
+        fullLayout._has('mapbox') ||
         fullLayout._has('mapnew')
     ) ? 500 : 0;
 };