Make a new experience

In ArcGIS, you can make web apps with ArcGIS Dashboards, ArcGIS Instant Apps, or ArcGIS StoryMaps. For this project, you’ll choose ArcGIS Experience Builder to build your app because it offers the most control and customization over your layout.

Note:

You can learn more about which app builder to use in different situations in the article Which App Builder Do I Choose?

Web apps built with Experience Builder are also called web experiences. You’ll start by creating a new experience with the blank full screen template.

  1. Open ArcGIS Online or your ArcGIS Enterprise portal.
  2. Sign in to your ArcGIS account.
    Note:

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

  3. At the top of the page, next to your username, click the app launcher button.

    App launcher button

  4. Click Experience Builder.

    Experience Builder in the app gallery

    ArcGIS Experience Builder appears in a new tab.

  5. Click the Create new button.

    The Select a template to start page shows a list of templates that you can use to create common layout designs. For this tutorial, you’ll start with a blank template, but you still have to choose a page type: full screen, grid, or scrolling. You’ll choose full screen because it is a good choice for apps where the map is the main focus, and because it gives you the most control and freedom with your layout. It allows you to place widgets on the canvas at any position, even overlapping one another.

  6. On the Blank fullscreen card, click Create.

    Create button on the Blank fullscreen template

    Note:

    If a Getting started window appears, click Skip the tour.

    The canvas appears, where you will build your web app.

  7. On the builder toolbar at the top of the page, click Untitled experience. Erase the existing text and type American River Marine Estuary.

    Experience title

    Beside the canvas, the Insert widget pane is open. This pane lists all of the elements—called widgets—you can add to your layout.

  8. Scroll to the bottom of the Insert widget pane and find the Layout section.

    Layout widgets are containers that allow you to better organize other widgets on the canvas. They make your layout tidy and keep it tidy as the screen size changes. It’s easiest to design a layout by adding and arranging the layout widgets before any others.

  9. From the Insert widget pane, drag the Row widget onto the canvas.

    Row widget dragged from the Insert widget pane to the canvas

  10. On the canvas, on the row widget’s toolbar, click the Align button and click Full size.

    Full size option in the Align menu

    The row widget expands to fill the entire canvas.

Add a map widget with two maps

You already made two maps of the marine estuary, which you now need to feature in the experience. Next, you’ll add a map widget and configure it with the two maps.

  1. In the Insert widget pane, scroll back to the top of the pane and click the Map widget. Drag and drop it onto the canvas, inside the row widget.

    Map widget dragged from the Insert widget pane to the canvas

    A default map appears on the canvas.

  2. Drag the left or right edge of the map widget.

    Dashed vertical lines appear. Row widgets organize content side by side, into twelve equal spaces.

  3. Drag the map’s edges until it fills all but the two leftmost spaces in the row.

    Map widget filling 10 of the 12 spaces in the row

    You’ll leave the left two spaces for a legend and other widgets.

    On the other side of the canvas, the Map pane is visible, showing the properties of the selected widget. Next, you’ll populate the map widget with the two maps that you previously created for this project.

  4. In the Map pane, click Select map.

    Select map button in the Map pane

  5. At the bottom of the Select data pane, click Add new data.
  6. In the Add data window, click the ArcGIS Online tab. In the search bar, type American River owner:Esri_Tutorials.

    ArcGIS Online tab and search bar

  7. In the search results, click the Tidal class and Cover type cards.

    Tidal class and Cover type maps selected

    Check marks appear on the selected maps.

  8. Click Done.

    The two maps are added to the Select data pane.

  9. In the Select data pane, click Cover type and Tidal class.

    Tidal class and Cover type maps added to the Map pane

    The two maps are added to the Map pane. On the canvas, the map widget now shows one of the estuary maps, instead of the default map of the world that it previously displayed. The scale is too small: the estuary appears tiny in the center of the canvas. You’ll change the default extent for the map widget.

  10. In the Map pane, expand Initial view. Click Custom. Click Modify.

    Modify button

  11. In the Modify initial view window, pan and zoom to center the estuary in the view.

    Modify initial view window

  12. Click OK.

    On the canvas, the map zooms to the scale and position you defined.

Review the maps

Next, you’ll review the two maps and test switching between them.

  1. On the builder toolbar, click Live view.

    Live view button

    In live view, you can interact with the canvas as a user would, instead of selecting widgets.

  2. In the lower left corner of the map widget, click the switch map button to show the other map.

    Switch map button

  3. If necessary, click the switch map button again until the Tidal class map (with imagery) is visible.

    Tidal class map

    This map defines the intertidal, supratidal, and stranded tidal areas of the estuary. Estuaries are a kind of wetland. They are coastal water bodies that typically mix fresh water from a river with salt water from a connection to the sea. This mixture provides many nutrients, resulting in a high level of biodiversity.

    This estuary is named American River and is located on Kangaroo Island in South Australia. It is a significant site for shorebirds, seabirds, and fish and includes the Pelican Lagoon Conservation Park. However, it faces threats from increasing development, tourism, and nutrient loading.

    Note:

    You can read more about American River and other marine estuaries on Kangaroo Island in the report Kangaroo Island Natural Resources Management Region: Estuaries Information Package, by the Government of South Australia, Department for Environment and Heritage.

  4. Click the switch map button again to view the Cover type map.

    Cover type map

    This map shows the primary vegetation or sediment type that covers each area of the estuary. You could have included this information on the first map, but it is easier to read in a separate map. The more information you put into a single map, the harder that information is to interpret. Often, the best solution is to make a second map.

  5. Zoom and pan on the map.
  6. In the upper left corner of the map, click the Default map view button.

    Default map view button

    The map returns to the initial view that you configured.

    Note:

    If you can't see the full layout on your screen, in the lower right corner of Experience Builder, click the Fit width to current window button.

    Fit width to current window button

Configure map tools

The Default map view button is an example of a map tool. Next, you’ll configure other tools, which will appear on top of the map widget. Take time to consider which ones are needed for your app. Do not add things to your layout just because you can: you should always be able to explain why the addition is needed. Unnecessary elements will only distract from your map’s message and may even confuse the map reader.

  1. In the Map pane, expand Tools. Turn off the Search tool.

    Search tool turned off

    The Search button disappears from the map. There aren’t any town or street names to search for in the estuary, so a search bar isn’t necessary.

    The Compass tool is a north arrow. Not every map needs a north arrow, and web maps are less likely to need one than static maps because users can zoom out until they find a recognizable geography. However, this app will primarily be shown on touch screen devices, so it’s more likely that users may accidentally rotate the maps. You can make it easier for them to reorient the maps by adding a north arrow.

  2. Under Tools, turn on the Compass tool.

    The Compass button appears on the map below the Default map view button.

    Compass tool on the map

    The Layers and Basemap tools allow users to change which layers are visible and which basemap is used. These options are helpful when the user needs a lot of control over their exploration to make decisions. In this case, you’re trying to tell a controlled story about the estuary. Introducing ways for the user to change the map removes some of your control and can distract from your message. You won’t include either the Layers or the Basemap tools.

    Your users don’t need to calculate area or distance, so you won’t include the Measure tool either, but their understanding of the estuary would benefit from a better understanding of its size. There are relatively few visual indicators on the maps to help users determine scale intuitively, so you’ll add a scale bar.

  3. Turn on the Scale bar tool.

    Scale bar tool turned on

    A scale bar appears at the bottom of the map.

    Scale bar on the map

    Note:

    You can read about all of the map tools on the Map widget help page.

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

    There is no rule that can tell you which tools should be included on a map. You must question each one based on the map’s purpose, audience, message, and how it will be used.

Add a header with a title

One benefit of displaying a map inside a web app is the ability to customize a prominent map title. You’ll create a header for your layout and add a text widget for the title. Headers and footers can be enabled on the Page pane.

  1. On the side toolbar, click the Page button. In the pane that appears, click the highlighted Page element.

    Page element in the Page pane

    The Page pane appears on the other side of the canvas, showing the page’s properties.

  2. In the Page pane, turn on the Header toggle button.

    Header turned on

    A blue header appears across the top of the canvas. The row widget moves down to accommodate it. The default blue color of the header is not present in either of your maps. To make a consistent and cohesive layout, stick to a restricted palette of colors—for example, by repeating colors used in the maps.

    Your two maps are both very colorful, and you want them to stand out. Using neutral colors like black, white, and gray for the non-map elements of your layout will help the maps stand out. Black is a neutral color and also a color used in the maps, so it’s a good choice for your header.

  3. In the Page pane, next to Fill, click the blue square. Under Standard colors, click the black square.

    Black in the Fill color menu

    The header color updates. Next, you’ll add a text widget for the title.

  4. On the canvas, point to the header. Click Edit header.

    Edit header button

  5. On the side toolbar, click the Insert button.

    Insert button

    The Insert widget pane appears.

  6. In the Insert widget pane, click the arrow next to Map centric to collapse this section.

    Collapse button for the Map centric section

  7. Also collapse the Data centric section.
  8. Under Page elements, click and drag the Text widget. Drag it onto the canvas and drop it onto the header.

    Text widget dragged from the Insert widget pane to the header

    A text widget appears on the canvas and the Text pane appears. By default, the text will be black, which will be invisible against the black background of the header, so before you type any text, you’ll change its color to white.

  9. In the Text pane, under Text format, click the Font color button. Under Standard colors, click the white square.

    White in the text color menu

  10. Click the Bold button.

    Bold button

  11. On the canvas, double-click the text widget and type American River Marine Estuary. Press Enter and type Kangaroo Island, South Australia.

    Next, you’ll make the top line of text larger.

  12. Double-click the top line of text to select it. In the toolbar that appears, change the font size to 25 and press Enter.

    Font size set to 25

    Now the text widget isn’t large enough to show the full title. You’ll expand its size to fill the header.

  13. In the Text pane, click the Style tab.
  14. Click the options button immediately below the Style tab and click Full size.

    Full size option in the Options menu

    Making the text widget take the full size of the header will ensure that the title will always have the maximum possible space to show its text. This will become more important when the app is viewed on smaller screens.

  15. Click the blank part of the row widget, next to map, to stop editing the header.

    Full view of the experience created so far

  16. On the builder toolbar, click the Save button.

    Save button

In this tutorial, you created a web app with ArcGIS Experience Builder. It contains a header with a title and a row widget containing a map widget with two maps and several map tools. You learned some design concepts important for designing web app layouts—for example, how to choose colors for non-map elements and how to determine which tools to include. Try the next tutorial in this series, Arrange a web app layout with multiple widgets, to learn how to add legend, bookmark, and swipe widgets to the American River Marine Estuary experience.