choropleth geojson improvements

Author: nicolaskruchten

src/components/fields/Dropzone.js

@@ -27,7 +27,7 @@ UnconnectedDropzone.propTypes = {
 UnconnectedDropzone.displayName = 'UnconnectedDropzone';
 
 function modifyPlotProps(props, context, plotProps) {
-  if (context.container.type === 'choroplethmapbox') {
+  if (context.container.type === 'choroplethmapbox' || context.container.type === 'choropleth') {
     plotProps.isVisible = true;
   }
 }

src/components/fields/LocationSelector.js

@@ -28,6 +28,7 @@ class UnconnectedLocation extends Component {
           attr="locationmode"
           clearable={false}
           options={[
+            {label: _('GeoJSON feature'), value: 'geojson-id'},
             {label: _('Country Names'), value: 'country names'},
             {label: _('Country Abbreviations (ISO-3)'), value: 'ISO-3'},
             {

src/default_panels/GraphCreatePanel.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import {
   DataSelector,
   Dropdown,
+  DropdownCustom,
   Radio,
   PlotlySection,
   AxesCreator,
@@ -74,6 +75,17 @@ const GraphCreatePanel = (props, {localize: _, setPanel}) => {
         }}
         attr="z"
       />
+      <DropdownCustom
+        label={_('GeoJSON Location Field')}
+        attr="featureidkey"
+        options={[
+          {label: _('id'), value: 'id'},
+          {label: _('Custom'), value: 'custom'},
+        ]}
+        customOpt="custom"
+        dafaultOpt=""
+        clearable={false}
+      />
       <Numeric label={_('Radius')} attr="radius" min={0} max={50} showSlider />
       <DataSelector label={_('Measure')} attr="measure" />
 

src/default_panels/StyleMapsPanel.js

@@ -35,6 +35,16 @@ const StyleMapsPanel = (props, {localize: _}) => (
       <Numeric label={_('Zoom Level')} attr="zoom" min={0} />
       <Numeric label={_('Bearing')} attr="bearing" />
       <Numeric label={_('Pitch')} attr="pitch" min={0} />
+      <Dropdown
+        label={_('Bounds Fitting')}
+        attr="fitbounds"
+        options={[
+          {label: _('Off'), value: false},
+          {label: _('Locations'), value: 'locations'},
+          {label: _('GeoJSON'), value: 'geojson'},
+        ]}
+        clearable={false}
+      />
     </PlotlySection>
 
     <PlotlySection name={_('Map Projection')}>
@@ -84,6 +94,28 @@ const StyleMapsPanel = (props, {localize: _}) => (
           {label: _('Sinusoidal'), value: 'sinusoidal'},
         ]}
       />
+      <Numeric label={_('Scale')} attr="projection.scale" min={0} />
+      <Numeric label={_('Center Latitude')} attr="projection.rotation.lon" min={0} />
+      <Numeric label={_('Center Longitude')} attr="projection.rotation.lat" min={0} />
+      <Numeric label={_('Roll')} attr="projection.rotation.roll" min={0} />
+    </PlotlySection>
+
+    <PlotlySection name={_('Base Map')} attr="visible">
+      <Radio
+        attr="visible"
+        options={[
+          {label: _('Show'), value: true},
+          {label: _('Hide'), value: false},
+        ]}
+      />
+      <Radio
+        label={_('Resolution')}
+        attr="resolution"
+        options={[
+          {label: _('1:110,000,000'), value: 110},
+          {label: _('1:50,000,000'), value: 50},
+        ]}
+      />
     </PlotlySection>
 
     <PlotlySection name={_('Country Borders')} attr="showcountries">
@@ -172,21 +204,6 @@ const StyleMapsPanel = (props, {localize: _}) => (
       <Numeric label={_('Width')} attr="framewidth" units="px" />
       <ColorPicker label={_('Color')} attr="framecolor" />
     </PlotlySection>
-
-    <PlotlySection name={_('Map Options')}>
-      <Radio
-        label={_('Resolution')}
-        attr="resolution"
-        options={[
-          {label: _('1:110,000,000'), value: 110},
-          {label: _('1:50,000,000'), value: 50},
-        ]}
-      />
-      <Numeric label={_('Scale')} attr="projection.scale" min={0} />
-      <Numeric label={_('Latitude')} attr="projection.rotation.lon" min={0} />
-      <Numeric label={_('Longitude')} attr="projection.rotation.lat" min={0} />
-      <Numeric label={_('Roll')} attr="projection.rotation.roll" min={0} />
-    </PlotlySection>
   </SubplotAccordion>
 );