@carto/kepler.gl 0.0.64 → 0.0.65-alpha.labels.2

package/src/components/side-panel/layer-panel/text-label-panel.js

@@ -65,9 +65,20 @@ function TextLabelPanelFactory(RangeSlider, LayerConfigGroup, FieldSelector, Col
     };
 
     render() {
-      const {updateLayerTextLabel, textLabel, fields, AddButton} = this.props;
+      const {layer, updateLayerTextLabel, textLabel, fields, AddButton} = this.props;
       const currentFields = textLabel.map(tl => tl.field && tl.field.name).filter(d => d);
+
       return (
+        // Switch only works with group/property set to customMarkers???
+        /* <LayerConfigGroup
+          type="boolean"
+          disabled={undefined}
+          layer={layer}
+          group="labels"
+          property="labelsEnabled"
+          label="panel.text.label"
+          collapsible
+        >*/
         <LayerConfigGroup label={'panel.text.label'} collapsible>
           <ConfigGroupCollapsibleHeader>
             <FieldSelector
@@ -80,11 +91,11 @@ function TextLabelPanelFactory(RangeSlider, LayerConfigGroup, FieldSelector, Col
           <ConfigGroupCollapsibleContent>
             {textLabel.map((tl, idx) => (
               <div
-                key={tl.field ? tl.field.name : `null-${idx}`}
+                key={`${tl.field ? tl.field.name : 'null'}-${idx}`}
                 className="side-panel-section-group"
               >
                 <PanelLabel>
-                  <FormattedMessage id={'panel.text.labelWithId'} values={{labelId: idx + 1}} />
+                  <FormattedMessage id={`panel.text.${idx === 0 ? 'main' : 'secondary'}Label`} />
                 </PanelLabel>
                 <SidePanelSection>
                   <FieldSelector
@@ -120,33 +131,51 @@ function TextLabelPanelFactory(RangeSlider, LayerConfigGroup, FieldSelector, Col
                   />
                 </SidePanelSection>
                 <SidePanelSection>
-                  <SpaceBetweenFlexbox>
-                    <SBFlexboxItem>
-                      <PanelLabel>
-                        <FormattedMessage id="panel.text.textAnchor" />
-                      </PanelLabel>
-                      <ItemSelector
-                        {...LAYER_TEXT_CONFIGS.textAnchor}
-                        selectedItems={tl.anchor}
-                        onChange={val => updateLayerTextLabel(idx, 'anchor', val)}
-                      />
-                    </SBFlexboxItem>
-                    <SBFlexboxItem>
-                      <PanelLabel>
-                        <FormattedMessage id="panel.text.alignment" />
-                      </PanelLabel>
-                      <ItemSelector
-                        {...LAYER_TEXT_CONFIGS.textAlignment}
-                        selectedItems={tl.alignment}
-                        onChange={val => updateLayerTextLabel(idx, 'alignment', val)}
-                      />
-                    </SBFlexboxItem>
-                  </SpaceBetweenFlexbox>
+                  <PanelLabel>
+                    <FormattedMessage id="panel.text.outlineColor" />
+                  </PanelLabel>
+                  <ColorSelector
+                    colorSets={[
+                      {
+                        selectedColor: tl.outlineColor,
+                        setColor: v => updateLayerTextLabel(idx, 'outlineColor', v)
+                      }
+                    ]}
+                  />
                 </SidePanelSection>
+                {idx === 0 && (
+                  <SidePanelSection>
+                    <SpaceBetweenFlexbox>
+                      <SBFlexboxItem>
+                        <PanelLabel>
+                          <FormattedMessage id="panel.text.textAnchor" />
+                        </PanelLabel>
+                        <ItemSelector
+                          {...LAYER_TEXT_CONFIGS.textAnchor}
+                          selectedItems={tl.anchor}
+                          onChange={val => updateLayerTextLabel(idx, 'anchor', val)}
+                        />
+                      </SBFlexboxItem>
+                      <SBFlexboxItem>
+                        <PanelLabel>
+                          <FormattedMessage id="panel.text.alignment" />
+                        </PanelLabel>
+                        <ItemSelector
+                          {...LAYER_TEXT_CONFIGS.textAlignment}
+                          selectedItems={tl.alignment}
+                          onChange={val => updateLayerTextLabel(idx, 'alignment', val)}
+                        />
+                      </SBFlexboxItem>
+                    </SpaceBetweenFlexbox>
+                  </SidePanelSection>
+                )}
               </div>
             ))}
             <SidePanelSection>
-              <AddButton onClick={val => updateLayerTextLabel(textLabel.length)} />
+              <AddButton
+                disabled={textLabel.length >= 2}
+                onClick={val => updateLayerTextLabel(textLabel.length)}
+              />
             </SidePanelSection>
           </ConfigGroupCollapsibleContent>
         </LayerConfigGroup>

package/src/deckgl-layers/point-label-layer/point-label-layer.js

@@ -0,0 +1,174 @@
+import {CompositeLayer} from '@deck.gl/core';
+import {TextLayer} from '@deck.gl/layers';
+
+// TODO remove prior to release
+const SHOW_TEXT_BORDER = false;
+
+const [LEFT, TOP, RIGHT, BOTTOM] = [0, 1, 2, 3];
+class EnhancedTextLayer extends TextLayer {
+  filterSubLayer({layer, renderPass}) {
+    const background = layer.id.includes('primary-background');
+    if (renderPass === 'collision') {
+      return background; // Only draw primary background layer in collision pass
+    } else {
+      return !background || (SHOW_TEXT_BORDER && this.props.getBorderWidth); // Do not draw background layer in other passes
+    }
+  }
+}
+
+// TODO fix in deck.gl
+TextLayer.defaultProps.fontSettings = {type: 'object', value: {}, optional: true, compare: 2};
+
+const defaultProps = {
+  ...TextLayer.defaultProps,
+  getRadius: {type: 'accessor', value: 1},
+  radiusScale: {type: 'number', min: 0, value: 1}
+};
+
+export class PointLabelLayer extends CompositeLayer {
+  static defaultProps = defaultProps;
+
+  calculatePixelOffset(secondary) {
+    const {
+      getTextAnchor: anchor,
+      getAlignmentBaseline: alignment,
+      getRadius,
+      radiusScale,
+      sizeScale
+    } = this.props;
+    const xMult = anchor === 'middle' ? 0 : anchor === 'start' ? 1 : -1;
+    const yMult = alignment === 'center' ? 0 : alignment === 'bottom' ? 1 : -1;
+
+    // Place secondary label under main label (spacing 1 / 3 main label font size)
+    const yOffset = secondary ? (1 + 1 / 3) * sizeScale : 0;
+    const xPadding = sizeScale / 4; // Padding based on font size (font size / 4)
+    const yPadding = sizeScale;
+    const radiusPadding = 1 + 1 / 4; // Padding based on point radius (radius/ 4)
+
+    return typeof getRadius === 'function'
+      ? d => {
+          const r = (d ? getRadius(d) : 1) * radiusScale * radiusPadding;
+          return [xMult * (r + xPadding), yMult * (r + yPadding) + yOffset];
+        }
+      : [
+          xMult * (getRadius * radiusScale * radiusPadding + xPadding),
+          yMult * (getRadius * radiusScale * radiusPadding + yPadding) + yOffset
+        ];
+  }
+
+  calculateBackgroundPadding(getPixelOffset) {
+    // Alignment based only on first label
+    const {alignment, anchor, sizeScale} = this.props;
+
+    // Heuristics to avoid label overlap (should we base this on the text length?)
+    const paddingX = 12 * sizeScale;
+    const paddingY = 3 * sizeScale;
+    const backgroundPadding = [0, 0, 0, 0];
+    if (alignment === 'top') {
+      backgroundPadding[TOP] = paddingY;
+    } else if (alignment === 'bottom') {
+      backgroundPadding[BOTTOM] = paddingY;
+    } else {
+      backgroundPadding[TOP] = 0.5 * paddingY;
+      backgroundPadding[BOTTOM] = 0.5 * paddingY;
+    }
+    if (anchor === 'start') {
+      backgroundPadding[LEFT] = paddingX;
+    } else if (anchor === 'end') {
+      backgroundPadding[RIGHT] = paddingX;
+    } else {
+      backgroundPadding[LEFT] = 0.5 * paddingX;
+      backgroundPadding[RIGHT] = 0.5 * paddingX;
+    }
+
+    // For getRadius function, invoke without data, as there is no backgroundPadding accessor
+    const pixelOffset = Array.isArray(getPixelOffset) ? getPixelOffset : getPixelOffset();
+    backgroundPadding[LEFT] += pixelOffset[0];
+    backgroundPadding[RIGHT] -= pixelOffset[0];
+    backgroundPadding[TOP] += pixelOffset[1];
+    backgroundPadding[BOTTOM] -= pixelOffset[1];
+
+    return backgroundPadding;
+  }
+
+  renderTextLayer(id, props) {
+    const {
+      data,
+
+      fontFamily,
+      fontSettings,
+      fontWeight,
+      outlineColor,
+      outlineWidth,
+      sizeScale,
+
+      getAlignmentBaseline,
+      getColor,
+      getPosition,
+      getTextAnchor,
+
+      updateTriggers
+    } = this.props;
+
+    return new EnhancedTextLayer(
+      this.getSubLayerProps({
+        id,
+        data: data,
+
+        fontFamily,
+        fontSettings,
+        fontWeight,
+        outlineColor,
+        outlineWidth,
+        sizeScale,
+
+        getAlignmentBaseline,
+        getColor,
+        getPosition,
+        getTextAnchor,
+
+        updateTriggers
+      }),
+      {
+        getSize: 1
+      },
+      // DEBUG
+      SHOW_TEXT_BORDER
+        ? {getBackgroundColor: [0, 0, 0, 0], getBorderColor: [255, 0, 0, 80], getBorderWidth: 1}
+        : {},
+      props
+    );
+  }
+
+  renderLayers() {
+    const {
+      getText,
+      getSecondaryColor,
+      getSecondaryText,
+      secondaryOutlineColor,
+      secondarySizeScale
+    } = this.props;
+    const getPixelOffset = this.calculatePixelOffset();
+    const backgroundPadding = this.calculateBackgroundPadding(getPixelOffset);
+    const out = [
+      this.renderTextLayer('primary', {
+        backgroundPadding,
+        getText,
+        getPixelOffset,
+        background: true // Only use background for primary label for faster collisions
+      }),
+      getSecondaryText &&
+        this.renderTextLayer('secondary', {
+          getText: getSecondaryText,
+          getPixelOffset: this.calculatePixelOffset(true),
+
+          // Optional overrides
+          ...(getSecondaryColor && {getColor: getSecondaryColor}),
+          ...(secondarySizeScale && {sizeScale: secondarySizeScale}),
+          ...(secondaryOutlineColor && {outlineColor: secondaryOutlineColor})
+        })
+    ];
+
+    return out;
+  }
+}

package/src/index.js

@@ -39,6 +39,9 @@ export * from './components';
 // Layers
 export * from './layers';
 
+// label layer (move to deck.gl/carto?)
+export {PointLabelLayer} from './deckgl-layers/point-label-layer/point-label-layer';
+
 // Styles
 export * from './styles';
 

package/src/layers/base-layer.js

@@ -20,9 +20,9 @@
 
 import {console as Console} from 'global/window';
 import keymirror from 'keymirror';
-import {DataFilterExtension} from '@deck.gl/extensions';
+import {CollisionFilterExtension, DataFilterExtension} from '@deck.gl/extensions';
 import {COORDINATE_SYSTEM, Layer as DeckLayer} from '@deck.gl/core';
-import {TextLayer} from '@deck.gl/layers';
+import {PointLabelLayer} from '../deckgl-layers/point-label-layer/point-label-layer';
 
 // Workaround until https://github.com/visgl/deck.gl/pull/7513 is released
 DeckLayer.defaultProps.getFilterValue = {type: 'accessor', value: 0};
@@ -103,6 +103,7 @@ const FALLBACK_ICON =
 const MAX_SAMPLE_SIZE = 5000;
 const defaultDomain = [0, 1];
 const dataFilterExtension = new DataFilterExtension({filterSize: MAX_GPU_FILTERS});
+const collisionFilterExtension = new CollisionFilterExtension();
 
 const defaultDataAccessor = dc => d => d;
 const defaultGetFieldValue = (field, d) => field.valueAccessor(d);
@@ -1341,51 +1342,87 @@ class Layer {
     };
   }
 
-  renderTextLabelLayer({getPosition, getPixelOffset, updateTriggers, sharedProps}, renderOpts) {
+  renderTextLabelLayer(
+    {getPosition, getRadius, radiusScale, updateTriggers, sharedProps},
+    renderOpts
+  ) {
     const {data, mapState} = renderOpts;
     const {textLabel, visibilityByZoom} = this.config;
+    // const extensions = [...sharedProps.extensions];
+    const extensions = [...sharedProps.extensions, collisionFilterExtension];
 
-    return data.textLabels.reduce((accu, d, i) => {
-      if (d.getText) {
-        accu.push(
-          new TextLayer({
-            ...sharedProps,
-            id: `${this.id}-label-${textLabel[i].field?.name}`,
-            data: data.data,
-            visibilityByZoom,
-            getText: d.getText,
-            getPosition,
-            characterSet: d.characterSet,
-            getPixelOffset: getPixelOffset(textLabel[i]),
-            getSize: 1,
-            sizeScale: textLabel[i].size,
-            getTextAnchor: textLabel[i].anchor,
-            getAlignmentBaseline: textLabel[i].alignment,
-            getColor: textLabel[i].color,
-            parameters: {
-              // text will always show on top of all layers
-              depthTest: false
-            },
-
-            getFilterValue: data.getFilterValue,
-            updateTriggers: {
-              ...updateTriggers,
-              getText: textLabel[i].field?.name,
-              getPixelOffset: {
-                ...updateTriggers.getPixelOffset,
-                ...updateTriggers.getRadius,
-                anchor: textLabel[i].anchor,
-                alignment: textLabel[i].alignment
-              },
-              getTextAnchor: textLabel[i].anchor,
-              getAlignmentBaseline: textLabel[i].alignment,
-              getColor: textLabel[i].color
-            }
-          })
-        );
-      }
-      return accu;
-    }, []);
+    if (!data || !data.textLabels || !data.textLabels[0] || !data.textLabels[0].getText) {
+      return null;
+    }
+
+    // TODO other labels
+    const i = 0;
+
+    const [mainLabel, secondaryLabel] = textLabel;
+    const {alignment, anchor, color: getColor, outlineColor, size: sizeScale} = mainLabel;
+    const {
+      color: getSecondaryColor,
+      outlineColor: secondaryOutlineColor,
+      size: secondarySizeScale
+    } = secondaryLabel || {};
+
+    return [
+      new PointLabelLayer({
+        ...sharedProps,
+        id: `${this.id}-label`,
+        data: data.data,
+        visibilityByZoom,
+        characterSet: 'auto',
+
+        extensions,
+        collisionEnabled: true,
+        collisionGroup: `${this.id}-labels`,
+
+        getText: data.textLabels[0].getText,
+        getColor,
+        sizeScale,
+        outlineColor,
+
+        ...(secondaryLabel && {
+          getSecondaryText: data.textLabels[1].getText,
+          getSecondaryColor,
+          secondarySizeScale,
+          secondaryOutlineColor
+        }),
+
+        // Position
+        getPosition,
+        getRadius,
+        radiusScale,
+        getTextAnchor: anchor,
+        getAlignmentBaseline: alignment,
+
+        // Style
+        fontFamily: 'Inter, sans',
+        fontSettings: {sdf: true},
+        fontWeight: 500,
+        outlineWidth: 4,
+        parameters: {
+          // text will always show on top of all layers
+          depthTest: false
+        },
+
+        getFilterValue: data.getFilterValue,
+        updateTriggers: {
+          ...updateTriggers,
+          getText: textLabel[i].field?.name,
+          getPixelOffset: {
+            ...updateTriggers.getPixelOffset,
+            ...updateTriggers.getRadius,
+            anchor: mainLabel.anchor,
+            alignment: mainLabel.alignment
+          },
+          getTextAnchor: mainLabel.anchor,
+          getAlignmentBaseline: mainLabel.alignment,
+          getColor: textLabel[i].color
+        }
+      })
+    ];
   }
 
   /**

package/src/layers/layer-factory.js

@@ -27,6 +27,7 @@ export const PROPERTY_GROUPS = keyMirror({
   color: null,
   stroke: null,
   customMarkers: null,
+  labels: null,
   radius: null,
   height: null,
   angle: null,
@@ -43,8 +44,9 @@ export {DEFAULT_COLOR_RANGE};
 /** @type {import('./layer-factory').LayerTextLabel} */
 export const DEFAULT_TEXT_LABEL = {
   field: null,
-  color: [255, 255, 255],
-  size: 18,
+  color: [44, 48, 50],
+  outlineColor: [255, 255, 255],
+  size: 12,
   offset: [0, 0],
   anchor: 'start',
   alignment: 'center'
@@ -387,6 +389,13 @@ export const LAYER_VIS_CONFIGS = {
     group: PROPERTY_GROUPS.display,
     property: 'filled'
   },
+  labels: {
+    type: 'boolean',
+    label: 'layerVisConfigs.labels',
+    defaultValue: false,
+    group: PROPERTY_GROUPS.labels,
+    property: 'labels'
+  },
   extruded: {
     type: 'boolean',
     defaultValue: false,
@@ -430,6 +439,13 @@ export const LAYER_VIS_CONFIGS = {
     group: PROPERTY_GROUPS.customMarkers,
     property: 'customMarkers'
   },
+  labelsEnabled: {
+    type: 'boolean',
+    defaultValue: true,
+    label: 'layerVisConfigs.labelsEnabled',
+    group: PROPERTY_GROUPS.labels,
+    property: 'labelsEnabled'
+  },
   customMarkersUrl: {
     type: 'text',
     defaultValue: '',
@@ -450,8 +466,8 @@ export const LAYER_VIS_CONFIGS = {
 export const LAYER_TEXT_CONFIGS = {
   fontSize: {
     type: 'number',
-    range: [1, 100],
-    value0: 1,
+    range: [6, 32],
+    value0: 6,
     step: 1,
     isRanged: false,
     label: 'Font size',

package/src/layers/layer-text-label.js

@@ -21,30 +21,25 @@
 import {notNullorUndefined} from 'utils/data-utils';
 import uniq from 'lodash.uniq';
 
-export const defaultPadding = 20;
-
 export function getTextOffsetByRadius(radiusScale, getRadius) {
   return textLabel => {
     const xMult = textLabel.anchor === 'middle' ? 0 : textLabel.anchor === 'start' ? 1 : -1;
     const yMult = textLabel.alignment === 'center' ? 0 : textLabel.alignment === 'bottom' ? 1 : -1;
 
-    const sizeOffset =
-      textLabel.alignment === 'center'
-        ? 0
-        : textLabel.alignment === 'bottom'
-        ? textLabel.size
-        : textLabel.size;
+    const sizeOffset = Math.abs(yMult * textLabel.size);
 
-    const padding = defaultPadding;
+    const xPadding = textLabel.size / 4; // Padding based on font size (font size / 4)
+    const yPadding = textLabel.size;
+    const radiusPadding = 1 + 1 / 4; // Padding based on point radius (radius/ 4)
 
     return typeof getRadius === 'function'
       ? d => [
-          xMult * (getRadius(d) * radiusScale + padding),
-          yMult * (getRadius(d) * radiusScale + padding + sizeOffset)
+          xMult * (getRadius(d) * radiusScale * radiusPadding + xPadding),
+          yMult * (getRadius(d) * radiusScale * radiusPadding + yPadding)
         ]
       : [
-          xMult * (getRadius * radiusScale + padding),
-          yMult * (getRadius * radiusScale + padding + sizeOffset)
+          xMult * (getRadius * radiusScale * radiusPadding + xPadding),
+          yMult * (getRadius * radiusScale * radiusPadding + yPadding)
         ];
   };
 }
@@ -54,40 +49,9 @@ export const textLabelAccessor = textLabel => dc => d => {
   return notNullorUndefined(val) ? String(val) : '';
 };
 
-export const formatTextLabelData = ({
-  textLabel,
-  triggerChanged,
-  oldLayerData,
-  data,
-  dataContainer
-}) => {
+export const formatTextLabelData = ({textLabel, dataContainer}) => {
   return textLabel.map((tl, i) => {
-    if (!tl.field) {
-      // if no field selected,
-      return {
-        getText: null,
-        characterSet: []
-      };
-    }
-
-    const getText = textLabelAccessor(tl)(dataContainer);
-    let characterSet;
-
-    if (
-      !triggerChanged[`getLabelCharacterSet-${i}`] &&
-      oldLayerData &&
-      oldLayerData.textLabels &&
-      oldLayerData.textLabels[i]
-    ) {
-      characterSet = oldLayerData.textLabels[i].characterSet;
-    } else {
-      const allLabels = tl.field ? data.map(getText) : [];
-      characterSet = uniq(allLabels.join(''));
-    }
-
-    return {
-      characterSet,
-      getText
-    };
+    const getText = tl.field ? textLabelAccessor(tl)(dataContainer) : null;
+    return {getText};
   });
 };

package/src/layers/point-layer/point-layer.js

@@ -29,7 +29,7 @@ import {findDefaultColorField} from 'utils/dataset-utils';
 import PointLayerIcon from './point-layer-icon';
 import {DEFAULT_LAYER_COLOR, CHANNEL_SCALES, UNKNOWN_COLOR} from 'constants/default-settings';
 
-import {getTextOffsetByRadius, formatTextLabelData} from '../layer-text-label';
+import {formatTextLabelData} from '../layer-text-label';
 
 export const pointPosAccessor = ({lat, lng, altitude}) => dc => d => [
   dc.valueAt(d.index, lng.fieldIdx),
@@ -47,6 +47,7 @@ export const pointVisConfigs = {
   customMarkers: 'customMarkers',
   customMarkersUrl: 'customMarkersUrl',
   customMarkersRange: 'customMarkersRange',
+  labelsEnabled: 'labelsEnabled',
   opacity: 'opacity',
   outline: 'outline',
   thickness: 'thickness',
@@ -242,13 +243,7 @@ export default class PointLayer extends Layer {
     const getPosition = this.getPositionAccessor(dataContainer);
 
     // get all distinct characters in the text labels
-    const textLabels = formatTextLabelData({
-      textLabel,
-      triggerChanged,
-      oldLayerData,
-      data,
-      dataContainer
-    });
+    const textLabels = formatTextLabelData({textLabel, dataContainer});
 
     const accessors = this.getAttributeAccessors({dataContainer});
 
@@ -278,12 +273,12 @@ export default class PointLayer extends Layer {
   // eslint-disable-next-line complexity, max-statements
   renderLayer(opts) {
     const {data, gpuFilter, objectHovered, interactionConfig} = opts;
+    const {customMarkers, customMarkersUrl, customMarkersRange} = this.config.visConfig;
 
     const radiusScale = this.getRadiusScale();
 
     const defaultLayerProps = this.getDefaultDeckLayerProps(opts);
     const brushingProps = this.getBrushingExtensionProps(interactionConfig);
-    const getPixelOffset = getTextOffsetByRadius(radiusScale, data.getRadius);
     const extensions = [...defaultLayerProps.extensions, brushingExtension];
 
     const updateTriggers = {
@@ -305,7 +300,9 @@ export default class PointLayer extends Layer {
       {
         getPosition: data.getPosition,
         sharedProps,
-        getPixelOffset,
+        // TODO remove this scaling by half here and elsewhere
+        radiusScale: customMarkers ? radiusScale / 2 : radiusScale,
+        getRadius: data.getRadius,
         updateTriggers
       },
       opts
@@ -319,7 +316,6 @@ export default class PointLayer extends Layer {
     };
 
     const customMarkersField = this.config.customMarkersField;
-    const {customMarkers, customMarkersUrl, customMarkersRange} = this.config.visConfig;
     const customMarkersConfigured =
       customMarkers && Boolean(customMarkersUrl || (customMarkersField && customMarkersRange));
     const customMarkersMisConfigured = customMarkers && !customMarkersConfigured;

package/src/localization/en.js

@@ -68,9 +68,11 @@ export default {
   panel: {
     text: {
       label: 'label',
-      labelWithId: 'Label {labelId}',
+      mainLabel: 'Main Label',
+      secondaryLabel: 'Secondary Label',
       fontSize: 'Font size',
       fontColor: 'Font color',
+      outlineColor: 'Outline Color',
       textAnchor: 'Text anchor',
       alignment: 'Alignment',
       addMoreLabel: 'Add More Label'
@@ -157,6 +159,7 @@ export default {
     highPrecisionRenderingDescription: 'High precision will result in slower performance',
     height: 'Height',
     heightDescription: 'Click button at top right of the map to switch to 3d view',
+    labels: 'Labels',
     fill: 'Fill',
     enablePolygonHeight: 'Enable Polygon Height',
     showWireframe: 'Show Wireframe',

package/src/processors/data-processor.js

@@ -288,10 +288,7 @@ export function getFieldsFromData(data, fieldOrder) {
   // add a check for epoch timestamp
   const metadata = Analyzer.computeColMeta(
     data,
-    [
-      {regex: /.*geojson|all_points/g, dataType: 'GEOMETRY'},
-      {regex: /.*census/g, dataType: 'STRING'}
-    ],
+    [{regex: /.*geojson|all_points/g, dataType: 'GEOMETRY'}],
     {ignoredDataTypes: IGNORE_DATA_TYPES}
   );