Add layers

This widget demonstrates how to add a layer to a map programmatically. Step-by-step instructions for building this widget can be found in the ArcGIS for Developers Tutorials.

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, a reference to the Map object is acquired using the JimuMapViewComponent module. That reference is used in the formSubmit function when a FeatureLayer is created based on the layer URL and added to the map via the jimuMapView.

// First create the Feature Layer from the URL that is in the box.
const layer = new this.FeatureLayer({
  url: this.state.featureServiceUrlInput,
});

// Add the layer to the map (accessed through the Experience Builder Data Source)
this.state.jimuMapView.view.map.add(layer);

In this sample, the ArcGIS API for JavaScript modules are loaded asynchronously (also known as "lazy-loading"), via the jimu-arcgis/loadArcGISJSAPIModules module:

// Lazy-loading (only load if/when needed) the ArcGIS API for JavaScript modules
// that we need - only once the "Add Layer" button is pressed.
loadArcGISJSAPIModules([
  "esri/layers/FeatureLayer",
  "esri/geometry/SpatialReference",
]).then((modules) => {
  [this.FeatureLayer, this.SpatialReference] = modules;

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