Filter feature layer in map

190
0
08-06-2024 01:14 PM
MK13
by
Frequent Contributor

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. 

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()
    //filter layer. Property 'filter' does not exist on type 'FeatureLayer'
    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  */}
0 Kudos
0 Replies