@carto/kepler.gl 0.0.18-alpha.0 → 0.0.21

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

@@ -218,7 +218,15 @@ export default class ClusterLayer extends AggregationLayer {
     const {cpuAggregator} = this.state;
 
     // base layer props
-    const {visible, opacity, pickable, autoHighlight, highlightColor} = this.props;
+    const {
+      visible,
+      opacity,
+      pickable,
+      autoHighlight,
+      highlightColor,
+      maskId,
+      extensions
+    } = this.props;
     const updateTriggers = this._getSublayerUpdateTriggers();
     const accessors = this._getSubLayerAccessors();
 
@@ -236,7 +244,9 @@ export default class ClusterLayer extends AggregationLayer {
       autoHighlight,
       highlightColor,
       updateTriggers,
-      ...accessors
+      ...accessors,
+      maskId,
+      extensions
     });
   }
 }

package/src/layers/aggregation-layer.js

@@ -20,6 +20,7 @@
 
 import memoize from 'lodash.memoize';
 import Layer from './base-layer';
+import {getMaskExtensionProps} from 'utils/layer-utils';
 import {hexToRgb} from 'utils/color-utils';
 import {aggregate} from 'utils/aggregate-utils';
 import {
@@ -277,11 +278,14 @@ export default class AggregationLayer extends Layer {
 
   getDefaultDeckLayerProps(opts) {
     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: [],
+      extensions: [...maskExtensionProps.extensions],
       autoHighlight: this.config.visConfig.enable3d
     };
   }

package/src/layers/base-layer.js

@@ -54,6 +54,7 @@ import {getLatLngBounds, notNullorUndefined} from 'utils/data-utils';
 import {getSampleData} from 'utils/table-utils/data-container-utils';
 
 import {hexToRgb, getColorGroupByName, reverseColorRange} from 'utils/color-utils';
+import {getMaskExtensionProps} from 'utils/layer-utils';
 
 /** @typedef {import('./index').Layer} LayerClass} */
 
@@ -1078,8 +1079,11 @@ class Layer {
     };
   }
 
-  getDefaultDeckLayerProps({idx, gpuFilter, mapState, visible}) {
+  getDefaultDeckLayerProps({idx, gpuFilter, mapState, visible, maskPolygon}) {
+    const maskExtensionProps = getMaskExtensionProps(maskPolygon);
+
     return {
+      ...maskExtensionProps,
       id: this.id,
       idx,
       coordinateSystem: COORDINATE_SYSTEM.LNGLAT,
@@ -1091,9 +1095,8 @@ class Layer {
       opacity: this.config.visConfig.opacity,
       highlightColor: this.config.highlightColor,
       // data filtering
-      extensions: [dataFilterExtension],
+      extensions: [dataFilterExtension, ...maskExtensionProps.extensions],
       filterRange: gpuFilter ? gpuFilter.filterRange : undefined,
-
       // layer should be visible and if splitMap, shown in to one of panel
       visible: this.config.isVisible && visible
     };

package/src/localization/en.js

@@ -119,7 +119,8 @@ export default {
       trip: 'trip',
       s2: 'S2',
       '3d': '3D'
-    }
+    },
+    colorRange: 'Palette'
   },
   layerVisConfigs: {
     angle: 'Angle',

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

@@ -66,4 +66,11 @@ export function prepareLayersForDeck(
   layerData: VisState['layerData'], 
 ): {
   [key: string]: boolean;
+}
+
+export function getMaskExtensionProps(
+  maskPolygon: Array<Array<number>>, 
+): {
+  maskId?: string,
+  extensions: Array<unknown>
 }

package/src/utils/layer-utils.js

@@ -19,7 +19,8 @@
 // THE SOFTWARE.
 
 import {OVERLAY_TYPE} from 'layers/base-layer';
-import {GEOCODER_LAYER_ID} from 'constants/default-settings';
+import {GEOCODER_LAYER_ID, MASK_LAYER_ID} from 'constants/default-settings';
+import {MaskExtension} from '@deck.gl/extensions';
 
 /**
  * Find default layers from fields
@@ -124,7 +125,8 @@ export function renderDeckGlLayer(props, layerCallbacks, idx) {
     mapState,
     interactionConfig,
     animationConfig,
-    mapLayers
+    mapLayers,
+    maskPolygon
   } = props;
   const layer = layers[idx];
   const data = layerData[idx];
@@ -141,7 +143,8 @@ export function renderDeckGlLayer(props, layerCallbacks, idx) {
     mapState,
     animationConfig,
     objectHovered,
-    visible
+    visible,
+    maskPolygon
   });
 }
 
@@ -183,3 +186,12 @@ export function prepareLayersToRender(layers, layerData, mapLayers) {
     {}
   );
 }
+
+const maskExtension = new MaskExtension();
+
+export function getMaskExtensionProps(maskPolygon) {
+  return {
+    maskId: Boolean(maskPolygon && maskPolygon.length) && MASK_LAYER_ID,
+    extensions: [maskExtension]
+  };
+}