Create button navigation for multiple Map widgets in ArcGIS Experience Builder

Summary

In ArcGIS Experience Builder, button navigation can be implemented for a seamless transition between Map widgets within an experience. This approach promotes a minimalist user interface while enabling quick navigation between web maps added via the Map widgets. This article describes the workflow to create a custom button navigation for switching between Map widgets, utilizing two Button widgets linked to two additional pages, each displaying a different web map.

Procedure

1. In ArcGIS Experience Builder, click Create new, select a page layout template, and click Create.
2. Add the Map and Button widgets to the canvas.
   1. In the Insert widget panel, on the New tab, under the Map centric group, drag and drop the Map widget onto the desired position on the canvas. Change the widget style settings accordingly.
   2. Under the Page elements group, drag and drop the Button widget onto the canvas. Change the widget style settings accordingly.
   3. Repeat Step 2(b) depending on the number of buttons required in the experience. In this example, two Button widgets are added to the canvas as button navigation to the second and third Map widgets.

3. Duplicate the page. Each Map widget must be on a specific page.
   1. On the left toolbar, click Page .
   2. On the Page tab, hover the pointer over the page name 'Page', and click More > Duplicate.

3. Repeat Step 3(b). In this example, the page is duplicated twice as Page 2 and Page 3.

4. Rename the page and widget to signify the page designated for each Map widget and the other widget featured in it.
   1. On the Page tab, hover the pointer over the page name, and click More > Rename.
   2. Specify the name of the page, and click outside the name box to finish renaming the page. The image below shows the renamed page.

3. Under Outline, hover the pointer over the widget name, and click More > Rename.
4. Specify the name of the widget, and click outside the name box to finish renaming the widget. The image below shows the renamed widget.

5. On the Page tab, click the first page (Page Web Map 1) to display the first page canvas.
6. Configure the Map widget. In this example, the Map widget is configured to display a web map with a particular extent upon opening.
   1. On the canvas, click the Map widget to open the Map panel.
   2. On the Content tab, under Source, click Select map.
   3. In the Select data pane, click Add new data.
   4. In the Add data window, select the desired web map. Refer to ArcGIS Experience Builder: Select data for more information.
   5. Under Initial view, click Custom > Modify.

6. In the Modify initial view window, zoom and pan the web map to display the desired extent.
7. Click OK.

Note: 
Optionally, in the Map panel, on the Content tab, under Tools, toggle Layers on to display the web map layer list. This allows the control of the web map layer visibility while using the app.

7. Configure the Button widget.
   1. On the Page tab, under Outline, click the first Button widget to open the Button panel.
   2. On the Content tab, click Set link to open the Set link pane.
   3. For Link to, click the drop-down arrow and select Page.

Note: 
The Button widget can also be configured to navigate to a Map widget in a scrolling page. In the Link To drop-down list, select Block; for Jump to, select the block where the map widget is situated.

4. For Select a page, click the drop-down arrow, and select 'Page Web Map 2'.
5. For Open in, ensure App window is selected, and click OK.

6. In the Button panel, on the Content tab, for Tooltip, specify the button label.
7. For Text, delete the default text display.

8. Select the icon for the Button widget. Repeat this step for the other Button widget.
   • Select the available icon in the icon picker pane.
     1. For Icon, click Select icon to open the icon picker pane, and click the icon.
   • Add an image file (custom icon) to the icon picker pane.
     1. For Icon, click Select icon to open the icon picker pane.
     2. Under My icons, click the Add custom icons button.

3. In the Open window, navigate to the custom icon folder and select the icon image file.
4. Click Open.

9. Configure the Map and Button widgets in the second and third pages. Repeat this step for all pages.
   1. On the Page tab, click the second page.
   2. Repeat Steps 6 through 8.

10. Click Save and Publish to publish the project.

The image below shows an experience with button navigation for multiple web maps. Hovering the pointer to the button displays the button label. Clicking it opens the web map on another page linked to the button.