Open the experience

You’ll start by opening the experience that was created in the earlier tutorial.

  1. If you completed the previous tutorial, Make a web experience with two maps, reopen your American River Marine Estuary experience and skip to the next section.
    Note:

    If you don’t know how to find the experience, open ArcGIS Experience Builder and sign in with your ArcGIS account. Your experience will be listed on the Recent experiences page.

  2. If you did not complete the previous tutorial, open ArcGIS Experience Builder and sign in with your ArcGIS account.
    Note:

    If you don't have an ArcGIS account, see options for software access.

    The Recent experiences page appears.

  3. Click the Create new button.

    Create new button

  4. Click the ArcGIS Online tab.

    ArcGIS Online tab

  5. In the search bar, type estuary tutorial template 1.
  6. On the American River Marine Estuary Tutorial Template 1 card, click the Create button.

    Create button on the American River Marine Estuary template card

    The canvas appears, showing the experience created so far. It includes a map widget with two maps that you can switch between, as well as a header with a title.

    Full view of the experience template

  7. On the builder toolbar, click the title and rename it American River Marine Estuary.

    Experience title

Add a legend and a column widget

Not all maps need legends. For example, if everything visible on the map is labeled, or otherwise obvious, a legend is redundant. However, the two maps in this web app do require legends. You’ll add them to the layout with a legend widget so users can properly interpret the map. You’ll also add another layout widget, in this case, a column.

  1. If the Insert widget pane is not visible, on the toolbar, click the Insert button.
  2. In the Insert widget pane, from the Map centric section, drag the Legend widget onto the blank part of the row widget.

    Legend widget dragged from the Insert widget pane to the canvas

    The new widget fills the entire space, leaving no room for more widgets. You had hoped to stack a few widgets vertically in this space. To do so, you must first add a column widget.

  3. On the toolbar, click the Undo button.

    Undo button

  4. In the Insert widget pane, click the Search button. Type column.

    Search button and search bar

  5. From the pane, drag the Column widget onto the blank part of the row widget.

    Columns allow you to organize content vertically.

  6. In the Insert widget pane, clear the search bar. Drag the Legend widget onto the column.

    Legend widget dragged to the column

    The legend widget no longer takes up the entire space.

  7. In the Legend pane, for Select a Map widget, choose Map.

    Select a Map widget set to Map

    The widget populates with the legend that corresponds to the current map.

    Legend for the Cover type map

  8. On the builder toolbar, click Live view so you can interact with the map and other widgets.
  9. In the lower-left corner of the map, click the switch map button.

    Switch map button

    The legend updates to show the legend for the other map.

    Legend for the Tidal class map

  10. In the lower-left corner of the map, click the switch map button to return to the Cover Type map.

Add a bookmark widget

Next, you’ll add some greater interactivity to the web app with a bookmark widget. This widget will allow users to zoom to each cover type on the maps.

  1. On the builder toolbar, turn off Live view.

    You can’t add widgets when you are in live view.

  2. On the side toolbar, click the Insert button to reopen the Insert widget pane.
  3. Search for bookmark. Drag the Bookmark widget onto the canvas and drop it in the column below the legend.

    Bookmark widget

  4. In the Bookmark pane, for Select a template, under Simple, choose the fourth option, Slide 1 (point to templates to view their names).

    Slide 1 template

  5. Click Start.
  6. For Select a Map widget, choose Map.

    Next, you have the option to add bookmarks. You can manually define bookmarks for any part of the map. However, both of your maps already have a set of bookmarks defined, so you’ll use those.

  7. Check the Display bookmarks from web map check box.

    Display bookmarks from web map checked

    The bookmark widget populates with the first bookmark, Seagrass.

    Seagrass bookmark

    You’ll change the Arrangement settings so users can scroll through the bookmarks.

  8. In the Bookmark pane, expand the Arrangement section.
  9. For Paging style, choose Scroll. For Direction, choose Down.

    Arrows appear on the widget.

    Arrows on the bookmark widget

  10. For Item height(px), type 200.

    Item height set to 200 pixels

    Next, you’ll change the background color of the widget so it is white like the legend. Consistency is an important aspect of good layout design.

  11. At the top of the pane, click the Style tab.
  12. Next to Background, click the Quick Style button.

    Quick style button

    White is not one of the options in the Quick Style menu.

  13. Click Custom.

    More style options appear in the Background section.

  14. Click the Fill color button. Under Standard colors, click the white box.

    Fill color set to white

    The background of the bookmark widget now matches the legend widget.

    Bookmark widget with a white background

    Next, you’ll test the bookmark widget.

  15. Turn on Live view.
  16. Scroll through the bookmark widget and click one of the bookmarks.

    The map zooms to the bookmark’s location.

    Sand bookmark

    The web maps were configured with the same set of bookmarks, allowing the widget to work the same way for both maps. If only one of the maps had bookmarks, the widget would appear empty when the other map is selected.

    Note:

    You can learn how to configure bookmarks in a web map in the documentation.

Add a swipe widget

Currently, users can switch between the two maps. However, you want them to be able to view both maps at once, so they can better understand what each land cover type looks like on the ground. You’ll add a swipe widget to make this possible.

  1. Turn off Live view.
  2. On the side toolbar, click the Insert button. In the Insert widget pane, search for swipe.
    Note:

    The swipe tool is available in ArcGIS Enterprise 11.2 or newer. If you are using an older version of ArcGIS Enterprise, you can skip ahead to the next section.

  3. Drag the Swipe widget onto the canvas and drop it on the column, above the legend.

    Swipe widget dragged to the top of the column

  1. In the Swipe pane, click the Content tab. For Select a template, ensure that Horizontal Simple is selected.

    Horizontal Simple template

  2. Click Start.
  3. For Select a Map widget, choose Map.

    On the canvas, the swipe widget populates with a toggle button and two expandable sections.

    Swipe widget

    You want users to be able to swipe between the two maps rather than map layers.

  4. In the Swipe pane, for Swipe mode, choose Swipe between web maps or web scenes.
  5. Under General settings, for Slider initial position, type 50.

    Swipe mode and slider initial position

    This will place the slider bar in the middle of the widget. You’re now ready to test the swipe widget.

  6. Turn on Live view. On the swipe widget, click the Swipe toggle button.

    Swipe toggle button turned on

  7. Zoom and pan on the map and move the swipe bar to test the feature.

    Map widget with swipe enabled

    The two maps move in sync, allowing you to explore both of them at the same time. The legend updates to show whichever map was last clicked.

    Note:

    If you want to change which web map is on the left or right side of the map widget, in the Swipe pane, under Customize settings, click Reverse.

Adjust widget height settings

Next, you’ll adjust the height of each widget in the column. There are three methods for determining the size of a widget: auto, stretch, and custom. You’ll use a different method for each widget.

  1. Turn off Live view. Click the swipe widget to select it.
    Note:

    If you do not have a swipe widget, skip to step 4.

    The swipe widget takes up more space than is necessary. It also shows more information than is necessary. An important part of layout design is deciding what needs to be included and what does not. Eliminating anything that does not need to be included makes your layout clearer and easier for your audience to understand. You’ll shorten the height of the swipe widget so only the toggle button is visible and the map names are hidden.

  2. In the Swipe pane, click the Style tab. Next to Height, click the arrow button.

    Height methods

    There are three height options:

    • Auto ensures that the widget is tall enough to accommodate its contents, but no taller.
    • Stretch adjusts the height of the widget so it fills the available space within its container.
    • Custom allows you to define a height, by pixels or by a percentage of the container’s height.

    You want to hide part of the swipe widget by shortening it. The only height option that will allow a widget to be shorter than its contents is Custom. This option is already selected.

    You can adjust custom heights either by typing a number or dragging the widget.

  3. On the canvas, click the handle at the bottom of the widget and drag up to shorten the height of the widget. Drag until the map names are hidden and only the word Swipe and the toggle button are visible.

    Drag handle on the bottom of the Swipe widget

    In the Swipe pane, the Height parameter updates to approximately 50 pixels. Next, you’ll set the height of the legend widget.

  4. Click the legend widget.

    The height of this widget needs to change as the user switches between the two maps because one of the legends is taller than the other.

  5. In the Legend pane, on the Style tab, for Height, choose Auto.

    Height set to Auto

    Note:

    If Height is already set to Auto, ensure that the Keep aspect ratio button is unlocked.

    The Legend pane shortens so it is just tall enough to show the entire legend.

  6. Click the bookmark widget. In the Bookmark pane, for Height, choose Stretch.

    The bookmark widget stretches to fill the remaining height of the column.

    Bookmark widget stretched to fill the available space in the column

  7. Turn on Live view.
  8. Click between the two maps and observe how the widgets in the column change.

    The column widget with either map selected

    The swipe widget uses the Custom height method, so it does not change: it always keeps the same height. The legend widget uses the Auto method, so it changes height depending on how tall the active legend is. The bookmark widget uses the Stretch method, so it changes height depending on how much space is available in the column.

Review the outline

When designing a layout in ArcGIS Experience Builder, check the Outline section frequently so you understand how widgets are arranged and nested. Since you just added five widgets, now is a good time to review the outline and ensure that your experience is structured the way you intended.

  1. In the Page pane, in the Outline section, ensure that Body, Row, and Column are all expanded.
    Tip:

    If the Page pane isn’t open, on the side toolbar, click the Page button.

    Outline section

    The Outline section lists all of the widgets present in the page and explains how they are nested within one another. This page consists of a Row widget. Inside the row is a Column widget and a Map widget. Inside the column are three widgets: Swipe, Legend, and Bookmark.

    You can also use the Outline section to select widgets and modify their properties.

  2. In the Outline section, click Row.

    Row selected in the Outline section

    The Row pane appears.

  3. In the Row pane, click the Content tab.
  4. For both Gap and Padding, type 0.

    Gap and Padding both set to 0

    On the canvas, the gray gap between the column and the map disappears. So does the gray margin surrounding everything except for the header.

    Full view of the experience created so far

    The extra padding and gap were not necessary to your layout. Removing them simplified the design by removing extra visual clutter. Without any remaining empty parts of the row widget visible, you won’t be able to select the row on the canvas anymore, but you can still select it in the Outline section.

  5. On the builder toolbar, turn off Live view and click the Save button.

In this tutorial, you added five widgets to a web app in ArcGIS Experience Builder. You learned about layout widgets, sizing methods, and the Outline section. Try the next tutorial in this series, Add a window to a web app, to learn how to add a window and a button and how to link them together.