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

package/src/components/common/styled-components.js

@@ -85,7 +85,7 @@ export const SBFlexboxNoMargin = styled.div`
 export const PanelLabel = styled.label.attrs({
   className: 'side-panel-panel__label'
 })`
-  color: ${props => props.theme.labelColor};
+  color: ${props => (props.active ? props.theme.labelColorActive : props.theme.labelColor)};
   display: inline-block;
   font-size: 11px;
   font-weight: 400;

package/src/components/index.js

@@ -73,6 +73,7 @@ export {
 export {default as LayerPanelFactory} from './side-panel/layer-panel/layer-panel';
 export {default as LayerPanelHeaderFactory} from './side-panel/layer-panel/layer-panel-header';
 export {default as LayerConfiguratorFactory} from './side-panel/layer-panel/layer-configurator';
+export {default as CustomMarkersConfigGroupFactory} from './side-panel/layer-panel/custom-markers-config-group';
 export {default as TextLabelPanelFactory} from './side-panel/layer-panel/text-label-panel';
 export {LayerConfigGroupLabelFactory} from './side-panel/layer-panel/layer-config-group';
 export {default as LayerVisibilityByZoomFactory} from './side-panel/layer-panel/layer-visibility-by-zoom';

package/src/components/kepler-gl.js

@@ -130,6 +130,7 @@ export const mapFieldsSelector = props => ({
   clicked: props.visState.clicked,
   mousePos: props.visState.mousePos,
   animationConfig: props.visState.animationConfig,
+  customMarkersStatus: props.visState.customMarkersStatus,
 
   // uiState
   activeSidePanel: props.uiState.activeSidePanel,

package/src/components/side-panel/layer-panel/custom-markers-config-group.js

@@ -0,0 +1,30 @@
+// Copyright (c) 2022 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
+import React from 'react';
+
+export default function CustomMarkersConfigGroupFactory() {
+  const CustomMarkersConfigGroup = () => {
+    return <div>To be overriden</div>;
+  };
+  return CustomMarkersConfigGroup;
+}
+
+CustomMarkersConfigGroupFactory.deps = [];

package/src/components/side-panel/layer-panel/layer-configurator.js

@@ -36,6 +36,7 @@ import SourceDataSelectorFactory from 'components/side-panel/common/source-data-
 import VisConfigSwitchFactory from './vis-config-switch';
 import VisConfigSliderFactory from './vis-config-slider';
 import LayerConfigGroupFactory, {ConfigGroupCollapsibleContent} from './layer-config-group';
+import CustomMarkersConfigGroupFactory from './custom-markers-config-group';
 import TextLabelPanelFactory from './text-label-panel';
 
 import {capitalizeFirstLetter} from 'utils/utils';
@@ -102,7 +103,8 @@ LayerConfiguratorFactory.deps = [
   LayerVisibilityByZoomFactory,
   LayerColorSelectorFactory,
   LayerColorRangeSelectorFactory,
-  ArcLayerColorSelectorFactory
+  ArcLayerColorSelectorFactory,
+  CustomMarkersConfigGroupFactory
 ];
 
 export default function LayerConfiguratorFactory(
@@ -118,7 +120,8 @@ export default function LayerConfiguratorFactory(
   LayerVisibilityByZoom,
   LayerColorSelector,
   LayerColorRangeSelector,
-  ArcLayerColorSelector
+  ArcLayerColorSelector,
+  CustomMarkersConfigGroup
 ) {
   class LayerConfigurator extends Component {
     static propTypes = {
@@ -199,8 +202,19 @@ export default function LayerConfiguratorFactory(
             </LayerConfigGroup>
           ) : null}
 
+          {layer.type === LAYER_TYPES.point ? (
+            <CustomMarkersConfigGroup
+              layer={layer}
+              visConfiguratorProps={visConfiguratorProps}
+              layerChannelConfigProps={layerChannelConfigProps}
+            />
+          ) : null}
+
           {/* Radius */}
-          <LayerConfigGroup label={'layer.radius'} collapsible>
+          <LayerConfigGroup
+            label={layer.config.visConfig.customMarkers ? 'layer.size' : 'layer.radius'}
+            collapsible
+          >
             {!layer.config.sizeField ? (
               <VisConfigSlider
                 {...layer.visConfigSettings.radius}
@@ -225,6 +239,7 @@ export default function LayerConfiguratorFactory(
                 <VisConfigSwitch
                   {...layer.visConfigSettings.fixedRadius}
                   {...visConfiguratorProps}
+                  disabled={layer.config.visConfig.customMarkers}
                 />
               ) : null}
             </ConfigGroupCollapsibleContent>
@@ -1031,7 +1046,6 @@ export function LayerColorSelectorFactory(ColorSelector) {
   class LayerColorSelector extends Component {
     render() {
       const {layer, onChange, selectedColor, property = 'color', setColorUI} = this.props;
-
       return (
         <SidePanelSection>
           <PanelLabel>
@@ -1060,7 +1074,6 @@ export function ArcLayerColorSelectorFactory(ColorSelector) {
   class ArcLayerColorSelector extends Component {
     render() {
       const {layer, onChangeConfig, onChangeVisConfig, property = 'color', setColorUI} = this.props;
-
       return (
         <SidePanelSection>
           <PanelLabel>
@@ -1153,14 +1166,17 @@ export function ChannelByValueSelectorFactory(VisConfigByFieldSelector) {
     const scaleOptions = layer.getScaleOptions(channel.key);
     const showScaleCustomizable =
       channelScaleType === CHANNEL_SCALES.color &&
+      scale &&
       layer.config[scale] &&
       Boolean(layer.config[field]) &&
-      scaleOptions.length > 0;
-    const showScale =
+      scaleOptions?.length > 0;
+    const showScale = Boolean(
       !showScaleCustomizable &&
-      !layer.isAggregated &&
-      layer.config[scale] &&
-      scaleOptions.length > 1;
+        scale &&
+        !layer.isAggregated &&
+        layer.config[scale] &&
+        scaleOptions?.length > 1
+    );
     const defaultDescription = 'layerConfiguration.defaultDescription';
     const visRange = layer.config.visConfig[range];
     const aggregator = layer.config.visConfig[aggregation];
@@ -1290,4 +1306,5 @@ export const AggregationTypeSelector = ({layer, channel, onChange}) => {
     </SidePanelSection>
   );
 };
+
 /* eslint-enable max-params */

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,6 +118,8 @@ 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>

package/src/constants/default-settings.js

@@ -431,6 +431,7 @@ export const CHANNEL_SCALES = keyMirror({
   color: null,
   radius: null,
   size: null,
+  customMarker: null,
   colorAggr: null,
   sizeAggr: null
 });
@@ -505,7 +506,8 @@ 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]
 };
 
 export const linearFieldAggrScaleFunctions = {
@@ -533,7 +535,8 @@ 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]
 };
 
 export const ordinalFieldAggrScaleFunctions = {
@@ -554,7 +557,8 @@ export const ordinalFieldAggrScaleFunctions = {
 export const notSupportedScaleOpts = {
   [CHANNEL_SCALES.color]: [],
   [CHANNEL_SCALES.radius]: [],
-  [CHANNEL_SCALES.size]: []
+  [CHANNEL_SCALES.size]: [],
+  [CHANNEL_SCALES.customMarker]: []
 };
 
 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,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,39 @@ 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 (Array.isArray(range)) {
+      for (const {value, markerUrl} of range) {
+        if (value === null) {
+          unknownValue = markerUrl;
+        } else if (markerUrl) {
+          mapping.set(value, markerUrl);
+        }
+      }
+    } else {
+      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 +856,7 @@ class Layer {
   getAttributeAccessors({dataAccessor = defaultDataAccessor, dataContainer}) {
     const attributeAccessors = {};
 
+    // eslint-disable-next-line complexity
     Object.keys(this.visualChannels).forEach(channel => {
       const {
         field,
@@ -833,8 +872,13 @@ class Layer {
         aggregation
       } = this.visualChannels[channel];
 
-      const shouldGetScale = this.config[field];
+      const shouldGetScale = Boolean(
+        (scale || channelScaleType === 'identity') && this.config[field]
+      );
 
+      if (field === 'rotationField') {
+        console.log('recreating rotationField accessor', this.config[field]);
+      }
       if (shouldGetScale) {
         const args = [this.config[scale], this.config[domain], this.config.visConfig[range]];
         const isFixed = fixed && this.config.visConfig[fixed];
@@ -844,8 +888,12 @@ class Layer {
         const aggregationValue = this.config.visConfig[aggregation];
 
         const scaleFunction =
-          channelScaleType === CHANNEL_SCALES.color
+          channelScaleType === 'identity'
+            ? v => v
+            : 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 +1239,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 +1354,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,13 @@
 
 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 {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 +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,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: 'identity',
+        accessor: 'getAngle',
+        supportedFieldTypes: ['float', 'integer', 'real', 'number'],
+        defaultValue: () => 0,
+        nullValue: 0,
+        condition: config => config.rotationField
       }
     };
   }
@@ -181,7 +210,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 +269,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 +310,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: data.getAngle,
+        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.getAngle
+          }
+        }),
+        ...(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 +411,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 +421,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/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
   });
 }