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. Add a logo Image, if desired.
• 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.

Create a New Dashboard

This example creates a dashboard around a map of 2020 electoral data by county for the state of Illinois with a layer of Democratic vote count bubbles over a choropleth of Democratic percent.

• On your portal Content page, Create app with Experience Builder.
• The Blank grid template is very flexible and allows you to arrange items freely while maintaining alignment of widgets on a grid.
• Rename the app with a meaningful name.

Main Map

Dashboards are commonly built around a single main map.

1. Add a Map widget, Select map, and Add new data with the map you will use for this app.
2. Add a Layer selector tool if you have multiple layers.
3. Add a Legend so users can understand the meaning of the symbols.

Rank Order Charts

For quantitative data, you can use Chart widgets of type Column chart to create rank-order charts (Percent_Dem_2020).

Proportion Column Chart

For categorical data, you can use Chart widget of type Column chart to show proportions of values in different categories (Winner_2020).

X-Y Scatter Charts

X-Y scatter charts show relationships between two variables plotted on the two axes.

Filter Widget

You can use a Filter widget to selectively display features depending on the values of a categorical variable (Winner_2020).

Actions

Actions in Experience Builder cause changes in one widget to trigger changes to other widgets. One common action is changing the displayed values in charts based on the change of extent (zooming) in the main map.

Make sure to Save before adding actions because actions can cause the app to lock up, especially with large numbers of features.

Configure the map widget Action for Extent changes, select the Framework, and Filter data records.

Header

Headers are commonly used to display the title and branding for the dashboard.

• Under the Page configuration, add a Header.
• Click the header and select a Template.
• Add the Text (2020 Electoral Dashboard).
• Resize the text box in Style as needed.
• Remove the Menu since this is a single map app.

• Add a branding logo Image, if desired.

Finalize the Dashboard

• Lock layout
• Save, and Preview.
• Test in Mobile view.
• Publish the app.
• Change share settings as appropriate.
• Copy published item link

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 Image, 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).