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)
});
}
}