basic support for no-token mapbox

Author: nicolaskruchten

package.json

@@ -15,7 +15,7 @@
     "fast-isnumeric": "^1.1.2",
     "immutability-helper": "^3.0.0",
     "plotly-icons": "1.3.12",
-    "plotly.js": "1.48.3",
+    "plotly.js": "1.49.4",
     "prop-types": "^15.7.2",
     "raf": "^3.4.1",
     "react-color": "^2.17.0",

src/EditorControls.js

@@ -18,6 +18,7 @@ import {
   shamefullyDeleteRelatedAnalysisTransforms,
   shamefullyAdjustSizeref,
   shamefullyAdjustAxisDirection,
+  shamefullyAdjustMapbox,
 } from './shame';
 import {EDITOR_ACTIONS} from './lib/constants';
 import isNumeric from 'fast-isnumeric';
@@ -87,6 +88,9 @@ class EditorControls extends Component {
         shamefullyAdjustAxisRef(graphDiv, payload);
         shamefullyAddTableColumns(graphDiv, payload);
         shamefullyAdjustSplitStyleTargetContainers(graphDiv, payload);
+        if (!this.props.mapBoxAccess) {
+          shamefullyAdjustMapbox(graphDiv, payload);
+        }
 
         for (let i = 0; i < payload.traceIndexes.length; i++) {
           for (const attr in payload.update) {

src/components/fields/derived.js

@@ -574,8 +574,14 @@ export const HoverInfo = connectToContainer(UnconnectedFlaglist, {
       } else if (container.lat || container.lon) {
         options = [{label: _('Longitude'), value: 'lon'}, {label: _('Latitude'), value: 'lat'}];
       }
-    } else if (container.type === 'scattermapbox') {
+    } else if (container.type === 'scattermapbox' || container.type === 'densitymapbox') {
       options = [{label: _('Longitude'), value: 'lon'}, {label: _('Latitude'), value: 'lat'}];
+    } else if (container.type === 'densitymapbox') {
+      options = [
+        {label: _('Longitude'), value: 'lon'},
+        {label: _('Latitude'), value: 'lat'},
+        {label: _('Z'), value: 'z'},
+      ];
     } else if (container.type === 'scatterternary') {
       options = [
         {label: _('A'), value: 'a'},
@@ -655,6 +661,34 @@ export const FillDropdown = connectToContainer(UnconnectedDropdown, {
   },
 });
 
+export const MapboxStyleDropdown = connectToContainer(UnconnectedDropdown, {
+  modifyPlotProps: (props, context, plotProps) => {
+    const {mapBoxAccess, localize: _} = context;
+
+    plotProps.options = [
+      {label: _('No tiles (white background)'), value: 'white-bg'},
+      {label: _('Open Street Map'), value: 'open-street-map'},
+      {label: _('Carto Positron'), value: 'carto-positron'},
+      {label: _('Carto Dark Matter'), value: 'carto-darkmatter'},
+      {label: _('Stamen Terrain'), value: 'stamen-terrain'},
+      {label: _('Stamen Toner'), value: 'stamen-toner'},
+      {label: _('Stamen Watercolor'), value: 'stamen-watercolor'},
+    ].concat(
+      !mapBoxAccess
+        ? []
+        : [
+            {label: _('Mapbox Basic'), value: 'basic'},
+            {label: _('Mapbox Outdoors'), value: 'outdoors'},
+            {label: _('Mapbox Light'), value: 'light'},
+            {label: _('Mapbox Dark'), value: 'dark'},
+            {label: _('Mapbox Satellite'), value: 'satellite'},
+            {label: _('Mapbox Satellite with Streets'), value: 'satellite-streets'},
+          ]
+    );
+    plotProps.clearable = false;
+  },
+});
+
 export const HoveronDropdown = connectToContainer(UnconnectedDropdown, {
   modifyPlotProps: (props, context, plotProps) => {
     const {localize: _} = context;

src/components/widgets/TraceTypeSelector.js

@@ -137,20 +137,16 @@ class TraceTypeSelector extends Component {
 
   renderCategories() {
     const {fullValue} = this.props;
-    const {mapBoxAccess, localize: _, chartHelp} = this.context;
+    const {localize: _, chartHelp} = this.context;
     const {
       traceTypesConfig: {traces, categories, complex},
     } = this.props;
 
     return categories(_).map((category, i) => {
-      let items = traces(_)
+      const items = traces(_)
         .filter(({category: {value}}) => value === category.value)
         .filter(i => i.value !== 'scattergl' && i.value !== 'scatterpolargl');
 
-      if (!mapBoxAccess) {
-        items = items.filter(i => i.value !== 'scattermapbox');
-      }
-
       const MAX_ITEMS = 4;
 
       const columnClasses =

src/default_panels/GraphCreatePanel.js

@@ -11,6 +11,7 @@ import {
   TraceSelector,
   TraceTypeSection,
   LocationSelector,
+  Numeric,
 } from '../components';
 import {
   HistogramInfoVertical,
@@ -68,6 +69,7 @@ const GraphCreatePanel = (props, {localize: _, setPanel}) => {
         }}
         attr="z"
       />
+      <Numeric label={_('Radius')} attr="radius" min={0} max={50} showSlider />
       <DataSelector label={_('Measure')} attr="measure" />
 
       <PlotlySection name={_('Nodes')}>

src/default_panels/StyleMapsPanel.js

@@ -11,17 +11,24 @@ import {
 
 const StyleMapsPanel = (props, {localize: _}) => (
   <SubplotAccordion>
-    <PlotlySection name={_('Map Style')} attr="style">
+    <PlotlySection name={_('Base Map')} attr="style">
       <Dropdown
-        label={_('Mapbox Style')}
+        label={_('Tiles')}
         attr="style"
         options={[
-          {label: _('Basic'), value: 'basic'},
-          {label: _('Outdoors'), value: 'outdoors'},
-          {label: _('Light'), value: 'light'},
-          {label: _('Dark'), value: 'dark'},
-          {label: _('Satellite'), value: 'satellite'},
-          {label: _('Satellite with Streets'), value: 'satellite-streets'},
+          {label: _('No tiles (white background)'), value: 'white-bg'},
+          {label: _('Open Street Map'), value: 'open-street-map'},
+          {label: _('Carto Positron'), value: 'carto-positron'},
+          {label: _('Carto Dark Matter'), value: 'carto-darkmatter'},
+          {label: _('Stamen Terrain'), value: 'stamen-terrain'},
+          {label: _('Stamen Toner'), value: 'stamen-toner'},
+          {label: _('Stamen Watercolor'), value: 'stamen-watercolor'},
+          {label: _('Mapbox Basic'), value: 'basic'},
+          {label: _('Mapbox Outdoors'), value: 'outdoors'},
+          {label: _('Mapbox Light'), value: 'light'},
+          {label: _('Mapbox Dark'), value: 'dark'},
+          {label: _('Mapbox Satellite'), value: 'satellite'},
+          {label: _('Mapbox Satellite with Streets'), value: 'satellite-streets'},
         ]}
         clearable={false}
       />

src/lib/constants.js

@@ -78,7 +78,7 @@ export const TRACE_TO_AXIS = {
   ternary: ['scatterternary'],
   gl3d: ['scatter3d', 'surface', 'mesh3d', 'cone', 'streamtube'],
   geo: ['scattergeo', 'choropleth'],
-  mapbox: ['scattermapbox'],
+  mapbox: ['scattermapbox', 'choroplethmapbox', 'densitymapbox'],
   polar: ['scatterpolar', 'scatterpolargl', 'barpolar'],
 };
 
@@ -104,8 +104,8 @@ export const subplotName = (type, _) =>
     ternary: _('Ternary'),
     gl3d: _('Scene'),
     scene: _('Scene'),
-    geo: _('Geo'),
-    mapbox: _('Mapbox'),
+    geo: _('Map'),
+    mapbox: _('Tile Map'),
     polar: _('Polar'),
   }[type]);
 

src/lib/traceTypes.js

@@ -145,21 +145,31 @@ export const traceTypes = _ => [
     label: _('2D Contour Histogram'),
     category: chartCategory(_).DISTRIBUTIONS,
   },
-  {
-    value: 'choropleth',
-    label: _('Choropleth'),
-    category: chartCategory(_).MAPS,
-  },
   {
     value: 'scattermapbox',
-    label: _('Satellite Map'),
+    label: _('Tile Map'),
     category: chartCategory(_).MAPS,
   },
   {
     value: 'scattergeo',
     label: _('Atlas Map'),
     category: chartCategory(_).MAPS,
   },
+  {
+    value: 'choroplethmapbox',
+    label: _('Choropleth Tile Map'),
+    category: chartCategory(_).MAPS,
+  },
+  {
+    value: 'choropleth',
+    label: _('Choropleth Atlas Map'),
+    category: chartCategory(_).MAPS,
+  },
+  {
+    value: 'densitymapbox',
+    label: _('Density Tile Map'),
+    category: chartCategory(_).MAPS,
+  },
   {
     value: 'scatterpolar',
     label: _('Polar Scatter'),

src/shame.js

@@ -89,6 +89,13 @@ export const shamefullyAdjustGeo = ({layout}, {update}) => {
   });
 };
 
+export const shamefullyAdjustMapbox = gd => {
+  if (gd.layout && gd.layout.mapbox && gd.layout.mapbox.style) {
+    return;
+  }
+  nestedProperty(gd.layout, 'mapbox.style').set('open-street-map');
+};
+
 export const shamefullyAddTableColumns = (graphDiv, {traceIndexes, update}) => {
   if (
     update['cells.values'] &&