topic Re: Layer filter is removed when popup opens in ArcGIS Experience Builder Questions

Layer filter is removed when popup opens

MK13 — Thu, 15 Aug 2024 15:36:46 GMT

I am running the code below in a custom experience builder widget. It is supposed to filter multiple layers in the map. The filter works as expected but as soon as I click on a feature in the map and the pop up opens, the filter is cleared from all the layers. I expect the filter to be maintained on the layers until I remove it on the click of another button. What could be causing this behaviour?

import { React, type SqlQueryParams, type AllWidgetProps, DataSourceManager, type FeatureLayerDataSource } from 'jimu-core' import { JimuMapViewComponent, type JimuMapView } from 'jimu-arcgis' import FeatureLayer from 'esri/layers/FeatureLayer' import { Select, Option } from 'jimu-ui' import { FeatureLayerDataSourceImpl } from 'jimu-core/data-source' import { FeatureLayerDataSourceManager } from 'dist/widgets/common/chart/src/runtime/chart/data-source' const { useState } = React //{} allow destructuring of this constant const Widget = (props: AllWidgetProps<any>) => { const [jmv, setJmv] = useState<JimuMapView>() const activeViewChangeHandler = (jimumapview: JimuMapView) => { if (jimumapview) { setJmv(jimumapview) } } const addLayerHandler = (evt) => { evt.preventDefault() //filter all layer views jmv.view.map.layers.forEach((lyr) => { if (lyr.type === 'feature' && (lyr.title === 'OpenMarketSm' || lyr.title === 'ExclusionZoneSm' || lyr.title === 'ExclusionZoneSm')) { let featLyrView = null jmv.view.whenLayerView(lyr).then((lyrview) => { featLyrView = lyrview featLyrView.filter = { where: "ServiceAreaType ='Comm. Recycling'" } }) } }) } return ( <div> <div>Add Layers to a Map</div> <div> {props.useMapWidgetIds && props.useMapWidgetIds.length === 1 && (<JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={activeViewChangeHandler}/>)} </div> <form onSubmit={addLayerHandler}> <button className='btn btn-primary'> Add Layer to map </button> </form> </div> ) } export default Widget //activeViewChangeHandler is called once when the map is ready // {/* ?. checks if object is null */}

@TonghuiMing

Re: Layer filter is removed when popup opens

UbaidGul_opaz — Thu, 15 Aug 2024 10:11:10 GMT

I am not sure why you getting this behavior but I would suggest you two things which might help I think.
1- you are using onSubmit on the form it might be reloading the page try to use onClick of button and check again.
2- You can alternatively use the definition expression of layer and update it what ever you want which might not refresh onSubmit.

Re: Layer filter is removed when popup opens

MK13 — Thu, 15 Aug 2024 15:35:27 GMT

Thanks for the suggestions. I removed the Form code and added my addLayerHandler method on the OnClick of a button but I see the same behaviour. The filters are cleared when the pop up opens.

<button className='btn btn-primary' onClick={addLayerHandler}> Add Layer to map </button>

I also looked at the documentation at https://developers.arcgis.com/javascript/latest/api-reference/esri-views-layers-FeatureLayerView.html and there is no definitionExpression property on the FeatureLayerView.

Re: Layer filter is removed when popup opens

MK13 — Thu, 15 Aug 2024 17:31:11 GMT

Re: Layer filter is removed when popup opens

MK13 — Thu, 15 Aug 2024 17:29:16 GMT

I suspect that this piece of code below is what's causing the refresh because of the useState which is supposed to re-render the component when the state changes but I am new to React and Javascript and don't really know if that's what's happening here.

const [jmv, setJmv] = useState<JimuMapView>() const activeViewChangeHandler = (jimumapview: JimuMapView) => { if (jimumapview) { setJmv(jimumapview) } }

Re: Layer filter is removed when popup opens

QunSun — Fri, 16 Aug 2024 09:16:55 GMT

Hi @MK13 ,

When you click map, data source selection will change. JimuLayerView will automatically update layer.filter by data source. So JimuLayerView overrides your layer.filter.

You can update 'where' by dataSource.updateQueryParams() method, Here is the solution, please have a try.

async addLayerHandler (evt) { evt.preventDefault() await jmv.whenAllJimuLayerViewLoaded() const jimuLayerViews = jmv.getAllJimuLayerViews() jimuLayerViews.forEach(async (jimuLayerView) => { const layer = jimuLayerView.layer if (layer.type === 'feature' && (layer.title === 'OpenMarketSm' || layer.title === 'ExclusionZoneSm' || layer.title === 'ExclusionZoneSm')) { let dataSource = null if (jimuLayerView.layerDataSourceId) { dataSource = await jimuLayerView.createLayerDataSource() } if (dataSource) { dataSource.updateQueryParams({ where: "ServiceAreaType ='Comm. Recycling'" }, props.widgetId) } } }) }