Filter map layers using default Select component option

MK13 — Fri, 16 Aug 2024 19:42:30 GMT

Using the Select component, I would like to pre-filter (right after the map loads) map layers based on the default value of the select component. Based on my code below, by the time the default value (serviceType) is retrieved inside UseEffect, await jmv.whenAllJimuLayerViewLoaded() is not ready so the code that filters the layers is not executed. How can I filter maps layers before any selection is made on the Select component, just using the default value?

import { React, type AllWidgetProps } from 'jimu-core' import { type JimuLayerView, JimuMapViewComponent, type JimuMapView } from 'jimu-arcgis' import { Select, Option } from 'jimu-ui' import { useEffect } from 'react' const { useState } = React //{} allow destructuring of this constant const Widget = (props: AllWidgetProps<any>) => { const [jmv, setJmv] = useState<JimuMapView>() const [serviceType, setServiceType] = useState('Residential Trash') const activeViewChangeHandler = (jimumapview: JimuMapView) => { if (jimumapview) { setJmv(jimumapview) } } useEffect(() => { //runs when service type is updated by useState FilterMapLayers(serviceType) }, [serviceType]) const UpdateServiceType = (evt) => { setServiceType(evt.target.value) } const FilterMapLayers = async (serviceTypeString) => { await jmv.whenAllJimuLayerViewLoaded() const jimuLayerViews = jmv.getAllJimuLayerViews() jimuLayerViews.forEach(async (jimuLayerView) => { let whereClause = null const layer = jimuLayerView.layer if (layer.type === 'feature') { if (layer.title === 'OpenMarketSm' || layer.title === 'ExclusionZoneSm' || layer.title === 'LocalContentAreaSm') { whereClause = `ServiceAreaType = '${GetServiceTypeText(serviceTypeString)}'` await FilterLayerView(jimuLayerView, whereClause, props) } else if (layer.title === 'HOAsm' || layer.title === 'MunicipalitySm') { whereClause = GetWhereClauseMuniHOA(serviceTypeString) await FilterLayerView(jimuLayerView, whereClause, props) } } }) } const GetServiceTypeText = (FilterString) => { switch (FilterString) { case 'Residential Trash': return 'Resi Trash' case 'Residential Recycle': return 'Resi Recycling' case 'Residential Yard Waste': return 'Resi Yard Waste' case 'Commercial Trash': return 'Comm. Trash' case 'Commercial Recycle': return 'Comm. Recycling' case 'Industrial Temp': return 'Industrial Temp' case 'Sanitation Services': return 'Sanitation Services' } } const GetWhereClauseMuniHOA = (FilterString) => { switch (FilterString) { case 'Residential Trash': return "SvcBy_ResiTrsh = 'C' or SvcBy_ResiTrsh = 'R'" case 'Residential Recycle': return "SvcBy_ResiRec = 'C' or SvcBy_ResiRec = 'R'" case 'Residential Yard Waste': return "SvcBy_ResiYW = 'C' or SvcBy_ResiYW = 'R'" case 'Commercial Trash': return "SvcBy_CommTrsh = 'C' or SvcBy_CommTrsh = 'R'" case 'Commercial Recycle': return "SvcBy_CommRec = 'C' or SvcBy_CommRec = 'R'" case 'Industrial Temp': return "SvcBy_IndsTemp = 'C' or SvcBy_IndsTemp = 'R'" default: return '' } } async function FilterLayerView (jimuLayerView: JimuLayerView, whereClause: any, props: AllWidgetProps<any>) { let datasource = null if (jimuLayerView.layerDataSourceId) { datasource = await jimuLayerView.createLayerDataSource() } if (datasource) { datasource.updateQueryParams({ where: whereClause }, props.widgetId) } } return ( <div> <Select aria-label="Name" value = {serviceType} onChange={UpdateServiceType}> <Option value = "Residential Trash">Residential Trash </Option> <Option value = "Residential Recycle">Residential Recycle </Option> <Option value = "Residential Yard Waste">Residential Yard Waste </Option> <Option value = "Commercial Trash">Commercial Trash </Option> <Option value = "Commercial Recycle">Commercial Recycle </Option> <Option value = "Industrial Temp">Industrial Temp </Option> <Option value = "Sanitation Services">Sanitation Services </Option> </Select> <div> {props.useMapWidgetIds && props.useMapWidgetIds.length === 1 && (<JimuMapViewComponent useMapWidgetId={props.useMapWidgetIds?.[0]} onActiveViewChange={activeViewChangeHandler}/>)} </div> </div> ) } export default Widget //activeViewChangeHandler is called once when the map is ready // {/* ?. checks if object is null */}

@QunSun

Re: Filter map layers using default Select component option

MK13 — Thu, 22 Aug 2024 02:43:05 GMT

@QunSun

topic Filter map layers using default Select component option in ArcGIS Experience Builder Questions

Filter map layers using default Select component option

Re: Filter map layers using default Select component option