@carto/kepler.gl 0.0.1-alpha.map-libre

package/src/layers/cluster-layer/cluster-layer-icon.js

@@ -0,0 +1,71 @@
+// 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, {Component} from 'react';
+import PropTypes from 'prop-types';
+import Base from 'components/common/icons/base';
+
+class ClusterLayerIcon extends Component {
+  static propTypes = {
+    /** Set the height of the icon, ex. '16px' */
+    height: PropTypes.string,
+    colors: PropTypes.arrayOf(PropTypes.string)
+  };
+
+  static defaultProps = {
+    height: '16px',
+    predefinedClassName: 'cluster-layer-icon',
+    totalColor: 5
+  };
+
+  render() {
+    return (
+      <Base {...this.props}>
+        <path
+          d="M13.6,22.7c2.9-3.6,4.4-6.3,4.4-8c0-2.7-2.2-4.9-4.9-4.9S8.2,12,8.2,14.7c0,1.7,1.5,4.4,4.4,8l0,0
+	C12.8,23,13.2,23,13.6,22.7C13.5,22.8,13.6,22.7,13.6,22.7z"
+          className="cr1"
+        />
+        <path
+          d="M22.9,57.4c2.5-3.1,3.8-5.5,3.8-7c0-2.4-2-4.4-4.4-4.4S18,48,18,50.4c0,1.5,1.3,3.8,3.8,7l0,0
+	c0.3,0.3,0.7,0.4,1,0.1C22.9,57.4,22.9,57.4,22.9,57.4z"
+          className="cr2"
+        />
+        <path
+          d="M51.4,22.5c2.8-3.4,4.2-6,4.2-7.6c0-2.6-2.1-4.8-4.8-4.8c-2.6,0-4.8,2.1-4.8,4.8c0,1.6,1.4,4.2,4.2,7.6
+	l0,0c0.3,0.3,0.8,0.4,1.1,0.1C51.3,22.5,51.4,22.5,51.4,22.5z"
+          className="cr3"
+        />
+        <path
+          d="M49.2,53.8c3.7-4.5,5.5-7.8,5.5-9.9c0-3.3-2.7-6.1-6.1-6.1c-3.3,0-6.1,2.7-6.1,6.1
+	c0,2.1,1.8,5.4,5.5,9.9l0,0c0.3,0.3,0.7,0.4,1.1,0.1C49.1,53.8,49.1,53.8,49.2,53.8z"
+          className="cr4"
+        />
+        <path
+          d="M31.4,39.6C36.5,33.5,39,29,39,26.1c0-4.4-3.6-8-8-8s-8,3.6-8,8c0,2.9,2.5,7.4,7.6,13.5l0,0
+	C30.8,39.8,31.1,39.9,31.4,39.6C31.3,39.7,31.4,39.6,31.4,39.6z"
+          className="cr5"
+        />
+      </Base>
+    );
+  }
+}
+
+export default ClusterLayerIcon;

package/src/layers/cluster-layer/cluster-layer.js

@@ -0,0 +1,125 @@
+// 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 AggregationLayer from '../aggregation-layer';
+import {ScatterplotLayer} from '@deck.gl/layers';
+
+import DeckGLClusterLayer from 'deckgl-layers/cluster-layer/cluster-layer';
+import {CHANNEL_SCALES} from 'constants/default-settings';
+import ClusterLayerIcon from './cluster-layer-icon';
+
+export const clusterVisConfigs = {
+  opacity: 'opacity',
+  clusterRadius: 'clusterRadius',
+  colorRange: 'colorRange',
+  radiusRange: 'clusterRadiusRange',
+  colorAggregation: 'aggregation'
+};
+
+export default class ClusterLayer extends AggregationLayer {
+  constructor(props) {
+    super(props);
+    this.registerVisConfig(clusterVisConfigs);
+  }
+
+  get type() {
+    return 'cluster';
+  }
+
+  get layerIcon() {
+    return ClusterLayerIcon;
+  }
+
+  get visualChannels() {
+    return {
+      color: {
+        aggregation: 'colorAggregation',
+        channelScaleType: CHANNEL_SCALES.colorAggr,
+        defaultMeasure: 'property.pointCount',
+        domain: 'colorDomain',
+        field: 'colorField',
+        key: 'color',
+        property: 'color',
+        range: 'colorRange',
+        scale: 'colorScale'
+      }
+    };
+  }
+
+  renderLayer(opts) {
+    const {visConfig} = this.config;
+    const {data, gpuFilter, objectHovered, mapState, layerCallbacks} = opts;
+
+    const updateTriggers = {
+      getColorValue: {
+        colorField: this.config.colorField,
+        colorAggregation: this.config.visConfig.colorAggregation
+      },
+      filterData: {
+        filterRange: gpuFilter.filterRange,
+        ...gpuFilter.filterValueUpdateTriggers
+      }
+    };
+    const {_filterData: filterData, ...clusterData} = data;
+    const hoveredObject = this.hasHoveredObject(objectHovered);
+
+    return [
+      new DeckGLClusterLayer({
+        ...this.getDefaultDeckLayerProps(opts),
+        ...clusterData,
+        filterData,
+
+        // radius
+        radiusScale: 1,
+        radiusRange: visConfig.radiusRange,
+        clusterRadius: visConfig.clusterRadius,
+
+        // color
+        colorRange: this.getColorRange(visConfig.colorRange),
+        colorDomain: this.getColorDomain(visConfig.colorRange),
+        colorScaleType: this.config.colorScale,
+        colorAggregation: visConfig.colorAggregation,
+
+        zoom: Math.round(mapState.zoom),
+        width: mapState.width,
+        height: mapState.height,
+
+        // updateTriggers
+        updateTriggers,
+
+        // call back from layer after calculate clusters
+        onSetColorDomain: layerCallbacks.onSetLayerDomain
+      }),
+      // hover layer
+      ...(hoveredObject
+        ? [
+            new ScatterplotLayer({
+              id: `${this.id}-hovered`,
+              data: [hoveredObject],
+              getFillColor: this.config.highlightColor,
+              getRadius: d => d.radius,
+              radiusScale: 1,
+              pickable: false
+            })
+          ]
+        : [])
+    ];
+  }
+}

package/src/layers/default-layer-icon.js

@@ -0,0 +1,50 @@
+// 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, {Component} from 'react';
+import PropTypes from 'prop-types';
+import Base from 'components/common/icons/base';
+
+class DefaultLayerIcon extends Component {
+  static propTypes = {
+    height: PropTypes.string,
+    colors: PropTypes.arrayOf(PropTypes.string)
+  };
+
+  static defaultProps = {
+    height: '16px',
+    predefinedClassName: 'default-layer-icon'
+  };
+
+  render() {
+    return (
+      <Base {...this.props}>
+        <circle cx="29.4" cy="31.6" r="8.4" />
+        <circle cx="48.5" cy="15.7" r="6.5" />
+        <circle cx="11" cy="44.2" r="3" />
+        <circle cx="50" cy="44.2" r="5" />
+        <circle cx="34" cy="54.2" r="3" />
+        <circle cx="14" cy="16.2" r="4" />
+      </Base>
+    );
+  }
+}
+
+export default DefaultLayerIcon;

package/src/layers/geojson-layer/geojson-layer-icon.js

@@ -0,0 +1,68 @@
+// 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, {Component} from 'react';
+import PropTypes from 'prop-types';
+import Base from 'components/common/icons/base';
+
+export default class GeojsonLayerIcon extends Component {
+  static propTypes = {
+    /** Set the height of the icon, ex. '16px' */
+    height: PropTypes.string,
+    colors: PropTypes.arrayOf(PropTypes.string)
+  };
+
+  static defaultProps = {
+    height: null,
+    size: 'tiny',
+    predefinedClassName: 'geojson-layer-icon'
+  };
+
+  render() {
+    return (
+      <Base {...this.props}>
+        <polygon
+          className="cr1"
+          points="25.04 23.08 9.72 31.79 8.19 43.2 19.57 53.83 28.79 53.83 35.6 46.57 39.45 30.08 25.04 23.08"
+        />
+        <polygon
+          className="cr2"
+          points="52.8 26.3 41.74 30.32 37.9 46.75 45.26 53.83 51.45 53.83 55.07 43.51 52.8 26.3"
+          style={{opacity: 0.8}}
+        />
+        <polygon
+          className="cr3"
+          points="36.69 48.75 31.93 53.83 41.96 53.83 36.69 48.75"
+          style={{opacity: 0.4}}
+        />
+        <polygon
+          className="cr3"
+          points="25.95 20.98 40.84 28.22 52.57 24.06 50.89 11.5 23.24 11.5 25.95 20.98"
+          style={{opacity: 0.4}}
+        />
+        <polygon
+          className="cr4"
+          points="20.79 11.9 11.73 15.72 10.08 28.96 23.64 21.25 20.79 11.9"
+          style={{opacity: 0.8}}
+        />
+      </Base>
+    );
+  }
+}

package/src/layers/geojson-layer/geojson-layer.js

@@ -0,0 +1,344 @@
+// 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 uniq from 'lodash.uniq';
+import {DATA_TYPES} from 'type-analyzer';
+
+import Layer, {colorMaker} from '../base-layer';
+import {GeoJsonLayer as DeckGLGeoJsonLayer} from '@deck.gl/layers';
+import {getGeojsonDataMaps, getGeojsonBounds, getGeojsonFeatureTypes} from './geojson-utils';
+import GeojsonLayerIcon from './geojson-layer-icon';
+import {GEOJSON_FIELDS, HIGHLIGH_COLOR_3D, CHANNEL_SCALES} from 'constants/default-settings';
+import {LAYER_VIS_CONFIGS} from 'layers/layer-factory';
+
+const SUPPORTED_ANALYZER_TYPES = {
+  [DATA_TYPES.GEOMETRY]: true,
+  [DATA_TYPES.GEOMETRY_FROM_STRING]: true
+};
+
+export const geojsonVisConfigs = {
+  opacity: 'opacity',
+  strokeOpacity: {
+    ...LAYER_VIS_CONFIGS.opacity,
+    property: 'strokeOpacity'
+  },
+  thickness: {
+    ...LAYER_VIS_CONFIGS.thickness,
+    defaultValue: 1
+  },
+  strokeColor: 'strokeColor',
+  colorRange: 'colorRange',
+  strokeColorRange: 'strokeColorRange',
+  radius: 'radius',
+
+  sizeRange: 'strokeWidthRange',
+  radiusRange: 'radiusRange',
+  heightRange: 'elevationRange',
+  elevationScale: 'elevationScale',
+  enableElevationZoomFactor: 'enableElevationZoomFactor',
+  stroked: 'stroked',
+  filled: 'filled',
+  enable3d: 'enable3d',
+  wireframe: 'wireframe'
+};
+
+export const geoJsonRequiredColumns = ['geojson'];
+export const featureAccessor = ({geojson}) => dc => d => dc.valueAt(d.index, geojson.fieldIdx);
+
+// access feature properties from geojson sub layer
+export const defaultElevation = 500;
+export const defaultLineWidth = 1;
+export const defaultRadius = 1;
+
+export default class GeoJsonLayer extends Layer {
+  constructor(props) {
+    super(props);
+
+    this.dataToFeature = [];
+    this.registerVisConfig(geojsonVisConfigs);
+    this.getPositionAccessor = dataContainer => featureAccessor(this.config.columns)(dataContainer);
+  }
+
+  get type() {
+    return 'geojson';
+  }
+
+  get name() {
+    return 'Polygon';
+  }
+
+  get layerIcon() {
+    return GeojsonLayerIcon;
+  }
+
+  get requiredLayerColumns() {
+    return geoJsonRequiredColumns;
+  }
+
+  get visualChannels() {
+    const visualChannels = super.visualChannels;
+    return {
+      color: {
+        ...visualChannels.color,
+        accessor: 'getFillColor',
+        condition: config => config.visConfig.filled,
+        nullValue: visualChannels.color.nullValue,
+        getAttributeValue: config => d => d.properties.fillColor || config.color,
+        // used this to get updateTriggers
+        defaultValue: config => config.color
+      },
+      strokeColor: {
+        property: 'strokeColor',
+        field: 'strokeColorField',
+        scale: 'strokeColorScale',
+        domain: 'strokeColorDomain',
+        range: 'strokeColorRange',
+        key: 'strokeColor',
+        channelScaleType: CHANNEL_SCALES.color,
+        accessor: 'getLineColor',
+        condition: config => config.visConfig.stroked,
+        nullValue: visualChannels.color.nullValue,
+        getAttributeValue: config => d =>
+          d.properties.lineColor || config.visConfig.strokeColor || config.color,
+        // used this to get updateTriggers
+        defaultValue: config => config.visConfig.strokeColor || config.color
+      },
+      size: {
+        ...visualChannels.size,
+        property: 'stroke',
+        accessor: 'getLineWidth',
+        condition: config => config.visConfig.stroked,
+        nullValue: 0,
+        getAttributeValue: () => d => d.properties.lineWidth || defaultLineWidth
+      },
+      height: {
+        property: 'height',
+        field: 'heightField',
+        scale: 'heightScale',
+        domain: 'heightDomain',
+        range: 'heightRange',
+        key: 'height',
+        channelScaleType: CHANNEL_SCALES.size,
+        accessor: 'getElevation',
+        condition: config => config.visConfig.enable3d,
+        nullValue: 0,
+        getAttributeValue: () => d => d.properties.elevation || defaultElevation
+      },
+      radius: {
+        property: 'radius',
+        field: 'radiusField',
+        scale: 'radiusScale',
+        domain: 'radiusDomain',
+        range: 'radiusRange',
+        key: 'radius',
+        channelScaleType: CHANNEL_SCALES.radius,
+        accessor: 'getRadius',
+        nullValue: 0,
+        getAttributeValue: () => d => d.properties.radius || defaultRadius
+      }
+    };
+  }
+
+  static findDefaultLayerProps({label, fields = []}) {
+    const geojsonColumns = fields
+      .filter(f => f.type === 'geojson' && SUPPORTED_ANALYZER_TYPES[f.analyzerType])
+      .map(f => f.name);
+
+    const defaultColumns = {
+      geojson: uniq([...GEOJSON_FIELDS.geojson, ...geojsonColumns])
+    };
+
+    const foundColumns = this.findDefaultColumnField(defaultColumns, fields);
+    if (!foundColumns || !foundColumns.length) {
+      return {props: []};
+    }
+
+    return {
+      props: foundColumns.map(columns => ({
+        label: (typeof label === 'string' && label.replace(/\.[^/.]+$/, '')) || this.type,
+        columns,
+        isVisible: true
+      }))
+    };
+  }
+
+  getDefaultLayerConfig(props = {}) {
+    return {
+      ...super.getDefaultLayerConfig(props),
+
+      // add height visual channel
+      heightField: null,
+      heightDomain: [0, 1],
+      heightScale: 'linear',
+
+      // add radius visual channel
+      radiusField: null,
+      radiusDomain: [0, 1],
+      radiusScale: 'linear',
+
+      // add stroke color visual channel
+      strokeColorField: null,
+      strokeColorDomain: [0, 1],
+      strokeColorScale: 'quantile'
+    };
+  }
+
+  getHoverData(object, dataContainer) {
+    // index of dataContainer is saved to feature.properties
+    return dataContainer.row(object.properties.index);
+  }
+
+  calculateDataAttribute({dataContainer, filteredIndex}, getPosition) {
+    return filteredIndex.map(i => this.dataToFeature[i]).filter(d => d);
+  }
+
+  formatLayerData(datasets, oldLayerData) {
+    const {gpuFilter, dataContainer} = datasets[this.config.dataId];
+    const {data} = this.updateData(datasets, oldLayerData);
+
+    const customFilterValueAccessor = (dc, d, fieldIndex) => {
+      return dc.valueAt(d.properties.index, fieldIndex);
+    };
+    const indexAccessor = f => f.properties.index;
+
+    const dataAccessor = dc => d => ({index: d.properties.index});
+    const accessors = this.getAttributeAccessors({dataAccessor, dataContainer});
+
+    return {
+      data,
+      getFilterValue: gpuFilter.filterValueAccessor(dataContainer)(
+        indexAccessor,
+        customFilterValueAccessor
+      ),
+      ...accessors
+    };
+  }
+
+  updateLayerMeta(dataContainer) {
+    const getFeature = this.getPositionAccessor(dataContainer);
+    this.dataToFeature = getGeojsonDataMaps(dataContainer, getFeature);
+
+    // get bounds from features
+    const bounds = getGeojsonBounds(this.dataToFeature);
+
+    // keep a record of what type of geometry the collection has
+    const featureTypes = getGeojsonFeatureTypes(this.dataToFeature);
+
+    this.updateMeta({bounds, featureTypes});
+  }
+
+  setInitialLayerConfig({dataContainer}) {
+    this.updateLayerMeta(dataContainer);
+
+    const {featureTypes} = this.meta;
+    // default settings is stroke: true, filled: false
+    if (featureTypes && featureTypes.polygon) {
+      // set both fill and stroke to true
+      return this.updateLayerVisConfig({
+        filled: true,
+        stroked: true,
+        strokeColor: colorMaker.next().value
+      });
+    } else if (featureTypes && featureTypes.point) {
+      // set fill to true if detect point
+      return this.updateLayerVisConfig({filled: true, stroked: false});
+    }
+
+    return this;
+  }
+
+  renderLayer(opts) {
+    const {data, gpuFilter, objectHovered} = opts;
+
+    const {featureTypes} = this.meta;
+    const radiusScale = this.getRadiusScale();
+    const {visConfig} = this.config;
+
+    const layerProps = {
+      lineWidthScale: visConfig.thickness,
+      elevationScale: visConfig.elevationScale,
+      pointRadiusScale: radiusScale,
+      lineMiterLimit: 4
+    };
+
+    const updateTriggers = {
+      ...this.getVisualChannelUpdateTriggers(),
+      getFilterValue: gpuFilter.filterValueUpdateTriggers
+    };
+
+    const defaultLayerProps = this.getDefaultDeckLayerProps(opts);
+    const opaOverwrite = {
+      opacity: visConfig.strokeOpacity
+    };
+
+    const pickable = this.hasInteractivity;
+    const hoveredObject = this.hasHoveredObject(objectHovered);
+
+    return [
+      new DeckGLGeoJsonLayer({
+        ...defaultLayerProps,
+        ...layerProps,
+        ...data,
+        pickable,
+        highlightColor: HIGHLIGH_COLOR_3D,
+        autoHighlight: visConfig.enable3d && pickable,
+        stroked: visConfig.stroked,
+        filled: visConfig.filled,
+        extruded: visConfig.enable3d,
+        wireframe: visConfig.wireframe,
+        wrapLongitude: false,
+        lineMiterLimit: 2,
+        rounded: true,
+        radiusUnits: 'pixels',
+        lineWidthUnits: 'pixels',
+        updateTriggers,
+        _subLayerProps: {
+          ...(featureTypes.polygon ? {'polygons-stroke': opaOverwrite} : {}),
+          ...(featureTypes.line ? {linestrings: opaOverwrite} : {}),
+          ...(featureTypes.point
+            ? {
+                points: {
+                  lineOpacity: visConfig.strokeOpacity
+                }
+              }
+            : {})
+        }
+      }),
+      ...(hoveredObject && !visConfig.enable3d
+        ? [
+            new DeckGLGeoJsonLayer({
+              ...this.getDefaultHoverLayerProps(),
+              ...layerProps,
+              wrapLongitude: false,
+              data: [hoveredObject],
+              getLineWidth: data.getLineWidth,
+              getRadius: data.getRadius,
+              getElevation: data.getElevation,
+              getLineColor: this.config.highlightColor,
+              getFillColor: this.config.highlightColor,
+              // always draw outline
+              stroked: true,
+              filled: false
+            })
+          ]
+        : [])
+    ];
+  }
+}