mapbox layout + fixes

Author: dmt0

src/components/fields/LocationSelector.js

@@ -91,7 +91,7 @@ class UnconnectedLocationSelector extends Component {
       container: {type: type},
     } = this.context;
 
-    return type === 'scattergeo' || type === 'scattermapbox' ? (
+    return type === 'scattergeo' ? (
       <Fragment>
         <Field {...this.props} attr={this.props.attr}>
           <Radio
@@ -116,7 +116,10 @@ class UnconnectedLocationSelector extends Component {
     ) : type === 'choropleth' ? (
       <Location attr="type" />
     ) : (
-      ''
+      <Fragment>
+        <DataSelector label={_('Latitude')} attr="lat" />
+        <DataSelector label={_('Longitude')} attr="lon" />
+      </Fragment>
     );
   }
 }

src/components/fields/derived.js

@@ -532,7 +532,7 @@ export const HoverInfo = connectToContainer(UnconnectedFlaglist, {
         options = [{label: _('Longitude'), value: 'lon'}, {label: _('Latitude'), value: 'lat'}];
       }
     } else if (container.type === 'scattermapbox') {
-      options = [{label: _('Longitude'), value: 'loc'}, {label: _('Latitude'), value: 'lat'}];
+      options = [{label: _('Longitude'), value: 'lon'}, {label: _('Latitude'), value: 'lat'}];
     } else if (container.type === 'scatterternary') {
       options = [
         {label: _('A'), value: 'a'},

src/default_panels/GraphSubplotsPanel.js

@@ -59,6 +59,29 @@ const GraphSubplotsPanel = (props, {localize: _}) => (
       <ColorPicker label={_('Plot Background')} attr="bgcolor" />
     </PlotlySection>
 
+    <PlotlySection name={_('Map Style')}>
+      <Dropdown
+        label={_('Mapbox Style')}
+        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'},
+        ]}
+        clearable={false}
+      />
+    </PlotlySection>
+    <PlotlySection name={_('Map Positioning')}>
+      <Numeric label={_('Center Latitude')} attr="center.lat" />
+      <Numeric label={_('Center Longitude')} attr="center.lon" />
+      <Numeric label={_('Zoom Level')} attr="zoom" min={0} />
+      <Numeric label={_('Bearing')} attr="bearing" />
+      <Numeric label={_('Pitch')} attr="pitch" min={0} />
+    </PlotlySection>
+
     <PlotlySection name={_('Map Projection')}>
       <Dropdown
         label={_('Region')}

src/default_panels/StyleTracesPanel.js

@@ -218,6 +218,10 @@ const StyleTracesPanel = (props, {localize: _}) => (
       <Numeric label={_('Border Width')} attr="marker.line.width" />
       <MultiColorPicker label={_('Border Color')} attr="marker.line.color" />
     </TraceMarkerSection>
+    <PlotlySection name={_('Lines')}>
+      <Numeric label={_('Line Width')} attr="line.width" />
+      <MultiColorPicker label={_('Line Color')} attr="line.color" />
+    </PlotlySection>
     <LayoutSection name={_('Size and Spacing')}>
       <Radio
         label={_('Box Mode')}
@@ -310,6 +314,7 @@ const StyleTracesPanel = (props, {localize: _}) => (
         'scatterternary',
         'bar',
         'scattergeo',
+        'scattermapbox',
       ]}
     >
       <DataSelector label={_('Text')} attr="text" />