@carto/kepler.gl 0.0.45 → 0.0.47-alpha.custom-markers

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

@@ -20,6 +20,7 @@
 
 import {BrushingExtension} from '@deck.gl/extensions';
 import {ScatterplotLayer} from '@deck.gl/layers';
+import {IconLayer} from '@deck.gl/layers';
 
 import Layer from '../base-layer';
 import {hexToRgb} from 'utils/color-utils';
@@ -43,6 +44,8 @@ const brushingExtension = new BrushingExtension();
 export const pointVisConfigs = {
   radius: 'radius',
   fixedRadius: 'fixedRadius',
+  customMarkers: 'customMarkers',
+  customMarkersUrl: 'customMarkersUrl',
   opacity: 'opacity',
   outline: 'outline',
   thickness: 'thickness',
@@ -237,6 +240,13 @@ export default class PointLayer extends Layer {
     this.updateMeta({bounds});
   }
 
+  isLayerHovered(objectInfo) {
+    return (
+      (objectInfo?.picked && objectInfo?.layer?.props?.id === this.id) ||
+      objectInfo?.layer?.props?.id === `${this.id}-icon`
+    );
+  }
+
   renderLayer(opts) {
     const {data, gpuFilter, objectHovered, mapState, interactionConfig} = opts;
 
@@ -245,14 +255,6 @@ export default class PointLayer extends Layer {
     const radiusScale = this.getRadiusScale(fixedRadius);
     const radiusUnits = this.getRadiusUnit(fixedRadius);
 
-    const layerProps = {
-      stroked: this.config.visConfig.outline,
-      filled: this.config.visConfig.filled,
-      lineWidthScale: this.config.visConfig.thickness,
-      radiusScale,
-      ...(this.config.visConfig.fixedRadius ? {} : {radiusMaxPixels: 500})
-    };
-
     const updateTriggers = {
       getPosition: this.config.columns,
       getFilterValue: gpuFilter.filterValueUpdateTriggers,
@@ -278,16 +280,91 @@ export default class PointLayer extends Layer {
     };
     const hoveredObject = this.hasHoveredObject(objectHovered);
 
+    const textLabelLayer = this.renderTextLabelLayer(
+      {
+        getPosition: data.getPosition,
+        sharedProps,
+        getPixelOffset,
+        updateTriggers
+      },
+      opts
+    );
+    const commonLayerProps = {
+      ...defaultLayerProps,
+      parameters: {
+        // circles will be flat on the map when the altitude column is not used
+        depthTest: this.config.columns.altitude?.fieldIdx > -1
+      }
+    };
+
+    const {customMarkers, customMarkersUrl} = this.config.visConfig;
+    const customMarkersConfigured = customMarkers && Boolean(customMarkersUrl);
+    const customMarkersMisConfigured = customMarkers && !customMarkersConfigured;
+    if (customMarkersConfigured) {
+      const maxIconSize = this.getMaxMarkerSize();
+
+      const iconLayerProps = {
+        getIcon: () => {
+          const url = customMarkersUrl;
+          return {
+            id: `${url}@@${maxIconSize}`,
+            url,
+            width: maxIconSize,
+            height: maxIconSize,
+            mask: true
+          };
+        },
+        getPosition: data.getPosition,
+        getSize: data.getRadius,
+        sizeScale: radiusScale,
+        sizeUnits: 'pixels'
+      };
+
+      return [
+        new IconLayer({
+          ...commonLayerProps,
+          ...iconLayerProps,
+          id: `${defaultLayerProps.id}-icon`,
+          data: data.data,
+          getColor: data.getFillColor,
+          getFilterValue: data.getFilterValue,
+          updateTriggers: {
+            getFilterValue: updateTriggers.getFilterValue,
+            getColor: updateTriggers.getFillColor,
+            getIcon: [customMarkersUrl, maxIconSize],
+            getSize: updateTriggers.getRadius
+          }
+        }),
+        ...(hoveredObject
+          ? [
+              new IconLayer({
+                ...iconLayerProps,
+                ...this.getDefaultHoverLayerProps(),
+                id: `${defaultLayerProps.id}-icon-hovered`,
+                data: [hoveredObject],
+                getColor: this.config.highlightColor
+              })
+            ]
+          : []),
+        ...textLabelLayer
+      ];
+    }
+
+    const scatterPlotLayerProps = {
+      stroked: this.config.visConfig.outline,
+      filled: this.config.visConfig.filled,
+      lineWidthScale: this.config.visConfig.thickness,
+      // TODO: invent better way to render something when customMarkers are not yet configured
+      radiusScale: customMarkersMisConfigured ? radiusScale / 2 : radiusScale,
+      ...(this.config.visConfig.fixedRadius ? {} : {radiusMaxPixels: 500})
+    };
+
     return [
       new ScatterplotLayer({
-        ...defaultLayerProps,
         ...brushingProps,
-        ...layerProps,
         ...data,
-        parameters: {
-          // circles will be flat on the map when the altitude column is not used
-          depthTest: this.config.columns.altitude?.fieldIdx > -1
-        },
+        ...commonLayerProps,
+        ...scatterPlotLayerProps,
         radiusUnits,
         lineWidthUnits: 'pixels',
         updateTriggers,
@@ -298,7 +375,7 @@ export default class PointLayer extends Layer {
         ? [
             new ScatterplotLayer({
               ...this.getDefaultHoverLayerProps(),
-              ...layerProps,
+              ...scatterPlotLayerProps,
               data: [hoveredObject],
               getLineColor: this.config.highlightColor,
               getFillColor: this.config.highlightColor,
@@ -308,15 +385,7 @@ export default class PointLayer extends Layer {
           ]
         : []),
       // text label layer
-      ...this.renderTextLabelLayer(
-        {
-          getPosition: data.getPosition,
-          sharedProps,
-          getPixelOffset,
-          updateTriggers
-        },
-        opts
-      )
+      ...textLabelLayer
     ];
   }
 }

package/src/localization/en.js

@@ -85,6 +85,7 @@ export default {
   layer: {
     required: 'Required*',
     radius: 'Radius',
+    size: 'Size',
     color: 'Color',
     fillColor: 'Fill Color',
     outline: 'Outline',
@@ -101,6 +102,7 @@ export default {
     elevationByDescription: 'When off, height is based on count of points',
     colorByDescription: 'When off, color is based on count of points',
     aggregateBy: 'Aggregate {field} by',
+    addUrl: 'Add URL',
     '3DModel': '3D Model',
     '3DModelOptions': '3D Model Options',
     type: {
@@ -161,7 +163,9 @@ export default {
     weightIntensity: 'Weight Intensity',
     zoomScale: 'Zoom Scale',
     heightRange: 'Height Range',
-    heightMultiplier: 'Height Multiplier'
+    heightMultiplier: 'Height Multiplier',
+    customMarkers: 'Custom markers',
+    url: 'Add URL'
   },
   layerVisibility: {
     title: 'Visibility by zoom level'