topic Re: Filter hard coded feature layer in React in ArcGIS JavaScript Maps SDK Questions

Filter hard coded feature layer in React

MK13 — Sat, 27 Jul 2024 00:46:14 GMT

I am new to custom widget development for experience builder and Javascript. I would like to filter a hard coded feature layer based on a field. I have studied the code at https://developers.arcgis.com/experience-builder/sample-code/widgets/filter-feature-layer/ but it's relying on a feature layer set by the user. In my case, I am not getting any input from the user. I would like to filter the feature layer after it's added to the map on the click of a button.

@JoelBennett @UndralBatsukh @ReneRubalcava @SageWall @LaurenBoyd @JeffreyThompson2 @AndyGup

@AnneFitz @Noah-Sager @MatthewDriscoll

Re: Filter hard coded feature layer in React

UndralBatsukh — Tue, 06 Aug 2024 16:25:34 GMT

This sample shows what you want to do: https://developers.arcgis.com/javascript/latest/sample-code/featurefilter-attributes/ Please look through our samples.

Here is a sample codepen showing how to filter features based on attributes values from a button click: https://codepen.io/U_B_U/pen/RwzgMBG?editors=100

Re: Filter hard coded feature layer in React

MK13 — Tue, 06 Aug 2024 20:02:51 GMT

@UndralBatsukh please see my code below. I am unsure of how to create a view from the feature layer in experience builder/React. The filter method does not exist on the feature layer so the code below wouldn't work.

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' const { useState } = React //{} allow destructuring of this constant const Widget = (props: AllWidgetProps<any>) => { const omLyr = new FeatureLayer({ url: 'https://services5.arcgis.com/M4Fx5dTKFkYlecLTsdsdsd/arcgis/rest/services/OpenMarketSm/FeatureServer' }) const [jmv, setJmv] = useState<JimuMapView>() const activeViewChangeHandler = (jimumapview: JimuMapView) => { if (jimumapview) { setJmv(jimumapview) } } const addLayerHandler = (evt) => { evt.preventDefault() jmv.view.map.add(omLyr) } const filterLayerHandler = (evt) => { evt.preventDefault() omLyr.filter = { where: "ServiceAreaType ='Comm. Recycling'" } } return ( <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 </button> </form> <form onSubmit={filterLayerHandler}> <button className='btn btn-primary'> Filter Layer </button> </form> </div> ) } export default Widget //activeViewChangeHandler is called once when the map is ready // {/* ?. checks if object is null */}

Re: Filter hard coded feature layer in React

UndralBatsukh — Tue, 06 Aug 2024 21:21:41 GMT

It is already in the sample. You have to wait for MapView.whenLayerView to resolve after you add the layer in your addLayerHandler function.

Re: Filter hard coded feature layer in React

MK13 — Tue, 06 Aug 2024 22:02:07 GMT

That worked. Thanks. I had to retrieve the view from the jimumapview and then set the whenLayerView.