nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Filter hard coded feature layer in React

MK13

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

Trouver plus de publications taguées avec

Accepted answers

UndralBatsukh

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

All comments

MK13

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

UndralBatsukh

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

MK13

@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  */}

UndralBatsukh

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

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.