topic Re: Add functionality to toggle FeatureLayer on/off in ArcGIS JavaScript Maps SDK Questions

Add functionality to toggle FeatureLayer on/off

MikeSousa — Wed, 21 Feb 2024 19:31:57 GMT

Javascript 1.5, ArcGIS Experience Builder 1.13

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...

Re: Add functionality to toggle FeatureLayer on/off

JeffreyThompson2 — Wed, 21 Feb 2024 19:46:18 GMT

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-developer-edition/ba-p/1346222

Re: Add functionality to toggle FeatureLayer on/off

MikeSousa — Wed, 21 Feb 2024 19:55:05 GMT

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...

Re: Add functionality to toggle FeatureLayer on/off

JeffreyThompson2 — Wed, 21 Feb 2024 20:36:59 GMT

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.