Add functionality to toggle FeatureLayer on/off

150
3
02-21-2024 11:31 AM
MikeSousa
New Contributor II

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

 

0 Kudos
3 Replies
JeffreyThompson2
MVP Regular Contributor

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

GIS Developer
City of Arlington, Texas
0 Kudos
MikeSousa
New Contributor II

 

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

 

0 Kudos
JeffreyThompson2
MVP Regular Contributor

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.

GIS Developer
City of Arlington, Texas
0 Kudos