Add/Remove Layers or Show/Hide Layer with javascript (Experience Builder Developer)

JasonBOCQUET

Hello community.

I'm looking to use some javascript script to improve my experience builder application.

 

I want to create a button to Add layers from one of my Feature Layers service and it works :

const { useState } = React

const Widget = (props: AllWidgetProps<any>) => {
  const [jimuMapView, setJimuMapView] = useState<JimuMapView>()

  const activeViewChangeHandler = (jmv: JimuMapView) => {
    if (jmv) {
      setJimuMapView(jmv)
    }
  }

const formSubmit = (evt) => {
    evt.preventDefault()
    const layer = new FeatureLayer({
      url: 'MYURL'
    })
    jimuMapView.view.map.add(layer)
  }

return (
    <div className="widget-starter jimu-widget">
      {
        props.useMapWidgetIds &&
        props.useMapWidgetIds.length === 1 && (
          <JimuMapViewComponent
            useMapWidgetId={props.useMapWidgetIds?.[0]}
            onActiveViewChange={activeViewChangeHandler}
          />
        )
      }

      <form onSubmit={formSubmit}>
        <div>
          <button>Add Layer</button>
        </div>
      </form>

 

I repeat the "formSubmit" const each time I need to create multiple button depending of which layer I want to add on a Map.

But now, I want to allow my users to REMOVE the layers that it was added to the map.

So I try this :

const formSubmit3 = (evt) => {
    evt.preventDefault()

    jimuMapView.view.map.remove(layer)
  }

with the same code on the return part to create my button "Remove". But it doesn't work.

I think i don't get one thing of how to use the remove function. I need to use another function to call my previous layers ?

 

And my second question is : Rather than add/remove Feature Layers, which function can I use to Show/Hide layers from a list of layers ?

 

Thanks if anyone can help me !

Jeff.Thompson@arlingtontx.gov_arlingtontx

As a rule, I try to not to actually write code for other people, so they can better see how to fix their own problems in the future, but it will be difficult to explain this without coding it all out.

You actually have two problems. The issue with State mentioned above and also your references to layer are scope-bound to the functions they are defined in. (Google "scope javascript" if that didn't make sense, scope is a very important general programming concept.)

The following modifications should create an on and off button for your layer.

import { React, AllWidgetProps } from 'jimu-core'
import { JimuMapViewComponent, JimuMapView } from 'jimu-arcgis'
import FeatureLayer from 'esri/layers/FeatureLayer'

const { useState } = React

const Widget = (props: AllWidgetProps<any>) => {
  const [jimuMapView, setJimuMapView] = useState<JimuMapView>()
  // Creates a reference to layer saved to State
  const [layer, setLayer] = useState(null)

  const activeViewChangeHandler = (jmv: JimuMapView) => {
    if (jmv) {
      setJimuMapView(jmv)
    }
  }

  const formSubmit = (evt) => {
    evt.preventDefault()
    //Renamed constant to prevent any naming conflict
    const item = new FeatureLayer({
      url: 'URL1',
      //If you want this layer to not appear in the Layer List on load, add this. (Notice: comma above.)
      listMode: 'hide'
    })
    //Adds layer to the map.
    jimuMapView.view.map.add(item)
    //Saves the reference to the layer to State.
    setLayer(item)
  }
  
const formSubmit3 = (evt) => {
    evt.preventDefault()
    //Removes the layer from the map.
    jimuMapView.view.map.remove(layer)
    //Cleans out the reference from State so widget can be reused.
    setLayer(null)
  }
  
  
  return (
    <div className="widget-starter jimu-widget">
      {
        props.useMapWidgetIds &&
        props.useMapWidgetIds.length === 1 && (
          <JimuMapViewComponent
            useMapWidgetId={props.useMapWidgetIds?.[0]}
            onActiveViewChange={activeViewChangeHandler}
          />
        )
      }

      <form onSubmit={formSubmit}>
        <div>
          <button>Add Layer</button>
        </div>
      </form>
	 
	   <form onSubmit={formSubmit3}>
        <div>
          <button>Delete</button>
        </div>
      </form> 
	  
    </div>
  )
}

export default Widget

You can modify the layer properties on load as in the code above. Or change the properties later with layer.listMode = 'hide'.