Legend widget

This sample demonstrates how to include a widget from the ArcGIS API for JavaScript.

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

In manifest.json, the dependencies are loaded using the dependency property.

"dependency": "jimu-arcgis",

Then in widget.tsx, it imports the required modules to leverage the Legend widget and LegendViewModel from the ArcGIS API for JavaScript.

import Legend from "esri/widgets/Legend";
import LegendVM from "esri/widgets/Legend/LegendViewModel";

Create an interface State to define the specifications for the layerInfo property.

interface State{
  layerInfo: any
}

Extend the React.PureComponent class and use the AllWidgetProps type and implement the State interface. The legendWidget property is used for the Legend widget so it can be referenced throughout the widget.

export default class Widget extends React.PureComponent<AllWidgetProps<{}>, State>{
  apiWidgetContainer: React.RefObject<HTMLDivElement>;
  legendWidget: Legend;

// the class constructor assigns the initial this.state and this.apiWidgetContainer to get references to the DOM nodes.
  constructor(props){
    super(props);
    this.state = { layerInfo: null }
    this.apiWidgetContainer = React.createRef();
  }
}

The onActiveViewChange method gets called when the map view changes, and creates the Legend widget and passes the properties into the new Legend constructor. It also creates the Legend view model and updates the UI by calling setState.

onActiveViewChange = (jimuMapView: JimuMapView) => {
  if (!(jimuMapView && jimuMapView.view)) {
    return;
  }

  if (!this.legendWidget && this.apiWidgetContainer.current) {
    this.legendWidget = new Legend({
      view: jimuMapView.view,
      container: this.apiWidgetContainer.current
    });

    const vm = new LegendVM({
      view: jimuMapView.view,
    });

    this.setState({
      layerInfo: vm.activeLayerInfos.getItemAt(0)
    });
  }
}

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

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close