@carto/kepler.gl 0.0.77 → 0.0.78-0

package/src/deckgl-layers/line-layer/line-layer.ts

@@ -0,0 +1,126 @@
+// 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 {LineLayer, LineLayerProps} from '@deck.gl/layers';
+import GL from '@luma.gl/constants';
+import {RGBAColor} from 'deck.gl';
+import {editShader} from '../../deckgl-layers/layer-utils/shader-utils';
+
+const defaultProps = {
+  ...LineLayer.defaultProps,
+  getTargetColor: x => x.color || [0, 0, 0, 255]
+};
+
+function addInstanceColorShader(vs) {
+  const targetColorVs = editShader(
+    vs,
+    'line target color vs',
+    'attribute vec4 instanceColors;',
+    'attribute vec4 instanceColors; attribute vec4 instanceTargetColors;'
+  );
+
+  return editShader(
+    targetColorVs,
+    'line color vs',
+    'vColor = vec4(instanceColors.rgb, instanceColors.a * opacity);',
+    `vec4 color = mix(instanceColors, instanceTargetColors, positions.x);` +
+      `vColor = vec4(color.rgb, color.a * opacity);`
+  );
+}
+
+function addElevationScale(vs) {
+  let elevationVs = editShader(
+    vs,
+    'line elevation scale 1 vs',
+    'uniform float widthMaxPixels;',
+    `uniform float widthMaxPixels;
+     uniform float elevationScale;`
+  );
+
+  elevationVs = editShader(
+    elevationVs,
+    'line elevation scale 2 vs',
+    `geometry.worldPosition = instanceSourcePositions;
+  geometry.worldPositionAlt = instanceTargetPositions;`,
+    `vec3 sourcePosAdjusted = instanceSourcePositions;
+     vec3 targetPosAdjusted = instanceTargetPositions;
+     sourcePosAdjusted.z *= elevationScale;
+     targetPosAdjusted.z *= elevationScale;
+
+     geometry.worldPosition = sourcePosAdjusted;
+     geometry.worldPositionAlt = sourcePosAdjusted;`
+  );
+
+  elevationVs = editShader(
+    elevationVs,
+    'line elevation scale 3 vs',
+    'vec4 source = project_position_to_clipspace(source_world, source_world_64low, vec3(0.), source_commonspace);',
+    'vec4 source = project_position_to_clipspace(sourcePosAdjusted, instanceSourcePositions64Low, vec3(0.), source_commonspace);'
+  );
+
+  elevationVs = editShader(
+    elevationVs,
+    'line elevation scale 4 vs',
+    'vec4 target = project_position_to_clipspace(target_world, target_world_64low, vec3(0.), target_commonspace);',
+    'vec4 target = project_position_to_clipspace(targetPosAdjusted, instanceTargetPositions64Low, vec3(0.), target_commonspace);'
+  );
+
+  return elevationVs;
+}
+
+export default class EnhancedLineLayer extends LineLayer<
+  any,
+  LineLayerProps<any> & {elevationScale: number; getTargetColor: RGBAColor}
+> {
+  getShaders() {
+    const shaders = super.getShaders();
+
+    let vs = addInstanceColorShader(shaders.vs);
+    vs = addElevationScale(vs);
+
+    return {
+      ...shaders,
+      vs
+    };
+  }
+
+  draw({uniforms}) {
+    const {elevationScale} = this.props;
+    super.draw({uniforms: {...uniforms, elevationScale}});
+  }
+
+  initializeState() {
+    super.initializeState(undefined);
+    const {attributeManager} = this.state;
+    attributeManager.addInstanced({
+      instanceTargetColors: {
+        size: this.props.colorFormat?.length,
+        type: GL.UNSIGNED_BYTE,
+        normalized: true,
+        transition: true,
+        accessor: 'getTargetColor',
+        defaultValue: [0, 0, 0, 255]
+      }
+    });
+  }
+}
+
+EnhancedLineLayer.layerName = 'EnhancedLineLayer';
+EnhancedLineLayer.defaultProps = defaultProps;

package/src/deckgl-layers/svg-icon-layer/scatterplot-icon-layer.ts

@@ -0,0 +1,63 @@
+// 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 {ScatterplotLayer, ScatterplotLayerProps} from '@deck.gl/layers';
+import {Geometry, Model} from '@luma.gl/core';
+import GL from '@luma.gl/constants';
+
+const DEFAULT_POS = [-1, -1, 0, -1, 1, 0, 1, 1, 0, 1, -1, 0];
+
+export interface ScatterplotIconLayerProps extends ScatterplotLayerProps<any> {
+  iconGeometry: number;
+}
+
+export default class ScatterplotIconLayer extends ScatterplotLayer<any, ScatterplotIconLayerProps> {
+  _getModel(gl: WebGLRenderingContext) {
+    // use default scatterplot shaders
+    const shaders = this.getShaders(undefined);
+
+    const {iconGeometry} = this.props;
+
+    const geometry = iconGeometry
+      ? new Geometry({
+          drawMode: GL.TRIANGLES,
+          attributes: {
+            positions: new Float32Array(iconGeometry)
+          }
+        })
+      : new Geometry({
+          drawMode: GL.TRIANGLE_FAN,
+          attributes: {
+            positions: new Float32Array(DEFAULT_POS)
+          }
+        });
+
+    return new Model(gl, {
+      ...shaders,
+      id: this.props.id,
+      geometry,
+      isInstanced: true,
+      // @ts-ignore
+      shaderCache: this.context.shaderCache
+    });
+  }
+}
+
+ScatterplotIconLayer.layerName = 'ScatterplotIconLayer';

package/src/deckgl-layers/svg-icon-layer/svg-icon-layer.ts

@@ -0,0 +1,96 @@
+// 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 {CompositeLayer} from '@deck.gl/core';
+import {CompositeLayerProps} from '@deck.gl/core/lib/composite-layer';
+import {Position, RGBAColor} from 'deck.gl';
+import {RGBColor} from 'reducers';
+import ScatterplotIconLayer from './scatterplot-icon-layer';
+
+// default icon geometry is a square
+const DEFAULT_ICON_GEOMETRY = [1, 1, 0, 1, -1, 0, -1, -1, 0, -1, -1, 0, -1, 1, 0, 1, 1, 0];
+
+const defaultProps = {
+  getIconGeometry: (iconId: string) => DEFAULT_ICON_GEOMETRY,
+  getIcon: (d: {icon: string}) => d.icon
+};
+
+export interface SvgIconLayerProps extends CompositeLayerProps<any> {
+  getIconGeometry: (i: string) => number[];
+  getIcon: (d: {icon: string}) => string;
+  getPosition: (d: any) => Position;
+  getRadius: ((d: any) => number) | number;
+  getFillColor: RGBColor | RGBAColor;
+}
+
+export default class SvgIconLayer extends CompositeLayer<any, SvgIconLayerProps> {
+  // Must be defined
+  initializeState() {
+    this.state = {
+      data: {}
+    };
+  }
+
+  updateState({changeFlags}) {
+    if (changeFlags.dataChanged) {
+      this._extractSublayers();
+    }
+  }
+
+  _extractSublayers() {
+    const {data, getIconGeometry, getIcon} = this.props;
+
+    const iconLayers = {};
+    for (let i = 0; i < data.length; i++) {
+      const iconId = getIcon(data[i]);
+      iconLayers[iconId] = iconLayers[iconId] || {
+        id: iconId,
+        geometry: getIconGeometry(iconId) || DEFAULT_ICON_GEOMETRY,
+        data: []
+      };
+      iconLayers[iconId].data.push(data[i]);
+    }
+    this.setState({
+      data: Object.values(iconLayers)
+    });
+  }
+
+  renderLayers() {
+    const layerId = this.props.id;
+
+    const layers =
+      this.state.data &&
+      this.state.data.length &&
+      this.state.data.map(
+        ({id, data, geometry}) =>
+          new ScatterplotIconLayer({
+            ...this.props,
+            id: `${layerId}-${id}`,
+            data,
+            iconGeometry: geometry
+          })
+      );
+
+    return layers && layers.length > 0 ? layers : null;
+  }
+}
+
+SvgIconLayer.layerName = 'SvgIconLayer';
+SvgIconLayer.defaultProps = defaultProps;

package/src/index.d.ts

@@ -0,0 +1 @@
+export * from './components';

package/src/layers/aggregation-layer.ts

@@ -0,0 +1,402 @@
+// 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 memoize from 'lodash.memoize';
+import Layer, {
+  LayerBaseConfig,
+  LayerColorConfig,
+  LayerColumn,
+  LayerSizeConfig,
+  VisualChannelDescription,
+  VisualChannels
+} from './base-layer';
+import {getMaskExtensionProps} from 'utils/layer-utils';
+import {hexToRgb} from '../utils/color-utils';
+import {aggregate} from '../utils/aggregate-utils';
+import {
+  HIGHLIGH_COLOR_3D,
+  CHANNEL_SCALES,
+  FIELD_OPTS,
+  DEFAULT_AGGREGATION
+} from '../constants/default-settings';
+import {Datasets, Merge} from '../reducers';
+import {ColorRange} from '../constants/color-ranges';
+import {KeplerTable} from '../utils';
+
+type AggregationLayerColumns = {
+  lat: LayerColumn;
+  lng: LayerColumn;
+};
+
+export type AggregationLayerData = {
+  index: number;
+};
+
+export const pointPosAccessor = ({lat, lng}: AggregationLayerColumns) => dc => d => [
+  dc.valueAt(d.index, lng.fieldIdx),
+  dc.valueAt(d.index, lat.fieldIdx)
+];
+
+export const pointPosResolver = ({lat, lng}: AggregationLayerColumns) =>
+  `${lat.fieldIdx}-${lng.fieldIdx}`;
+
+export const getValueAggrFunc = (field, aggregation) => {
+  return points => {
+    return field
+      ? aggregate(
+          points.map(p => {
+            return field.valueAccessor(p.source ? p.source : p);
+          }),
+          aggregation
+        )
+      : points.length;
+  };
+};
+
+export const getFilterDataFunc = (filterRange, getFilterValue) => pt =>
+  getFilterValue(pt).every((val, i) => val >= filterRange[i][0] && val <= filterRange[i][1]);
+
+const getLayerColorRange = (colorRange: ColorRange) => {
+  const {colorMap} = colorRange;
+
+  if (colorMap) {
+    return colorMap.map(cMap => hexToRgb(cMap[1]));
+  }
+  return colorRange.colors.map(hexToRgb);
+};
+
+const getLayerColorDomain = (colorDomain: ColorRange) => {
+  const {colorMap} = colorDomain;
+
+  if (colorMap) {
+    return colorMap.map(cMap => cMap[0]);
+  }
+  return null;
+};
+
+export const aggregateRequiredColumns: ['lat', 'lng'] = ['lat', 'lng'];
+
+export type AggregationLayerVisualChannelConfig = LayerColorConfig & LayerSizeConfig;
+export type AggregationLayerConfig = Merge<LayerBaseConfig, {columns: AggregationLayerColumns}> &
+  AggregationLayerVisualChannelConfig;
+export default class AggregationLayer extends Layer {
+  getColorRange: any;
+  declare config: AggregationLayerConfig;
+
+  constructor(
+    props?: {
+      id?: string;
+    } & Partial<LayerBaseConfig>
+  ) {
+    super(props);
+
+    this.getPositionAccessor = dataContainer =>
+      pointPosAccessor(this.config.columns)(dataContainer);
+    this.getColorRange = memoize(getLayerColorRange);
+    this.getColorDomain = memoize(getLayerColorDomain);
+  }
+
+  get isAggregated(): true {
+    return true;
+  }
+
+  get requiredLayerColumns() {
+    return aggregateRequiredColumns;
+  }
+
+  get columnPairs() {
+    return this.defaultPointColumnPairs;
+  }
+
+  get noneLayerDataAffectingProps() {
+    return [
+      ...super.noneLayerDataAffectingProps,
+      'enable3d',
+      'colorRange',
+      'colorDomain',
+      'sizeRange',
+      'sizeScale',
+      'sizeDomain',
+      'percentile',
+      'coverage',
+      'elevationPercentile',
+      'elevationScale',
+      'enableElevationZoomFactor'
+    ];
+  }
+
+  get visualChannels(): VisualChannels {
+    return {
+      color: {
+        aggregation: 'colorAggregation',
+        channelScaleType: CHANNEL_SCALES.colorAggr,
+        defaultMeasure: 'property.pointCount',
+        domain: 'colorDomain',
+        field: 'colorField',
+        key: 'color',
+        property: 'color',
+        range: 'colorRange',
+        scale: 'colorScale'
+      },
+      size: {
+        aggregation: 'sizeAggregation',
+        channelScaleType: CHANNEL_SCALES.sizeAggr,
+        condition: config => config.visConfig.enable3d,
+        defaultMeasure: 'property.pointCount',
+        domain: 'sizeDomain',
+        field: 'sizeField',
+        key: 'size',
+        property: 'height',
+        range: 'sizeRange',
+        scale: 'sizeScale'
+      }
+    };
+  }
+
+  /**
+   * Get the description of a visualChannel config
+   * @param key
+   * @returns
+   */
+  getVisualChannelDescription(key: string): VisualChannelDescription {
+    const channel = this.visualChannels[key];
+    if (!channel) return {label: '', measure: ''};
+    // e.g. label: Color, measure: Average of ETA
+    const {range, field, defaultMeasure, aggregation} = channel;
+    const fieldConfig = this.config[field];
+    const label = this.visConfigSettings[range].label;
+
+    return {
+      label: typeof label === 'function' ? label(this.config) : label,
+      measure:
+        fieldConfig && aggregation
+          ? `${this.config.visConfig[aggregation]} of ${fieldConfig.displayName ||
+              fieldConfig.name}`
+          : defaultMeasure
+    };
+  }
+
+  getHoverData(object) {
+    // return aggregated object
+    return object;
+  }
+
+  /**
+   * Aggregation layer handles visual channel aggregation inside deck.gl layer
+   */
+  updateLayerVisualChannel({dataContainer}, channel) {
+    this.validateVisualChannel(channel);
+  }
+
+  /**
+   * Validate aggregation type on top of basic layer visual channel validation
+   * @param channel
+   */
+  validateVisualChannel(channel) {
+    // field type decides aggregation type decides scale type
+    this.validateFieldType(channel);
+    this.validateAggregationType(channel);
+    this.validateScale(channel);
+  }
+
+  /**
+   * Validate aggregation type based on selected field
+   */
+  validateAggregationType(channel) {
+    const visualChannel = this.visualChannels[channel];
+    const {field, aggregation} = visualChannel;
+    const aggregationOptions = this.getAggregationOptions(channel);
+
+    if (!aggregation) {
+      return;
+    }
+
+    if (!aggregationOptions.length) {
+      // if field cannot be aggregated, set field to null
+      this.updateLayerConfig({[field]: null});
+    } else if (!aggregationOptions.includes(this.config.visConfig[aggregation])) {
+      // current aggregation type is not supported by this field
+      // set aggregation to the first supported option
+      this.updateLayerVisConfig({[aggregation]: aggregationOptions[0]});
+    }
+  }
+
+  getAggregationOptions(channel) {
+    const visualChannel = this.visualChannels[channel];
+    const {field, channelScaleType} = visualChannel;
+
+    return Object.keys(
+      this.config[field]
+        ? FIELD_OPTS[this.config[field].type].scale[channelScaleType]
+        : DEFAULT_AGGREGATION[channelScaleType]
+    );
+  }
+
+  /**
+   * Get scale options based on current field and aggregation type
+   * @param channel
+   * @returns
+   */
+  getScaleOptions(channel: string): string[] {
+    const visualChannel = this.visualChannels[channel];
+    const {field, aggregation, channelScaleType} = visualChannel;
+    const aggregationType = aggregation ? this.config.visConfig[aggregation] : null;
+
+    if (!aggregationType) {
+      return [];
+    }
+
+    return this.config[field]
+      ? // scale options based on aggregation
+        FIELD_OPTS[this.config[field].type].scale[channelScaleType][aggregationType]
+      : // default scale options for point count
+        DEFAULT_AGGREGATION[channelScaleType][aggregationType];
+  }
+
+  /**
+   * Aggregation layer handles visual channel aggregation inside deck.gl layer
+   */
+  updateLayerDomain(datasets, newFilter): AggregationLayer {
+    return this;
+  }
+
+  updateLayerMeta(dataContainer, getPosition) {
+    // get bounds from points
+    const bounds = this.getPointsBounds(dataContainer, getPosition);
+
+    this.updateMeta({bounds});
+  }
+
+  calculateDataAttribute({dataContainer, filteredIndex}: KeplerTable, getPosition) {
+    const data: AggregationLayerData[] = [];
+
+    for (let i = 0; i < filteredIndex.length; i++) {
+      const index = filteredIndex[i];
+      const pos = getPosition({index});
+
+      // if doesn't have point lat or lng, do not add the point
+      // deck.gl can't handle position = null
+      if (pos.every(Number.isFinite)) {
+        data.push({
+          index
+        });
+      }
+    }
+
+    return data;
+  }
+
+  formatLayerData(datasets: Datasets, oldLayerData) {
+    if (this.config.dataId === null) {
+      return {};
+    }
+    const {gpuFilter, dataContainer} = datasets[this.config.dataId];
+    const getPosition = this.getPositionAccessor(dataContainer);
+
+    const getColorValue = getValueAggrFunc(
+      this.config.colorField,
+      this.config.visConfig.colorAggregation
+    );
+
+    const getElevationValue = getValueAggrFunc(
+      this.config.sizeField,
+      this.config.visConfig.sizeAggregation
+    );
+    const hasFilter = Object.values(gpuFilter.filterRange).some(arr => arr.some(v => v !== 0));
+
+    const getFilterValue = gpuFilter.filterValueAccessor(dataContainer)();
+    const filterData = hasFilter
+      ? getFilterDataFunc(gpuFilter.filterRange, getFilterValue)
+      : undefined;
+
+    const {data} = this.updateData(datasets, oldLayerData);
+
+    return {
+      data,
+      getPosition,
+      _filterData: filterData,
+      // @ts-expect-error
+      ...(getColorValue ? {getColorValue} : {}),
+      // @ts-expect-error
+      ...(getElevationValue ? {getElevationValue} : {})
+    };
+  }
+
+  getDefaultDeckLayerProps(opts): any {
+    const baseProp = super.getDefaultDeckLayerProps(opts);
+    const maskExtensionProps = getMaskExtensionProps(opts.maskPolygon);
+
+    return {
+      ...baseProp,
+      ...maskExtensionProps,
+      highlightColor: HIGHLIGH_COLOR_3D,
+      // gpu data filtering is not supported in aggregation layer
+      extensions: [...maskExtensionProps.extensions],
+      autoHighlight: this.config.visConfig.enable3d
+    };
+  }
+
+  getDefaultAggregationLayerProp(opts) {
+    const {gpuFilter, layerCallbacks = {}} = opts;
+    const {visConfig} = this.config;
+
+    const updateTriggers = {
+      getColorValue: {
+        colorField: this.config.colorField,
+        colorAggregation: this.config.visConfig.colorAggregation
+      },
+      getElevationValue: {
+        sizeField: this.config.sizeField,
+        sizeAggregation: this.config.visConfig.sizeAggregation
+      },
+      _filterData: {
+        filterRange: gpuFilter.filterRange,
+        ...gpuFilter.filterValueUpdateTriggers
+      }
+    };
+
+    return {
+      ...this.getDefaultDeckLayerProps(opts),
+      coverage: visConfig.coverage,
+
+      // color
+      colorRange: this.getColorRange(visConfig.colorRange),
+      colorDomain: this.getColorDomain(visConfig.colorRange),
+      colorScaleType: this.config.colorScale,
+      upperPercentile: visConfig.percentile[1],
+      lowerPercentile: visConfig.percentile[0],
+      colorAggregation: visConfig.colorAggregation,
+
+      // elevation
+      extruded: visConfig.enable3d,
+      elevationScale: visConfig.elevationScale,
+      elevationScaleType: this.config.sizeScale,
+      elevationRange: visConfig.sizeRange,
+      elevationLowerPercentile: visConfig.elevationPercentile[0],
+      elevationUpperPercentile: visConfig.elevationPercentile[1],
+
+      // updateTriggers
+      updateTriggers,
+
+      // callbacks
+      onSetColorDomain: layerCallbacks.onSetLayerDomain
+    };
+  }
+}