Home / Tutorials

ArcGIS Experience Builder

ArcGIS Experience Builder is a web app available through ArcGIS Online or Portal for ArcGIS that can be used to build interactive web applications based on geospatial data without writing code.

Widgets are elements like maps, charts, or controls that are added to an Experience Builder app to display information in a specific format or add interactivity to the user experience.

This tutorial will cover creation of five different types of apps you can create with Experience Builder.

• Simple Maps
• Details Pane
• Swipe Map
• Dashboard
• Map Tour
• Hierarchical Maps

Simple Maps

While the Map Viewer provides great flexibility for working with geospatial data, it may be overwhelming for many users, especially if they have no GIS background.

Experience Builder can be used to create simplified map viewing interfaces that focus the viewer on a specific variable or set of variables.

1. Create the map.
• Add the layer (Minn 2015-2019 ACS Counties).
• Symbolize for the appropriate variable (Median Household Income).
• Customize the popups.
• Save and share with Everyone.
2. Create a new Experience Builder app with the Blank fullscreen template.
3. Add the Map widget.
• Select map and Add new data with the map containing the layers.
• Style to 100% width and height.
• Assign Tools as desired (Basemap)
4. Select the Page and add a Header.
• Click the header and select a Template.
• Add the title Text (Median Household Income).
• Resize the text box in Style as needed.
• Remove the Menu since this is a single map app.

5. Upload a logo Image.
• Position the logo to Fit.
• Style the logo Height.
• Turn off the Background color.
6. Select the Page and add a Footer with source information.
7. Switch to Live View to test in Desktop, Tablet and Mobile view.
8. Rename, Save and Publish the app.

Group Layers

When presenting the same variable at different scales of aggregation, group layers with scale-dependent visibility can be useful.

1. Add the layers and symbolize by the desired variable.
2. In the Layers pane, right-click and Group.
3. Give the group a meaningful name (2015-2019 ACS Income).
4. Drag the other layers into the group.
5. Adjust the visibility between the layers.
• State: World to 1:20,000,000
• County: 1:20,000,000 to 1:2,000,000
• Tract: 1:2,000,000 to 1:1
6. Save the map and add the map to the Experience Builder app.

Exclusive Visibility

With multi-layer choropleth maps, you want the user to only display one layer at a time to avoid visual conflict.

Exclusive visibility layer grouping permits the user to only select one layer at a time in map layer controls for layer viewing.

1. Add the layer (Minn 2015-2019 ACS Counties).
2. Customize the pop-up to limit display to the featured variables (1:10).
3. Duplicate, rename, and restyle the individual layers (3:30).
4. Group the layers (6:35)
5. Under the group Properties, select Exclusive visibility (7:20).
6. When you add the map to Experience Builder, the Layers control will change to toggle layers (9:30).

Details Pane

A details pane is a side panel that provides detailed information on features selected on the map.

While feature details are often provided in pop-up windows, a layout with a separate pane for details can be easier to read and navigate when there is a significant amount of attribute information or the attribute names will be incomprehensible to the audience.

An example use of this type of map are county parcel viewers.

Feature Info

For features with a limited number of attributes and/or attachments, the Feature Info widget can be used.

1. Create a new Experience Builder app with the Blank grid template.
2. Add the Map widget.
• Select map and Add new data with the map containing the layers.
• Turn off the map pop-ups to avoid conflicting interaction.
3. Add the Feature Info widget.
• Select map for the data with Selected features.
• Change the no data message if desired.
4. Select the Page and add the Header and / or Footer as desired.
5. Switch to Live View to test in Desktop, Tablet and Mobile view.
6. Rename, Save and Publish the app.

Table Widget

To display all attributes in a table, a Table widget can be placed on the bottom.

1. Create a new Experience Builder app with the Blank grid template.
2. Add the Map widget.
• Select map and Add new data with the map containing the layers.
• Turn off Enable pop-up to avoid conflicting interactions.
3. Add the Table widget.
• Select a New sheet from the map layer.
• Change the table label to something meaningful (County Data).
• Configure for selected fields if desired.
• Resize the pane and Lock layout.
4. If you wish to filter the table based on the map zoom (extent change):
• Under the map Action, Add a trigger.
• Select Extent changes, select the Framework, and Filter data records.
• For Action data, select the map layer.
5. If you also wish to filter the table based on selected features:
• Under the map Action, Add a trigger.
• Select Record selection changes, select the Framework, and Filter data records.
• For Action data and Trigger data, select the map layer.
6. Select the Page and add a Header if desired.
7. Switch to Live View to test in Desktop, Tablet and Mobile view.
8. Rename, Save and Publish the app.

List Widget

For features with large numbers of confusing attributes, customized List widgets can focus the viewer on specific characteristics.

1. Create a new Experience Builder app with the Blank grid template.
2. Add the Map widget.
• Select map and Add new data with the map containing the layers.
3. Add the List widget.
• Select data and New data with the layer.
• Change to Selected features.
• Deselect the lock to be able to edit the entry sizes.
• Remove the icon and resize the text area.
• Add the text and fields.
• Change the No data text if desired.
4. Select the Page and add the Header and Footer.
• Click the header and select a Template.
• Add the title Text (2015 - 2019 American Community Survey).
• Resize the text box in Style as needed.
• Remove the Menu since this is a single map app.

• Add a logo Image if desired.
5. Switch to Live View to test in Desktop, Tablet and Mobile view.
6. Rename, Save and Publish the app.

Swipe Map

Swipe maps feature two maps of the same area that pan and zoom together and are separated by a movable slider.

Swipe maps are especially useful for comparing the geographic distribution of two separate phenomenon, or comparing changes over time.

This example shows creation of a swipe map that allows comparison of the current aerial imagery of Chicago's Jackson Park with a historic map of the area when it was home to the World's Columbian Exposition of 1893, commonly referred to as the 1893 Chicago World's Fair. The map was created by cartographer George Cram and published in a commemorative atlas of the fair. The scanned map was sourced from the David Rumsey Map Collection, and georeferencing of the map is described in this tutorial on Georeferencing and Digitizing Map Images in ArcGIS Pro.

1. On your portal Content page, Create app with Experience Builder.
2. Start with a Blank fullscreen template.
3. Add the Map widget.
• Select map and Add new data with the map containing the layers.
• Style to 100% width and height.
• Assign Tools as desired (Basemap)
4. Select the Page and add a Header.
• Click the header and select a Template.
• Add the Text (World's Columbian Exposition of 1893).
• Resize the text box in Style as needed.
• Remove the Menu since this is a single map app.

5. Upload a logo Image.
• Position the logo to Fit.
• Style the logo Height.
• Turn off the Background color.
6. Select the Map and add the Swipe widget.
• Select a template (Simple) and Start.
• Select a Map widget with the map.
• Style the Width (40%) and Height (25%).
• Snap to bottom and Snap to right.
• Customize settings to Select leading layers and Select trailing layers.
7. Switch to Live View to test in Desktop, Tablet and Mobile view.
8. Rename, Save and Publish the app.

Dashboard

Dashboards are web-based graphical user interfaces that provide an at-a-glance interactive summary of related information (analytics) on a single topic or business process. Dashboards are commonly driven by data sources that are updated in real time. Dashboards can be used to inform decision making (Wikipedia 2021).

This example dashboard was published by John's Hopkins University and became quite popular during the COVID-19 pandemic lockdown.

1. On your portal Content page, Create app with Experience Builder.
2. Start with a Dashboard template.
3. Configure the Map widget.
• Select map and Add new data with the map containing the layers.
• Configure Action for Extent changes, select the Framework, and Filter data records.
4. Add a Chart widget of type Histogram for the main variable (Median Household Income).
5. Add a Chart widget of type X/Y scatter comparing two variables (median household income and percent bachelor's degrees).
6. Add a Chart widget of type Column chart showing median median household income by state.
7. Combine two bottom widgets and add a Table widget.
8. Select the Page and add a Header.
• Click the header and select a Template.
• Add the Text (2015-2019 ACS Median Household Income).
• Resize the text box in Style as needed.
• Remove the Menu since this is a single map app.

• Add a logo image if desired or delete the image.
9. Switch to Live View to test in Desktop, Tablet and Mobile view.
10. Rename, Save and Publish the app.

Map Tour

Map tours are web pages with a fixed position map of locations and a set of widgets that change as you scroll through the page. As the name implies, these types of maps are especially useful for providing a narrative details to accompany a linear progression through the map features.

A map tours can be implemented with screen groups in a scrolling screen. A screen group is a container used to organize scrolling content and widgets.

1. On your portal Content page, Create app with Experience Builder.
• Start with a Blank scrolling template.
2. In the middle of the canvas, press the Insert screen group icon and choose the Flyer template (0:40).
3. View the Page contents and on the Main Stage configure the Map (1:15).
4. In the Scrolling Panel, under each Fixed Panel, configure each Bookmark (1:50).
• Rename the bookmark to the title you wish to display.
• Change the bookmark View to zoom to the appropriate location on the map.
• For Image source, choose Custom and Select an image.
• Add Description text.
5. Click on the last Fixed Panel and under the ellipsis (...) select Duplicate if you need to add more bookmarks.
6. Select the Page and add a Header and / or Footer if desired (8:00).
7. Switch to Live View to test in Desktop, Tablet and Mobile view (9:40).
8. Rename, Save and Publish the app (11:15).

Hierarchical Maps

ArcGIS Experience Builder provides the ability to create hierarchical arrangements of multiple maps.

• You can have multiple pages that you can select with a menu.
• Pages can contain multiple sections on different parts of the page.
• Sections can contain multiple views that you can select using a navigation widget.
• Views contain their own sets of widgets.

An example of is type of app is the CDC's PLACES interactive map, that allows you to view a variety of different health related variables. The groups of variables are on separate pages, and individual variables within each group are selected from different views.

Although you can create multiple layered maps with exclusive visibility and add a layer selector for the user to choose variables, if you want to use the Experience Builder view navigation, you will need to create completely separate portal maps for each map.

For simplicity, this example demonstrates creation of two pages, each containing two different views for a total of four different displayed variables.

1. Create the separate maps.
2. Create a new Experience Builder app with the Blank fullscren template.
3. Select the Page and add the Header and Footer.
• Click the header and select a Template.
• Add the title Text (2015-2019 American Community Survey).
• Add a logo if desired.
• Add a Footer with source information if needed.
4. Add a new Section and Style it to fill 90% of the window height.
5. Add a section Navigation widget above the section.
6. Rename the View, add a Map widget to the View and Style it to fill the View.
7. Select map and Add new data with the map containing the layers.
8. Duplicate and rename the View and replace the map.
9. Duplicate the Page and update the View names and Map sources.
10. Change the Menu style to Pills, position it in the heading, and rename the pages to update the header page menu.
11. Switch to Live View to test in Desktop, Tablet and Mobile view.
12. Rename, Save and Publish the app (Minn 2015-2019 ACS Hierarchical).