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

package/src/components/common/field-selector.js

@@ -113,9 +113,7 @@ function FieldSelectorFactory(FieldListItemFactory) {
       closeOnSelect: PropTypes.bool,
       showToken: PropTypes.bool,
       suggested: PropTypes.arrayOf(PropTypes.any),
-      CustomChickletComponent: PropTypes.func,
-      onBlur: PropTypes.func,
-      onFocus: PropTypes.func
+      CustomChickletComponent: PropTypes.func
     };
 
     static defaultProps = {
@@ -135,17 +133,15 @@ function FieldSelectorFactory(FieldListItemFactory) {
 
     fieldsSelector = props => props.fields;
     filteredFieldsSelector = props =>
-      props.withAggregator
-        ? props.fields
-        : props.fields.filter(
-            field =>
-              !toArray(props.value).find(d => (d.name ? d.name === field.name : d === field.name))
-          );
+      props.withAggregator ? props.fields : props.fields.filter(
+        field =>
+          !toArray(props.value).find(d => (d.name ? d.name === field.name : d === field.name))
+      );
     valueSelector = props => props.value;
     aggregatorSelector = props => props.aggregator;
     filterFieldTypesSelector = props => props.filterFieldTypes;
     showTokenSelector = props => props.showToken;
-    withAggregatorSelector = props => props.withAggregator;
+    withAggregatorSelector = props => props.withAggregator
 
     selectedItemsSelector = createSelector(
       this.fieldsSelector,
@@ -219,8 +215,6 @@ function FieldSelectorFactory(FieldListItemFactory) {
             DropdownHeaderComponent={this.props.suggested ? SuggestedFieldHeader : null}
             CustomChickletComponent={this.props.CustomChickletComponent}
             withSubOptions={this.props.withAggregator}
-            onBlur={this.props.onBlur}
-            onFocus={this.props.onFocus}
           />
         </div>
       );

package/src/components/common/item-selector/item-selector.js

@@ -135,7 +135,6 @@ class ItemSelector extends Component {
     multiSelect: PropTypes.bool,
     inputTheme: PropTypes.string,
     onBlur: PropTypes.func,
-    onFocus: PropTypes.func,
     placeholder: PropTypes.string,
     closeOnSelect: PropTypes.bool,
     typeaheadPlaceholder: PropTypes.string,
@@ -243,9 +242,6 @@ class ItemSelector extends Component {
   _showTypeahead = e => {
     e.stopPropagation();
     if (!this.props.disabled && !this.props.isLoading) {
-      if (!this.state.showTypeahead && this.props.onFocus) {
-        this.props.onFocus();
-      }
       this.setState({
         showTypeahead: true
       });

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.active ? props.theme.labelColorActive : props.theme.labelColor)};
+  color: ${props => props.theme.labelColor};
   display: inline-block;
   font-size: 11px;
   font-weight: 400;

package/src/components/index.js

@@ -73,7 +73,6 @@ 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,7 +130,6 @@ 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/layer-configurator.js

@@ -36,7 +36,6 @@ 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';
@@ -103,8 +102,7 @@ LayerConfiguratorFactory.deps = [
   LayerVisibilityByZoomFactory,
   LayerColorSelectorFactory,
   LayerColorRangeSelectorFactory,
-  ArcLayerColorSelectorFactory,
-  CustomMarkersConfigGroupFactory
+  ArcLayerColorSelectorFactory
 ];
 
 export default function LayerConfiguratorFactory(
@@ -120,8 +118,7 @@ export default function LayerConfiguratorFactory(
   LayerVisibilityByZoom,
   LayerColorSelector,
   LayerColorRangeSelector,
-  ArcLayerColorSelector,
-  CustomMarkersConfigGroup
+  ArcLayerColorSelector
 ) {
   class LayerConfigurator extends Component {
     static propTypes = {
@@ -202,19 +199,8 @@ export default function LayerConfiguratorFactory(
             </LayerConfigGroup>
           ) : null}
 
-          {layer.type === LAYER_TYPES.point ? (
-            <CustomMarkersConfigGroup
-              layer={layer}
-              visConfiguratorProps={visConfiguratorProps}
-              layerChannelConfigProps={layerChannelConfigProps}
-            />
-          ) : null}
-
           {/* Radius */}
-          <LayerConfigGroup
-            label={layer.config.visConfig.customMarkers ? 'layer.size' : 'layer.radius'}
-            collapsible
-          >
+          <LayerConfigGroup label={'layer.radius'} collapsible>
             {!layer.config.sizeField ? (
               <VisConfigSlider
                 {...layer.visConfigSettings.radius}
@@ -239,7 +225,6 @@ export default function LayerConfiguratorFactory(
                 <VisConfigSwitch
                   {...layer.visConfigSettings.fixedRadius}
                   {...visConfiguratorProps}
-                  disabled={layer.config.visConfig.customMarkers}
                 />
               ) : null}
             </ConfigGroupCollapsibleContent>
@@ -1046,6 +1031,7 @@ export function LayerColorSelectorFactory(ColorSelector) {
   class LayerColorSelector extends Component {
     render() {
       const {layer, onChange, selectedColor, property = 'color', setColorUI} = this.props;
+
       return (
         <SidePanelSection>
           <PanelLabel>
@@ -1074,6 +1060,7 @@ export function ArcLayerColorSelectorFactory(ColorSelector) {
   class ArcLayerColorSelector extends Component {
     render() {
       const {layer, onChangeConfig, onChangeVisConfig, property = 'color', setColorUI} = this.props;
+
       return (
         <SidePanelSection>
           <PanelLabel>
@@ -1166,17 +1153,14 @@ 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 = Boolean(
+      scaleOptions.length > 0;
+    const showScale =
       !showScaleCustomizable &&
-        scale &&
-        !layer.isAggregated &&
-        layer.config[scale] &&
-        scaleOptions?.length > 1
-    );
+      !layer.isAggregated &&
+      layer.config[scale] &&
+      scaleOptions.length > 1;
     const defaultDescription = 'layerConfiguration.defaultDescription';
     const visRange = layer.config.visConfig[range];
     const aggregator = layer.config.visConfig[aggregation];
@@ -1306,5 +1290,4 @@ 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,14 +62,6 @@ function VisConfigByFieldSelectorFactory(InfoHelper, FieldSelector, ColorDimensi
       this.props.updateField(val);
     };
 
-    _onFieldSelectorFocused = () => {
-      this.setState({fieldSelectorActive: true});
-    };
-
-    _onFieldSelectorBlur = () => {
-      this.setState({fieldSelectorActive: false});
-    };
-
     render() {
       const {
         property,
@@ -88,7 +80,7 @@ function VisConfigByFieldSelectorFactory(InfoHelper, FieldSelector, ColorDimensi
         <SidePanelSection>
           <SidePanelSection>
             <PanelLabelWrapper>
-              <PanelLabel active={this.state?.fieldSelectorActive}>
+              <PanelLabel>
                 {(label && <FormattedMessage id={label} />) || (
                   <FormattedMessage
                     id="layer.propertyBasedOn"
@@ -118,8 +110,6 @@ 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,10 +431,8 @@ export const CHANNEL_SCALES = keyMirror({
   color: null,
   radius: null,
   size: null,
-  customMarker: null,
   colorAggr: null,
-  sizeAggr: null,
-  identity: null
+  sizeAggr: null
 });
 
 export const AGGREGATION_TYPES = {
@@ -507,9 +505,7 @@ 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.customMarker]: [SCALE_TYPES.ordinal],
-  [CHANNEL_SCALES.identity]: []
+  [CHANNEL_SCALES.size]: [SCALE_TYPES.linear, SCALE_TYPES.sqrt, SCALE_TYPES.log]
 };
 
 export const linearFieldAggrScaleFunctions = {
@@ -537,9 +533,7 @@ 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.customMarker]: [SCALE_TYPES.ordinal],
-  [CHANNEL_SCALES.identity]: []
+  [CHANNEL_SCALES.size]: [SCALE_TYPES.point]
 };
 
 export const ordinalFieldAggrScaleFunctions = {
@@ -560,9 +554,7 @@ export const ordinalFieldAggrScaleFunctions = {
 export const notSupportedScaleOpts = {
   [CHANNEL_SCALES.color]: [],
   [CHANNEL_SCALES.radius]: [],
-  [CHANNEL_SCALES.size]: [],
-  [CHANNEL_SCALES.customMarker]: [],
-  [CHANNEL_SCALES.identity]: []
+  [CHANNEL_SCALES.size]: []
 };
 
 export const notSupportAggrOpts = {

package/src/layers/base-layer.js

@@ -56,7 +56,6 @@ 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} */
 
@@ -66,17 +65,12 @@ import {scaleOrdinal} from 'd3-scale';
  */
 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,
@@ -814,31 +808,6 @@ 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
@@ -849,7 +818,6 @@ class Layer {
   getAttributeAccessors({dataAccessor = defaultDataAccessor, dataContainer}) {
     const attributeAccessors = {};
 
-    // eslint-disable-next-line complexity
     Object.keys(this.visualChannels).forEach(channel => {
       const {
         field,
@@ -865,9 +833,7 @@ class Layer {
         aggregation
       } = this.visualChannels[channel];
 
-      const shouldGetScale = Boolean(
-        (scale || channelScaleType === CHANNEL_SCALES.identity) && this.config[field]
-      );
+      const shouldGetScale = this.config[field];
 
       if (shouldGetScale) {
         const args = [this.config[scale], this.config[domain], this.config.visConfig[range]];
@@ -878,12 +844,8 @@ class Layer {
         const aggregationValue = this.config.visConfig[aggregation];
 
         const scaleFunction =
-          channelScaleType === CHANNEL_SCALES.identity
-            ? scaleIdentity
-            : channelScaleType === CHANNEL_SCALES.color
+          channelScaleType === CHANNEL_SCALES.color
             ? this.getColorScale(...args)
-            : channelScaleType === CHANNEL_SCALES.customMarker
-            ? this.getCustomMarkersScale(this.config.visConfig[range])
             : this.getVisChannelScale(...args, isFixed);
 
         attributeAccessors[accessor] = d =>
@@ -1229,12 +1191,6 @@ 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');
 
@@ -1344,30 +1300,6 @@ 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/geojson-layer/geojson-layer.js

@@ -30,8 +30,7 @@ import {LAYER_VIS_CONFIGS} from 'layers/layer-factory';
 
 const SUPPORTED_ANALYZER_TYPES = {
   [DATA_TYPES.GEOMETRY]: true,
-  [DATA_TYPES.GEOMETRY_FROM_STRING]: true,
-  [DATA_TYPES.PAIR_GEOMETRY_FROM_STRING]: true
+  [DATA_TYPES.GEOMETRY_FROM_STRING]: true
 };
 
 export const geojsonVisConfigs = {

package/src/layers/layer-factory.js

@@ -26,7 +26,6 @@ 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,
@@ -430,27 +429,6 @@ 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,13 +20,12 @@
 
 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, UNKNOWN_COLOR} from 'constants/default-settings';
+import {DEFAULT_LAYER_COLOR, CHANNEL_SCALES} from 'constants/default-settings';
 
 import {getTextOffsetByRadius, formatTextLabelData} from '../layer-text-label';
 
@@ -44,9 +43,6 @@ const brushingExtension = new BrushingExtension();
 export const pointVisConfigs = {
   radius: 'radius',
   fixedRadius: 'fixedRadius',
-  customMarkers: 'customMarkers',
-  customMarkersUrl: 'customMarkersUrl',
-  customMarkersRange: 'customMarkersRange',
   opacity: 'opacity',
   outline: 'outline',
   thickness: 'thickness',
@@ -126,31 +122,6 @@ 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: 'getAngle',
-        supportedFieldTypes: ['float', 'integer', 'real', 'number'],
-        defaultValue: () => 0,
-        nullValue: 0,
-        condition: config => config.rotationField
       }
     };
   }
@@ -210,10 +181,7 @@ export default class PointLayer extends Layer {
       // add stroke color visual channel
       strokeColorField: null,
       strokeColorDomain: [0, 1],
-      strokeColorScale: 'quantile',
-
-      customMarkersField: null,
-      customMarkersScale: 'ordinal'
+      strokeColorScale: 'quantile'
     };
   }
 
@@ -269,22 +237,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, customMarkersStatus} = opts;
+    const {data, gpuFilter, objectHovered, mapState, interactionConfig} = 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,
@@ -310,97 +278,16 @@ 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,
-        ...commonLayerProps,
-        ...scatterPlotLayerProps,
+        parameters: {
+          // circles will be flat on the map when the altitude column is not used
+          depthTest: this.config.columns.altitude?.fieldIdx > -1
+        },
         radiusUnits,
         lineWidthUnits: 'pixels',
         updateTriggers,
@@ -411,7 +298,7 @@ export default class PointLayer extends Layer {
         ? [
             new ScatterplotLayer({
               ...this.getDefaultHoverLayerProps(),
-              ...scatterPlotLayerProps,
+              ...layerProps,
               data: [hoveredObject],
               getLineColor: this.config.highlightColor,
               getFillColor: this.config.highlightColor,
@@ -421,7 +308,15 @@ export default class PointLayer extends Layer {
           ]
         : []),
       // text label layer
-      ...textLabelLayer
+      ...this.renderTextLabelLayer(
+        {
+          getPosition: data.getPosition,
+          sharedProps,
+          getPixelOffset,
+          updateTriggers
+        },
+        opts
+      )
     ];
   }
 }