apply polygo filter on multiple layers at once

src/components/src/map-container.tsx

@@ -711,7 +711,7 @@ export default function MapContainerFactory(
 
       const editorFeatureSelectedIndex = this.selectedPolygonIndexSelector(this.props);
 
-      const {setFeatures, onLayerClick, setSelectedFeature} = visStateActions;
+      const {setFeatures, onLayerClick, setSelectedFeature, setPolygonFilterLayer} = visStateActions;
 
       const generateDeckGLLayersMethod = generateDeckGLLayers ?? computeDeckLayers;
       const deckGlLayers = generateDeckGLLayersMethod(
@@ -732,6 +732,7 @@ export default function MapContainerFactory(
                 editorMenuActive,
                 onSetFeatures: setFeatures,
                 setSelectedFeature,
+                setPolygonFilterLayer,
                 featureCollection: this.featureCollectionSelector(this.props),
                 selectedFeatureIndexes: this.selectedFeatureIndexArraySelector(
                   editorFeatureSelectedIndex

src/layers/src/editor-layer/editor-layer.ts

@@ -19,6 +19,7 @@ import {EDIT_TYPES} from './constants';
 import {LINE_STYLE, FEATURE_STYLE, EDIT_HANDLE_STYLE} from './feature-styles';
 import {ModifyModeExtended} from './modify-mode-extended';
 import {isDrawingActive} from './editor-layer-utils';
+import Layer from '../base-layer';
 
 const DEFAULT_COMPOSITE_MODE = new CompositeMode([new TranslateMode(), new ModifyModeExtended()]);
 
@@ -33,6 +34,8 @@ export type GetEditorLayerProps = {
     features: Feature[];
   };
   selectedFeatureIndexes: number[];
+  setPolygonFilterLayer?: (layer: Layer, feature: Feature) => any;
+  layers?: Layer[];
 };
 
 /**
@@ -53,7 +56,9 @@ export function getEditorLayer({
   setSelectedFeature,
   featureCollection,
   selectedFeatureIndexes,
-  viewport
+  viewport,
+  setPolygonFilterLayer,
+  layers
 }: GetEditorLayerProps): DeckLayer<DeckLayerProps> {
   const {mode: editorMode} = editor;
 
@@ -97,6 +102,8 @@ export function getEditorLayer({
             lastFeature.id = generateHashId(6);
             onSetFeatures(updatedData.features);
             setSelectedFeature(lastFeature);
+            // @ts-ignore set polygon filter for all layers
+            setPolygonFilterLayer?.(layers, lastFeature);
           }
           break;
         case EDIT_TYPES.ADD_POSITION:

src/reducers/src/layer-utils.ts

@@ -311,6 +311,7 @@ export type ComputeDeckLayersProps = {
       feature: Feature | null,
       selectionContext?: FeatureSelectionContext
     ) => any;
+    setPolygonFilterLayer: (layer: Layer, feature: Feature) => void;
     featureCollection: {
       type: string;
       features: Feature[];
@@ -423,7 +424,8 @@ export function computeDeckLayers(
   if (editorInfo) {
     editorLayer.push(
       getEditorLayer({
-        ...editorInfo
+        ...editorInfo,
+        layers
       })
     );
   }

src/reducers/src/vis-state-updaters.ts

@@ -205,7 +205,7 @@ export const DEFAULT_ANIMATION_CONFIG: AnimationConfig = {
 };
 
 export const DEFAULT_EDITOR: Editor = {
-  mode: EDITOR_MODES.DRAW_POLYGON,
+  mode: EDITOR_MODES.DRAW_RECTANGLE,
   features: [],
   selectedFeature: null,
   visible: true
@@ -2583,7 +2583,8 @@ export const setSelectedFeatureUpdater = (
   {feature, selectionContext}: VisStateActions.SetSelectedFeatureUpdaterAction
 ): VisState => {
   // add bbox for polygon filter to speed up filtering
-   if (feature && feature.properties) feature.properties.bbox = bbox(feature);
+  if (feature && feature.properties) feature.properties.bbox = bbox(feature);
+
   return {
     ...state,
     editor: {
@@ -2644,6 +2645,10 @@ export function setPolygonFilterLayerUpdater(
   const {layer, feature} = payload;
   const filterId = getFilterIdInFeature(feature);
 
+  // for applying polygon filter on multiple layers at once
+  const layers = Array.isArray(layer) ? layer : [layer];
+  let newLayerIds: string[] = [];
+
   // let newFilter = null;
   let filterIdx;
   let newLayerId = [layer.id];
@@ -2681,6 +2686,9 @@ export function setPolygonFilterLayerUpdater(
       ? // if layer is included, remove it
         layerId.filter(l => l !== layer.id)
       : [...layerId, layer.id];
+
+    // for applying polygon filter on multiple layers at once
+    newLayerIds = layerId.filter(l => !layers.map(l => l.id).includes(l));
   } else {
     // if we haven't create the polygon filter, create it
     const newFilter = generatePolygonFilter([], feature);
@@ -2696,12 +2704,15 @@ export function setPolygonFilterLayerUpdater(
         selectedFeature: newFilter.value
       }
     };
+
+    // for applying polygon filters on multiple layers at once
+    newLayerIds = layers.map(l => l.id);
   }
 
   return setFilterUpdater(newState, {
     idx: filterIdx,
     prop: 'layerId',
-    value: newLayerId
+    value: newLayerIds
   });
 }