Add functionality to toggle FeatureLayer on/off

[MikeSousa]

Javascript 1.5, ArcGIS Experience Builder 1.13

Hi

I would like to add functionality (buttons?) to my Javascript (REACT) that allows toggling FeatureLayers on/off.

Snippet of my code

import { React, AllWidgetProps } from "jimu-core";
import { JimuMapView, JimuMapViewComponent } from 'jimu-arcgis'
import FeatureLayer from "@arcgis/core/layers/FeatureLayer";
import Graphic from "@arcgis/core/Graphic";
import { Button, Icon } from 'jimu-ui'; // import ui components
  const { useRef, useState } = React
  export default function Widget (props: AllWidgetProps<any>) {
    const [mapView, setMapView] = useState<JimuMapView>()
    const [mapView, setMapView] = useState<JimuMapView>()
    const fileLayer = useRef<__esri.Layer[]>([])
// Location Points are loaded in fileLayer (there are 3 layers)
// fileLayer is used to to create ringPolys (geometryEngine) which in turn are used to create Graphics (three of them)
            const ringGraphics: Graphic[] = []
            for (let index = 0; index < ringPolys.length; index++) {
              const ringPoly = ringPolys[index];
              const ringGraphic = new Graphic({
                geometry: ringPoly,
                symbol: bufferSymbol,
                attributes: {
                  ObjectId: index,
                  "name": "Graphic" + index
                }
              })
              console.log(ringGraphic)
              ringGraphics.push(ringGraphic)
            }//end for

// Graphics are used to create FeatureLayers (featLayer)
    mapView.view.map.add(featLayer)
    return (
        <div>
        {
          props.useMapWidgetIds &&
          props.useMapWidgetIds.length === 1 && (
            <JimuMapViewComponent
              useMapWidgetId={props.useMapWidgetIds?.[0]}
              onActiveViewChange={(jmv: JimuMapView) => {setMapView(jmv)} }
            />
          )
        }
        </div>
     )

I'm pretty sure that whatever I get working, it's going to reside in the return function. If easier, I'd be ok with toggling the Graphics instead.

Thanks...

[JeffreyThompson2]

This post includes an example of how to add/remove layers within an Experience Builder widget.

https://community.esri.com/t5/experience-builder-tips-and-tricks/react-for-experience-builder-develo...

[MikeSousa]

Thanks Jeffrey

I failed to mention that I had seen this but was still confused as to how to remove/add any 1 of the three layers available (might be more layers in the future).

Thanks...

[JeffreyThompson2]

I'm not fully following your code. It looks like you cut some parts out. But if you have three feature layers, it would be easiest to track them in three separate pieces of state, so they can be toggled as needed.