@carto/kepler.gl 0.0.65-alpha.labels.3 → 0.0.65-alpha.labels.4

package/package.json

@@ -2,7 +2,7 @@
   "name": "@carto/kepler.gl",
   "author": "CARTO",
   "homepage": "https://github.com/CartoDB/carto-kepler#readme",
-  "version": "0.0.65-alpha.labels.3",
+  "version": "0.0.65-alpha.labels.4",
   "description": "kepler.gl is a webgl based application to visualize large scale location data in the browser",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/map-container.js

@@ -303,7 +303,6 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
         return;
       }
 
-      throw error;
       const errorMessage = `An error in deck.gl: ${error?.message} in ${layer?.id}`;
       const notificationId = `${layer?.id}-${error?.message}`;
 

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

@@ -16,7 +16,7 @@ class EnhancedTextLayer extends TextLayer {
   }
 }
 
-// TODO fix in deck.gl
+// TODO remove once https://github.com/visgl/deck.gl/pull/7757 out
 TextLayer.defaultProps.fontSettings = {type: 'object', value: {}, optional: true, compare: 1};
 
 const defaultProps = {
@@ -41,9 +41,13 @@ export class PointLabelLayer extends CompositeLayer {
 
     // 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)
+
+    // Padding based on font size (font size / 4)
+    const xPadding = sizeScale / 4;
+    const yPadding = sizeScale + 1 / 4;
+
+    // Padding based on point radius (radius/ 4)
+    const radiusPadding = 1 + 1 / 4;
 
     return typeof getRadius === 'function'
       ? d => {
@@ -145,7 +149,8 @@ export class PointLabelLayer extends CompositeLayer {
       getSecondaryColor,
       getSecondaryText,
       secondaryOutlineColor,
-      secondarySizeScale
+      secondarySizeScale,
+      updateTriggers
     } = this.props;
     const getPixelOffset = this.calculatePixelOffset(false);
     const backgroundPadding = this.calculateBackgroundPadding(getPixelOffset);
@@ -160,6 +165,7 @@ export class PointLabelLayer extends CompositeLayer {
         this.renderTextLayer('secondary', {
           getText: getSecondaryText,
           getPixelOffset: this.calculatePixelOffset(true),
+          updateTriggers: {getText: updateTriggers.getSecondaryText},
 
           // Optional overrides
           ...(getSecondaryColor && {getColor: getSecondaryColor}),

package/src/layers/base-layer.js

@@ -1317,20 +1317,24 @@ class Layer {
   ) {
     const {data, mapState} = renderOpts;
     const {textLabel, visibilityByZoom} = this.config;
-    // const extensions = [...sharedProps.extensions];
     const extensions = [...sharedProps.extensions, collisionFilterExtension];
 
     if (!data || !data.textLabels || !data.textLabels[0] || !data.textLabels[0].getText) {
       return [];
     }
 
-    // TODO other labels
-    const i = 0;
-
     const [mainLabel, secondaryLabel] = textLabel;
-    const {alignment, anchor, color: getColor, outlineColor, size: sizeScale} = mainLabel;
+    const {
+      alignment,
+      anchor,
+      color: getColor,
+      field: mainField,
+      outlineColor,
+      size: sizeScale
+    } = mainLabel;
     const {
       color: getSecondaryColor,
+      field: secondaryField,
       outlineColor: secondaryOutlineColor,
       size: secondarySizeScale
     } = secondaryLabel || {};
@@ -1338,7 +1342,10 @@ class Layer {
     return [
       new PointLabelLayer({
         ...sharedProps,
-        id: `${this.id}-label`,
+
+        // Recreate layer when labels change otherwise rendering breaks
+        // TODO could be more efficient with updateTriggers?
+        id: `${this.id}-${mainField?.name}-${secondaryField?.name}-label`,
         data: data.data,
         visibilityByZoom,
         extensions,
@@ -1352,7 +1359,7 @@ class Layer {
         sizeScale,
         outlineColor,
 
-        ...(secondaryLabel && {
+        ...(secondaryField && {
           getSecondaryText: data.textLabels[1].getText,
           getSecondaryColor,
           secondarySizeScale,
@@ -1379,7 +1386,8 @@ class Layer {
         getFilterValue: data.getFilterValue,
         updateTriggers: {
           ...updateTriggers,
-          getText: textLabel[i].field?.name,
+          getText: mainField?.name,
+          getColor: mainField?.color,
           getPixelOffset: {
             ...updateTriggers.getPixelOffset,
             ...updateTriggers.getRadius,
@@ -1388,7 +1396,7 @@ class Layer {
           },
           getTextAnchor: mainLabel.anchor,
           getAlignmentBaseline: mainLabel.alignment,
-          getColor: textLabel[i].color
+          getSecondaryText: secondaryField?.name
         }
       })
     ];