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

package/src/layers/base-layer.js

@@ -20,10 +20,25 @@
 
 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';
 
+// 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('background');
+    if (renderPass === 'collision') {
+      return background; // Only draw background layer in collision pass
+    } else {
+      return !background || (SHOW_TEXT_BORDER && this.props.getBorderWidth); // Do not draw background layer in other passes
+    }
+  }
+}
+
 // Workaround until https://github.com/visgl/deck.gl/pull/7513 is released
 DeckLayer.defaultProps.getFilterValue = {type: 'accessor', value: 0};
 
@@ -103,6 +118,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);
@@ -1344,24 +1360,83 @@ class Layer {
   renderTextLabelLayer({getPosition, getPixelOffset, 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) {
+        // Alignment based only on first label
+        const mainLabel = textLabel[0];
+        const {alignment, anchor, size} = mainLabel;
+        // Heuristics to avoid label overlap (should we base this on the text length?)
+        const paddingX = 12 * size;
+        const paddingY = 3 * size;
+        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;
+        }
+
+        const pixelOffset = getPixelOffset(mainLabel);
+        if (i !== 0) {
+          // Place secondary label under main label (spacing 1 / 3 main label font size)
+          pixelOffset[1] += (1 + 1 / 3) * size;
+        }
+
+        // TODO handle function case
+        backgroundPadding[LEFT] += pixelOffset[0];
+        backgroundPadding[RIGHT] -= pixelOffset[0];
+        backgroundPadding[TOP] += pixelOffset[1];
+        backgroundPadding[BOTTOM] -= pixelOffset[1];
+
+        const {size: sizeScale} = textLabel[i];
+
         accu.push(
-          new TextLayer({
+          new EnhancedTextLayer({
             ...sharedProps,
+            extensions,
+            collisionEnabled: true,
+            collisionGroup: 'labels',
             id: `${this.id}-label-${textLabel[i].field?.name}`,
             data: data.data,
             visibilityByZoom,
             getText: d.getText,
             getPosition,
             characterSet: d.characterSet,
-            getPixelOffset: getPixelOffset(textLabel[i]),
+            getPixelOffset: pixelOffset,
             getSize: 1,
-            sizeScale: textLabel[i].size,
-            getTextAnchor: textLabel[i].anchor,
-            getAlignmentBaseline: textLabel[i].alignment,
+            sizeScale,
+            getTextAnchor: anchor,
+            getAlignmentBaseline: alignment,
+
+            background: true,
+            backgroundPadding,
+
+            // DEBUG
+            ...(SHOW_TEXT_BORDER && {
+              getBorderColor: [255, 0, 0, 80],
+              getBackgroundColor: [0, 0, 0, 0],
+              getBorderWidth: 1
+            }),
+
             getColor: textLabel[i].color,
+            fontFamily: 'Inter, sans',
+            fontSettings: {sdf: true},
+            fontWeight: 500,
+            outlineColor: textLabel[i].outlineColor,
+            outlineWidth: 4, // 1 seems to be thinner than 1px in CSS
             parameters: {
               // text will always show on top of all layers
               depthTest: false
@@ -1374,11 +1449,11 @@ class Layer {
               getPixelOffset: {
                 ...updateTriggers.getPixelOffset,
                 ...updateTriggers.getRadius,
-                anchor: textLabel[i].anchor,
-                alignment: textLabel[i].alignment
+                anchor: mainLabel.anchor,
+                alignment: mainLabel.alignment
               },
-              getTextAnchor: textLabel[i].anchor,
-              getAlignmentBaseline: textLabel[i].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: [0, 0, 0],
+  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

@@ -35,16 +35,17 @@ export function getTextOffsetByRadius(radiusScale, getRadius) {
         ? textLabel.size
         : textLabel.size;
 
-    const padding = defaultPadding;
+    const padding = textLabel.size / 4; // Padding based on font size (font size / 4)
+    const pointPadding = 1 + 1 / 4; // Padding based on point size (point size / 4)
 
     return typeof getRadius === 'function'
       ? d => [
-          xMult * (getRadius(d) * radiusScale + padding),
-          yMult * (getRadius(d) * radiusScale + padding + sizeOffset)
+          xMult * (getRadius(d) * radiusScale * pointPadding + padding),
+          yMult * (getRadius(d) * radiusScale * pointPadding + sizeOffset)
         ]
       : [
-          xMult * (getRadius * radiusScale + padding),
-          yMult * (getRadius * radiusScale + padding + sizeOffset)
+          xMult * (getRadius * radiusScale * pointPadding + padding),
+          yMult * (getRadius * radiusScale * pointPadding + sizeOffset)
         ];
   };
 }

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

@@ -47,6 +47,7 @@ export const pointVisConfigs = {
   customMarkers: 'customMarkers',
   customMarkersUrl: 'customMarkersUrl',
   customMarkersRange: 'customMarkersRange',
+  labelsEnabled: 'labelsEnabled',
   opacity: 'opacity',
   outline: 'outline',
   thickness: 'thickness',
@@ -278,12 +279,17 @@ 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 getPixelOffset = getTextOffsetByRadius(
+      // TODO remove this scaling by half here and elsewhere
+      customMarkers ? radiusScale / 2 : radiusScale,
+      data.getRadius
+    );
     const extensions = [...defaultLayerProps.extensions, brushingExtension];
 
     const updateTriggers = {
@@ -319,7 +325,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}
   );