View layers toggle

This widget demonstrates how to create a dropdown toggle to allow viewing different layers on the map.

How to use the sample

Clone the sample repo and copy this widget's folder (within widgets) to the client/your-extensions/widgets folder of your Experience Builder installation.

How it works

Within widget.tsx, in the render() function, the layers are added to the dropdown <select>:

{ => {
  return <option value={url}>{url}</option>;

The onChange handler is setup to call the selectChangeHandler() function when the selected value changes.

A reference to the Map object is acquired using the JimuMapViewComponent module, and that reference is used in the selectChangeHandler() function to add the selected layer to the map:

// Create and add the new Feature Layer
const featureLayer = new FeatureLayer({

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.