@carto/kepler.gl 0.0.18-alpha.1 → 0.0.19

package/package.json

@@ -2,7 +2,7 @@
   "name": "@carto/kepler.gl",
   "author": "CARTO",
   "homepage": "https://github.com/CartoDB/carto-kepler#readme",
-  "version": "0.0.18-alpha.1",
+  "version": "0.0.19",
   "description": "kepler.gl is a webgl based application to visualize large scale location data in the browser",
   "license": "MIT",
   "main": "dist/index.js",
@@ -79,19 +79,19 @@
     "umd"
   ],
   "dependencies": {
-    "@deck.gl/aggregation-layers": "^8.6.2",
-    "@deck.gl/core": "^8.6.2",
-    "@deck.gl/extensions": "^8.6.2",
-    "@deck.gl/geo-layers": "^8.6.2",
-    "@deck.gl/layers": "^8.6.2",
-    "@deck.gl/mesh-layers": "^8.6.2",
-    "@deck.gl/react": "^8.6.2",
-    "@loaders.gl/core": "^3.0.11",
-    "@loaders.gl/csv": "^3.0.11",
-    "@loaders.gl/gltf": "^3.0.11",
-    "@loaders.gl/json": "^3.0.11",
-    "@loaders.gl/loader-utils": "^3.0.11",
-    "@loaders.gl/polyfills": "^3.0.11",
+    "@deck.gl/aggregation-layers": "^8.7.0-beta.2",
+    "@deck.gl/core": "^8.7.0-beta.2",
+    "@deck.gl/extensions": "^8.7.0-beta.2",
+    "@deck.gl/geo-layers": "^8.7.0-beta.2",
+    "@deck.gl/layers": "^8.7.0-beta.2",
+    "@deck.gl/mesh-layers": "^8.7.0-beta.2",
+    "@deck.gl/react": "^8.7.0-beta.2",
+    "@loaders.gl/core": "^3.1.5",
+    "@loaders.gl/csv": "^3.1.5",
+    "@loaders.gl/gltf": "^3.1.5",
+    "@loaders.gl/json": "^3.1.5",
+    "@loaders.gl/loader-utils": "^3.1.5",
+    "@loaders.gl/polyfills": "^3.1.5",
     "@luma.gl/constants": "^8.5.10",
     "@luma.gl/core": "^8.5.10",
     "@mapbox/geo-viewport": "^0.4.1",

package/src/components/kepler-gl.d.ts

@@ -37,6 +37,7 @@ export type KeplerGlProps = {
   onExportToCloudSuccess?: OnSuccessCallBack;
   onExportToCloudError?: OnErrorCallBack;
   readOnly?: boolean;
+  maskPolygon?: Array<Array<number>>
 };
 
 export type UnconnectedKeplerGlProps = KeplerGlProps & {

package/src/components/kepler-gl.js

@@ -172,7 +172,8 @@ export const plotContainerSelector = props => ({
   setExportImageSetting: props.uiStateActions.setExportImageSetting,
   setExportImageDataUri: props.uiStateActions.setExportImageDataUri,
   setExportImageError: props.uiStateActions.setExportImageError,
-  splitMaps: props.visState.splitMaps
+  splitMaps: props.visState.splitMaps,
+  maskPolygon: props.maskPolygon
 });
 
 export const isSplitSelector = props =>
@@ -366,7 +367,8 @@ function KeplerGlFactory(
         uiState,
         visState,
         // readOnly override
-        readOnly
+        readOnly,
+        maskPolygon
       } = this.props;
 
       const dimensions = this.state.dimensions || {width, height};
@@ -390,7 +392,16 @@ function KeplerGlFactory(
       const notificationPanelFields = notificationPanelSelector(this.props);
 
       const mapContainers = !isSplit
-        ? [<MapContainer primary={true} key={0} index={0} {...mapFields} mapLayers={null} />]
+        ? [
+            <MapContainer
+              primary={true}
+              key={0}
+              index={0}
+              {...mapFields}
+              mapLayers={null}
+              maskPolygon={maskPolygon}
+            />
+          ]
         : splitMaps.map((settings, index) => (
             <MapContainer
               key={index}
@@ -398,6 +409,7 @@ function KeplerGlFactory(
               primary={index === 1}
               {...mapFields}
               mapLayers={splitMaps[index].layers}
+              maskPolygon={maskPolygon}
             />
           ));
 

package/src/components/map-container.js

@@ -24,6 +24,8 @@ import PropTypes from 'prop-types';
 import MapboxGLMap from 'react-map-gl';
 import DeckGL from '@deck.gl/react';
 import {createSelector} from 'reselect';
+import {OPERATION} from '@deck.gl/core';
+import {SolidPolygonLayer} from '@deck.gl/layers';
 import WebMercatorViewport from 'viewport-mercator-project';
 import {errorNotification} from 'utils/notifications-utils';
 
@@ -50,6 +52,7 @@ import ThreeDBuildingLayer from 'deckgl-layers/3d-building-layer/3d-building-lay
 import {
   FILTER_TYPES,
   GEOCODER_LAYER_ID,
+  MASK_LAYER_ID,
   THROTTLE_NOTIFICATION_TIME
 } from 'constants/default-settings';
 
@@ -395,7 +398,8 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
         layers,
         visStateActions,
         mapboxApiAccessToken,
-        mapboxApiUrl
+        mapboxApiUrl,
+        maskPolygon
       } = this.props;
 
       // initialise layers from props if exists
@@ -422,6 +426,15 @@ export default function MapContainerFactory(MapPopover, MapControl, Editor) {
         deckGlLayers = deckGlLayers.concat(this.props.deckGlProps.layersOnTop);
       }
 
+      deckGlLayers.push(
+        new SolidPolygonLayer({
+          id: MASK_LAYER_ID,
+          operation: OPERATION.MASK,
+          data: maskPolygon ? [{polygon: maskPolygon}] : [],
+          getFillColor: [255, 255, 255, 255]
+        })
+      );
+
       if (mapStyle.visibleLayerGroups['3d building']) {
         deckGlLayers.push(
           new ThreeDBuildingLayer({

package/src/components/plot-container.js

@@ -153,7 +153,7 @@ export default function PlotContainerFactory(MapContainer, MapsLayout) {
     };
 
     render() {
-      const {exportImageSetting, mapFields, splitMaps} = this.props;
+      const {exportImageSetting, mapFields, splitMaps, maskPolygon} = this.props;
       const {imageSize = {}, legend} = exportImageSetting;
       const {mapState} = mapFields;
       const isSplit = splitMaps && splitMaps.length > 1;
@@ -205,7 +205,8 @@ export default function PlotContainerFactory(MapContainer, MapsLayout) {
         MapComponent: StaticMap,
         onMapRender: this._onMapRender,
         isExport: true,
-        deckGlProps
+        deckGlProps,
+        maskPolygon
       };
 
       const mapContainers = !isSplit ? (

package/src/constants/default-settings.js

@@ -893,3 +893,5 @@ export const MAP_CONTROLS = keyMirror({
   mapDraw: null,
   mapLocale: null
 });
+
+export const MASK_LAYER_ID = 'mask_layer';

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

@@ -33,6 +33,7 @@ import {LAYER_VIS_CONFIGS} from 'layers/layer-factory';
 import {SCALE_TYPES} from 'constants/default-settings';
 import {DEFAULT_COLOR_RANGE} from 'constants/color-ranges';
 import ClusterBuilder, {getGeoJSON} from '../layer-utils/cluster-utils';
+import {getMaskExtensionProps} from 'utils/layer-utils';
 
 const defaultRadius = LAYER_VIS_CONFIGS.clusterRadius.defaultValue;
 const defaultRadiusRange = LAYER_VIS_CONFIGS.clusterRadiusRange.defaultValue;
@@ -225,6 +226,8 @@ export default class ClusterLayer extends AggregationLayer {
     const distanceScale = getDistanceScales(this.context.viewport);
     const metersPerPixel = distanceScale.metersPerPixel[0];
 
+    const maskExtensionProps = getMaskExtensionProps(this.props.maskPolygon);
+
     // return props to the sublayer constructor
     return new ScatterplotLayer({
       id: `${id}-cluster`,
@@ -236,7 +239,8 @@ export default class ClusterLayer extends AggregationLayer {
       autoHighlight,
       highlightColor,
       updateTriggers,
-      ...accessors
+      ...accessors,
+      ...maskExtensionProps
     });
   }
 }

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/utils/layer-utils.d.ts

@@ -66,4 +66,12 @@ export function prepareLayersForDeck(
   layerData: VisState['layerData'], 
 ): {
   [key: string]: boolean;
+}
+
+export function getMaskExtensionProps(
+  maskPolygon: Array<Array<number>>, 
+): {
+  maskId: string,
+  maskEnabled: boolean,
+  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,13 @@ export function prepareLayersToRender(layers, layerData, mapLayers) {
     {}
   );
 }
+
+const maskExtension = new MaskExtension();
+
+export function getMaskExtensionProps(maskPolygon) {
+  return {
+    maskId: MASK_LAYER_ID,
+    maskEnabled: Boolean(maskPolygon && maskPolygon.length),
+    extensions: [maskExtension]
+  };
+}