Add layers to a map
Overview
You will learn: how to add layers to a map from a custom widget.
The map widget in ArcGIS Experience Builder automatically loads layers based on what web map it is configured to load. Depending on your workflow, you may want a custom widget to dynamically add a layer to the map based on user interaction with the widget.
In this tutorial, you will add a button to the widget to add a feature layer to the map.
Prerequisites
- Be sure to download, install, and configure Experience Builder.
- Complete the create a starter widget tutorial. It forms the base of this tutorial.
Steps
Get the starter widget
Download the Starter Widget template here.
In the ArcGIS Experience Builder folder, extract the zip into the following path: /client/your-extensions/widgets.
Change the widget name
In the terminal where the
npm start
is running in the client folder, stop the script by pressingctrl + c
.In your file browser, go to the folder where Experience Builder was extracted.
In the Experience Builder folder, expand the following path: /client/your-extensions/widgets.
In the widgets folder, rename the starter-widget folder to
add-layers-to-a-map
.In the newly-renamed add-layers-to-a-map folder, open the manifest.json file in the code editor.
In the code editor, modify the
name
property toadd-layers-to-a-map
.Use dark colors for code blocks Copy After the
version
property in manifest.json, add ajimu-arcgis
dependency. Declaring this allows the usage of ArcGIS Maps SDK for JavaScript modules within the widget.Use dark colors for code blocks Copy
Implement the settings panel
A settings panel can be implemented to allow Experience authors to customize the widget. The settings panel appears in the right-hand sidebar when a widget is selected in ArcGIS Experience Builder. To create the panel, create a React component.
In the widget root folder, create a
config.json
file that contains an empty object.Use dark colors for code blocks Copy In the src folder, create another folder called setting.
In the setting folder, create a
setting.tsx
file.Open the setting/setting.tsx file and include the following import statements.
Use dark colors for code blocks Copy Add code to implement the component.
Use dark colors for code blocks Copy In the terminal, stop (
ctrl + c
) (if applicable) and start thenpm start
script in the client folder.
Enable selecting a map view data source
In ArcGIS Experience Builder, there can be more than one Map Widget on the page at a time. Because of this, a custom widget must have a section of its Settings Panel that allows the author to choose which map widget to use.
In the setting/setting.tsx file, include the
Map
module from theWidget Selector jimu
library.Use dark colors for code blocks Copy Within the component, define the
o
function.n M a p Widget Selected Use dark colors for code blocks Copy In the
return()
statement, add a tag representing theMap
.Widget Selector Use dark colors for code blocks Copy
Access the map
In the previous step, the settings panel was enhanced to allow the Map widget to be selected. The map object can be accessed using the Jimu
.
In the widget.tsx file, add the
Jimu
andM a p View Component Jimu
types from theM a p View jimu-arcgis
library, and destructure the React variable to get access to theget
import.State Use dark colors for code blocks Copy
To add the layer to the Map, a reference to the Map must be saved into the component state. Within the component, set up the state using
use
.State() Use dark colors for code blocks Copy In the
return
section, add theJimu
to the JSX markup.M a p View Component Use dark colors for code blocks Copy
Define the
active
function, just below theView Change Handler set
commands. This function will be called once - when the map is ready. In this function, update the jimuMapView state.State Use dark colors for code blocks Copy
Add the button
Add a button to the UI of the widget that when clicked will add the layer to the map.
In the code editor, add
form
andinput
tag elements in the existingdiv
in therender
function.Use dark colors for code blocks Copy Within the component, create a new function called
form
. This function will get called when the user clicks the Add Layer button.Submit Use dark colors for code blocks Copy
Add a layer
When the button is clicked, add the layer to the map.
At the top of
widget.tsx
, import theFeature
class.Layer Use dark colors for code blocks Copy In the
form
function, update the code to create the Trailheads (points) feature layer and add it to the map.Submit Use dark colors for code blocks Copy
Test the widget
Once the code changes have been made, you can test your widget by running Experience Builder and viewing your experience.
In a web browser, go to Experience Builder. e.g. https://localhost:3001
In Experience Builder, click Create New to create a new experience page.
Click the Create button on the Blank scrolling template.
Click the Insert widget button, and drag the new add-layers-to-a-map widget onto the experience.
In the widget settings panel, choose Map from the map selection dropdown.
In the Experience Builder toolbar, click Save then Preview and the experience will open in a new browser tab with your custom widget and a map.
Congratulations, you're done!
In the Experience Builder preview, click the button to add the layer to the map. Compare your widget with our completed widget, and see the top of this page for an example for how the Experience should look.