@carto/kepler.gl 0.0.48 → 0.0.49

package/src/components/side-panel/layer-panel/vis-config-by-field-selector.js

@@ -62,6 +62,14 @@ function VisConfigByFieldSelectorFactory(InfoHelper, FieldSelector, ColorDimensi
       this.props.updateField(val);
     };
 
+    _onFieldSelectorFocused = () => {
+      this.setState({fieldSelectorActive: true});
+    };
+
+    _onFieldSelectorBlur = () => {
+      this.setState({fieldSelectorActive: false});
+    };
+
     render() {
       const {
         property,
@@ -80,7 +88,7 @@ function VisConfigByFieldSelectorFactory(InfoHelper, FieldSelector, ColorDimensi
         <SidePanelSection>
           <SidePanelSection>
             <PanelLabelWrapper>
-              <PanelLabel>
+              <PanelLabel active={this.state?.fieldSelectorActive}>
                 {(label && <FormattedMessage id={label} />) || (
                   <FormattedMessage
                     id="layer.propertyBasedOn"
@@ -110,10 +118,13 @@ function VisConfigByFieldSelectorFactory(InfoHelper, FieldSelector, ColorDimensi
               isLoading={this.props.isLoading}
               withAggregator={this.props.fieldsAggregated}
               aggregator={this.props.fieldsAggregated && this.props.aggregator}
+              onFocus={this._onFieldSelectorFocused}
+              onBlur={this._onFieldSelectorBlur}
             />
           </SidePanelSection>
-          <div>
-            {showScale && !this.props.isLoading ? (
+
+          {showScale && !this.props.isLoading ? (
+            <div>
               <DimensionScaleSelector
                 scaleType={this.props.scaleType}
                 options={scaleOptions}
@@ -121,10 +132,11 @@ function VisConfigByFieldSelectorFactory(InfoHelper, FieldSelector, ColorDimensi
                 onSelect={this.props.updateScale}
                 disabled={scaleOptions.length < 2}
               />
-            ) : null}
-          </div>
-          <div>
-            {showScaleCustomizable && !this.props.isLoading && (
+            </div>
+          ) : null}
+
+          {showScaleCustomizable && !this.props.isLoading && (
+            <div>
               <ColorDimensionScaleSelector
                 label={
                   <FormattedMessage
@@ -139,8 +151,8 @@ function VisConfigByFieldSelectorFactory(InfoHelper, FieldSelector, ColorDimensi
                 onSelect={this.props.updateScale}
                 onSetCustomPalette={this.props.updateCustomPalette}
               />
-            )}
-          </div>
+            </div>
+          )}
         </SidePanelSection>
       );
     }

package/src/constants/default-settings.js

@@ -431,8 +431,10 @@ export const CHANNEL_SCALES = keyMirror({
   color: null,
   radius: null,
   size: null,
+  customMarker: null,
   colorAggr: null,
-  sizeAggr: null
+  sizeAggr: null,
+  identity: null
 });
 
 export const AGGREGATION_TYPES = {
@@ -505,7 +507,9 @@ export const FIELD_AGGREGATORS = [
 export const linearFieldScaleFunctions = {
   [CHANNEL_SCALES.color]: [SCALE_TYPES.quantize, SCALE_TYPES.quantile, SCALE_TYPES.custom],
   [CHANNEL_SCALES.radius]: [SCALE_TYPES.sqrt],
-  [CHANNEL_SCALES.size]: [SCALE_TYPES.linear, SCALE_TYPES.sqrt, SCALE_TYPES.log]
+  [CHANNEL_SCALES.size]: [SCALE_TYPES.linear, SCALE_TYPES.sqrt, SCALE_TYPES.log],
+  [CHANNEL_SCALES.customMarker]: [SCALE_TYPES.ordinal],
+  [CHANNEL_SCALES.identity]: []
 };
 
 export const linearFieldAggrScaleFunctions = {
@@ -533,7 +537,9 @@ export const linearFieldAggrScaleFunctions = {
 export const ordinalFieldScaleFunctions = {
   [CHANNEL_SCALES.color]: [SCALE_TYPES.ordinal],
   [CHANNEL_SCALES.radius]: [SCALE_TYPES.point],
-  [CHANNEL_SCALES.size]: [SCALE_TYPES.point]
+  [CHANNEL_SCALES.size]: [SCALE_TYPES.point],
+  [CHANNEL_SCALES.customMarker]: [SCALE_TYPES.ordinal],
+  [CHANNEL_SCALES.identity]: []
 };
 
 export const ordinalFieldAggrScaleFunctions = {
@@ -554,7 +560,9 @@ export const ordinalFieldAggrScaleFunctions = {
 export const notSupportedScaleOpts = {
   [CHANNEL_SCALES.color]: [],
   [CHANNEL_SCALES.radius]: [],
-  [CHANNEL_SCALES.size]: []
+  [CHANNEL_SCALES.size]: [],
+  [CHANNEL_SCALES.customMarker]: [],
+  [CHANNEL_SCALES.identity]: []
 };
 
 export const notSupportAggrOpts = {

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,12 +66,17 @@ 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});
 
 const defaultDataAccessor = dc => d => d;
 const defaultGetFieldValue = (field, d) => field.valueAccessor(d);
+const scaleIdentity = v => v;
 
 export const OVERLAY_TYPE = keymirror({
   deckgl: null,
@@ -808,6 +814,31 @@ class Layer {
     return this.getVisChannelScale(colorScale, colorDomain, colorRange.colors.map(hexToRgb));
   }
 
+  getCustomMarkersScale(range) {
+    let unknownValue = FALLBACK_ICON;
+    if (!range) {
+      return () => unknownValue;
+    }
+
+    const mapping = new Map();
+
+    if (range.othersMarker) {
+      unknownValue = range.othersMarker;
+    }
+    for (const {value, markerUrl} of range.markerMap) {
+      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
@@ -818,6 +849,7 @@ class Layer {
   getAttributeAccessors({dataAccessor = defaultDataAccessor, dataContainer}) {
     const attributeAccessors = {};
 
+    // eslint-disable-next-line complexity
     Object.keys(this.visualChannels).forEach(channel => {
       const {
         field,
@@ -833,7 +865,9 @@ class Layer {
         aggregation
       } = this.visualChannels[channel];
 
-      const shouldGetScale = this.config[field];
+      const shouldGetScale = Boolean(
+        (scale || channelScaleType === CHANNEL_SCALES.identity) && this.config[field]
+      );
 
       if (shouldGetScale) {
         const args = [this.config[scale], this.config[domain], this.config.visConfig[range]];
@@ -844,8 +878,12 @@ class Layer {
         const aggregationValue = this.config.visConfig[aggregation];
 
         const scaleFunction =
-          channelScaleType === CHANNEL_SCALES.color
+          channelScaleType === CHANNEL_SCALES.identity
+            ? scaleIdentity
+            : channelScaleType === CHANNEL_SCALES.color
             ? this.getColorScale(...args)
+            : channelScaleType === CHANNEL_SCALES.customMarker
+            ? this.getCustomMarkersScale(this.config.visConfig[range])
             : this.getVisChannelScale(...args, isFixed);
 
         attributeAccessors[accessor] = d =>
@@ -863,7 +901,7 @@ class Layer {
           typeof defaultValue === 'function' ? defaultValue(this.config) : defaultValue;
       }
 
-      if (!attributeAccessors[accessor]) {
+      if (!(accessor in attributeAccessors)) {
         Console.warn(`Failed to provide accessor function for ${accessor || channel}`);
       }
     });
@@ -1137,16 +1175,15 @@ class Layer {
 
   calculateLayerDomain(dataset, visualChannel) {
     const {scale} = visualChannel;
-    const scaleType = this.config[scale];
-
     const field = this.config[visualChannel.field];
-    if (!field) {
+    if (!field || !scale) {
       // if colorField or sizeField were set back to null
       return defaultDomain;
     }
 
+    const scaleType = this.config[scale];
     const dataSetField = dataset.fields.find(f => f.name === field.name);
-    if (!dataSetField) {
+    if (!scaleType || !dataSetField) {
       // if new dataset doesn't contain previously set field
       return defaultDomain;
     }
@@ -1191,6 +1228,12 @@ class Layer {
     return fixed ? 1 : (this.config[field] ? 1 : radius);
   }
 
+  getMaxMarkerSize() {
+    const {sizeField, visConfig} = this.config;
+    const {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 +1343,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,12 +20,14 @@
 
 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';
+import {negateAccessor} from 'utils/layer-utils';
 import {findDefaultColorField} from 'utils/dataset-utils';
 import PointLayerIcon from './point-layer-icon';
-import {DEFAULT_LAYER_COLOR, CHANNEL_SCALES} from 'constants/default-settings';
+import {DEFAULT_LAYER_COLOR, CHANNEL_SCALES, UNKNOWN_COLOR} from 'constants/default-settings';
 
 import {getTextOffsetByRadius, formatTextLabelData} from '../layer-text-label';
 
@@ -43,6 +45,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 +127,31 @@ 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',
+        fixed: 'customMarkersUrl',
+        channelScaleType: CHANNEL_SCALES.customMarker,
+        accessor: 'getIconUrl',
+        supportedFieldTypes: ['string'],
+        defaultValue: config => config.visConfig.customMarkersUrl,
+        condition: config => config.visConfig.customMarkers
+      },
+      rotation: {
+        property: 'rotation',
+        key: 'rotation',
+        field: 'rotationField',
+        channelScaleType: CHANNEL_SCALES.identity,
+        accessor: 'getRotation',
+        supportedFieldTypes: ['float', 'integer', 'real', 'number'],
+        defaultValue: () => 0,
+        nullValue: 0,
+        condition: config => config.rotationField
       }
     };
   }
@@ -181,7 +211,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 +270,22 @@ 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`
+    );
+  }
+
+  // eslint-disable-next-line complexity
   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 +311,97 @@ 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,
+        getAngle: negateAccessor(data.getRotation),
+        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: this.config.visConfig.filled ? data.getFillColor : UNKNOWN_COLOR,
+          getFilterValue: data.getFilterValue,
+          updateTriggers: {
+            getFilterValue: updateTriggers.getFilterValue,
+            getColor: [updateTriggers.getFillColor, this.config.visConfig.filled],
+            getIcon: [updateTriggers.getIconUrl, maxIconSize, customMarkersStatus],
+            getSize: updateTriggers.getRadius,
+            getAngle: updateTriggers.getRotation
+          }
+        }),
+        ...(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 +412,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 +422,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,9 @@ export default {
     density: 'density',
     height: 'height',
     sum: 'sum',
-    pointCount: 'Point Count'
+    pointCount: 'Point Count',
+    customMarkers: 'Markers',
+    rotation: 'Rotation'
   },
   placeholder: {
     search: 'Search',
@@ -85,6 +87,7 @@ export default {
   layer: {
     required: 'Required*',
     radius: 'Radius',
+    size: 'Size',
     color: 'Color',
     fillColor: 'Fill Color',
     outline: 'Outline',
@@ -101,6 +104,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 +165,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/index.js

@@ -30,7 +30,12 @@ export {createNewDataEntry, datasetColorMaker, findDefaultColorField} from './da
 export {hexToRgb} from './color-utils';
 export {errorNotification} from './notifications-utils';
 export {dataURItoBlob, downloadFile} from './export-utils';
-export {calculateLayerData, prepareLayersToRender, prepareLayersForDeck} from './layer-utils';
+export {
+  calculateLayerData,
+  prepareLayersToRender,
+  prepareLayersForDeck,
+  negateAccessor
+} from './layer-utils';
 export {
   applyFilterFieldName,
   applyFiltersToDatasets,

package/src/utils/layer-utils.d.ts

@@ -73,4 +73,6 @@ export function getMaskExtensionProps(
 ): {
   maskId?: string,
   extensions: Array<unknown>
-}
+}
+
+export function negateAccessor<T extends ((d: any) => number) | number>(accessor: T): T;

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
   });
 }
 
@@ -195,3 +197,7 @@ export function getMaskExtensionProps(maskPolygon) {
     extensions: [maskExtension]
   };
 }
+
+export function negateAccessor(accessor) {
+  return typeof accessor === 'function' ? (d, i) => -accessor(d, i) : -accessor;
+}