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

package/src/layers/base-layer.js

@@ -56,6 +56,7 @@ import {getSampleData} from 'utils/table-utils/data-container-utils';
 
 import {hexToRgb, getColorGroupByName, reverseColorRange} from 'utils/color-utils';
 import {getMaskExtensionProps} from 'utils/layer-utils';
+import {scaleOrdinal} from 'd3-scale';
 
 /** @typedef {import('./index').Layer} LayerClass} */
 
@@ -65,6 +66,10 @@ import {getMaskExtensionProps} from 'utils/layer-utils';
  */
 export const LAYER_ID_LENGTH = 6;
 
+// Note, this is is SVG of solid circle encoded as data-uri
+const FALLBACK_ICON =
+  'data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4NCiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNTAiLz4NCjwvc3ZnPg==';
+
 const MAX_SAMPLE_SIZE = 5000;
 const defaultDomain = [0, 1];
 const dataFilterExtension = new DataFilterExtension({filterSize: MAX_GPU_FILTERS});
@@ -808,6 +813,30 @@ class Layer {
     return this.getVisChannelScale(colorScale, colorDomain, colorRange.colors.map(hexToRgb));
   }
 
+  getCustomMarkersScale(range) {
+    let unknownValue = FALLBACK_ICON;
+    if (!range) {
+      () => unknownValue;
+    }
+
+    const mapping = new Map();
+
+    for (const {value, markerUrl} of range) {
+      if (value === null) {
+        unknownValue = markerUrl;
+      } else if (markerUrl) {
+        mapping.set(value, markerUrl);
+      }
+    }
+
+    // @ts-ignore d3 scale
+    const scale = scaleOrdinal()
+      .domain(Array.from(mapping.keys()))
+      .range(Array.from(mapping.values()))
+      .unknown(unknownValue);
+    return scale;
+  }
+
   /**
    * Mapping from visual channels to deck.gl accesors
    * @param {Object} param Parameters
@@ -833,7 +862,7 @@ class Layer {
         aggregation
       } = this.visualChannels[channel];
 
-      const shouldGetScale = this.config[field];
+      const shouldGetScale = Boolean(scale && this.config[field]);
 
       if (shouldGetScale) {
         const args = [this.config[scale], this.config[domain], this.config.visConfig[range]];
@@ -846,6 +875,8 @@ class Layer {
         const scaleFunction =
           channelScaleType === CHANNEL_SCALES.color
             ? this.getColorScale(...args)
+            : channelScaleType === CHANNEL_SCALES.customMarker
+            ? this.getCustomMarkersScale(this.config.visConfig[range])
             : this.getVisChannelScale(...args, isFixed);
 
         attributeAccessors[accessor] = d =>
@@ -1191,6 +1222,12 @@ class Layer {
     return fixed ? 1 : (this.config[field] ? 1 : radius);
   }
 
+  getMaxMarkerSize() {
+    const {visConfig} = this.config;
+    const {sizeField, radiusRange, radius} = visConfig;
+    return Math.ceil((sizeField ? radiusRange[1] : radius));
+  }
+
   getRadiusUnit(fixedRadius) {
     const radiusChannel = Object.values(this.visualChannels).find(vc => vc.property === 'radius');
 
@@ -1300,6 +1337,30 @@ class Layer {
     }, []);
   }
 
+  /**
+   * Create deck.gl `IconLayer` "autoPack" mode accessor for custom markers.
+   *
+   * @param {*} customMarkersStatus Record<url, UrlStatus> provided by builder, UrlStatus `ok` means URL is ok and ready to render
+   * @param {*} iconUrlAccessor deck.gl accessor (or value) that resolves to URL of icon for given row
+   * @returns deck.gl accessor that returns UnpackedIcon ready to consume by IconLayer
+   */
+  getCustomMarkerIconAccessor(customMarkersStatus, iconUrlAccessor) {
+    const maxIconSize = this.getMaxMarkerSize();
+
+    return d => {
+      const wantedUrl =
+        (typeof iconUrlAccessor === 'function') ? iconUrlAccessor(d) : iconUrlAccessor;
+      const url = customMarkersStatus?.[wantedUrl] === 'ok' ? wantedUrl : FALLBACK_ICON;
+      return {
+        id: `${url}@@${maxIconSize}`,
+        url,
+        width: maxIconSize,
+        height: maxIconSize,
+        mask: true
+      };
+    };
+  }
+
   calculateDataAttribute(keplerTable, getPosition) {
     // implemented in subclasses
     return [];

package/src/layers/layer-factory.js

@@ -26,6 +26,7 @@ import {DEFAULT_COLOR_RANGE} from 'constants/color-ranges';
 export const PROPERTY_GROUPS = keyMirror({
   color: null,
   stroke: null,
+  customMarkers: null,
   radius: null,
   height: null,
   angle: null,
@@ -429,6 +430,27 @@ export const LAYER_VIS_CONFIGS = {
     step: 0.1,
     group: PROPERTY_GROUPS.cell,
     property: 'radius'
+  },
+  customMarkers: {
+    type: 'boolean',
+    defaultValue: false,
+    label: 'layerVisConfigs.customMarkers',
+    group: PROPERTY_GROUPS.customMarkers,
+    property: 'customMarkers'
+  },
+  customMarkersUrl: {
+    type: 'text',
+    defaultValue: '',
+    label: 'layerVisConfigs.addUrl',
+    group: PROPERTY_GROUPS.customMarkers,
+    property: 'customMarkersUrl'
+  },
+  customMarkersRange: {
+    type: 'markers-range-select',
+    defaultValue: undefined,
+    label: 'layerVisConfigs.colorRange',
+    group: PROPERTY_GROUPS.customMarkers,
+    property: 'customMarkersRange'
   }
 };
 

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,9 @@ const brushingExtension = new BrushingExtension();
 export const pointVisConfigs = {
   radius: 'radius',
   fixedRadius: 'fixedRadius',
+  customMarkers: 'customMarkers',
+  customMarkersUrl: 'customMarkersUrl',
+  customMarkersRange: 'customMarkersRange',
   opacity: 'opacity',
   outline: 'outline',
   thickness: 'thickness',
@@ -122,6 +126,18 @@ export default class PointLayer extends Layer {
         channelScaleType: 'radius',
         accessor: 'getRadius',
         defaultValue: 1
+      },
+      customMarkers: {
+        property: 'customMarkers',
+        key: 'customMarkers',
+        field: 'customMarkersField',
+        scale: 'customMarkersScale',
+        domain: 'customMarkersDomain',
+        range: 'customMarkersRange',
+        channelScaleType: CHANNEL_SCALES.customMarker,
+        accessor: 'getIconUrl',
+        supportedFieldTypes: ['string'],
+        getAttributeValue: config => config.visConfig.customMarkersUrl
       }
     };
   }
@@ -181,7 +197,10 @@ export default class PointLayer extends Layer {
       // add stroke color visual channel
       strokeColorField: null,
       strokeColorDomain: [0, 1],
-      strokeColorScale: 'quantile'
+      strokeColorScale: 'quantile',
+
+      customMarkersField: null,
+      customMarkersScale: 'ordinal'
     };
   }
 
@@ -237,22 +256,21 @@ 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;
+    const {data, gpuFilter, objectHovered, mapState, interactionConfig, customMarkersStatus} = opts;
 
     // if no field size is defined we need to pass fixed radius = false
     const fixedRadius = this.config.visConfig.fixedRadius && Boolean(this.config.sizeField);
     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 +296,101 @@ 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 customMarkersField = this.config.customMarkersField;
+    const {customMarkers, customMarkersUrl, customMarkersRange} = this.config.visConfig;
+    const customMarkersConfigured =
+      customMarkers && Boolean(customMarkersUrl || (customMarkersField && customMarkersRange));
+    const customMarkersMisConfigured = customMarkers && !customMarkersConfigured;
+
+    if (customMarkersConfigured) {
+      const maxIconSize = this.getMaxMarkerSize();
+      const getIcon = this.getCustomMarkerIconAccessor(customMarkersStatus, data.getIconUrl);
+      const iconLayerProps = {
+        getIcon,
+        getPosition: data.getPosition,
+        getSize: data.getRadius,
+        sizeScale: radiusScale,
+        sizeUnits: 'pixels',
+        loadOptions: {
+          image: {
+            type: 'imagebitmap'
+          },
+          imagebitmap: {
+            resizeWidth: maxIconSize,
+            resizeHeight: maxIconSize,
+            resizeQuality: 'high'
+          }
+        }
+      };
+
+      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,
+              customMarkersStatus,
+              customMarkersField,
+              customMarkersRange
+            ],
+            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 +401,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 +411,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

@@ -34,7 +34,8 @@ export default {
     density: 'density',
     height: 'height',
     sum: 'sum',
-    pointCount: 'Point Count'
+    pointCount: 'Point Count',
+    customMarkers: 'Markers'
   },
   placeholder: {
     search: 'Search',
@@ -85,6 +86,7 @@ export default {
   layer: {
     required: 'Required*',
     radius: 'Radius',
+    size: 'Size',
     color: 'Color',
     fillColor: 'Fill Color',
     outline: 'Outline',
@@ -101,6 +103,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 +164,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'

package/src/utils/layer-utils.js

@@ -126,7 +126,8 @@ export function renderDeckGlLayer(props, layerCallbacks, idx) {
     interactionConfig,
     animationConfig,
     mapLayers,
-    maskPolygon
+    maskPolygon,
+    customMarkersStatus
   } = props;
   const layer = layers[idx];
   const data = layerData[idx];
@@ -144,7 +145,8 @@ export function renderDeckGlLayer(props, layerCallbacks, idx) {
     animationConfig,
     objectHovered,
     visible,
-    maskPolygon
+    maskPolygon,
+    customMarkersStatus
   });
 }