Skip To Content

Create an app

In the previous lesson, you published and tested your whale monitoring survey. Tour guides and boat captains will use your survey at least nine months of the year, when whales and other marine species visit the Bahía Ballena area. Respondents are generally curious about both their own and other sightings. Potential tourists want to know the best times of the year and times of day to encounter whales and other marine species, while researchers want access to survey statistics.

To share the survey results, you'll create a web map that contains the result data. You'll symbolize the spatial data from your survey and configure pop-ups that contain the key survey information. Then, you'll use your web map to create a web mapping application, which presents the spatial information with a user-friendly interface that you can share with captains, tourists, and researchers.

Explore survey results

Before you create a web map from survey result data, you'll become familiar with what your result data contains. Although no one has submitted real surveys yet, you previously completed three test surveys on your mobile device.

  1. If necessary, sign in to the Survey123 website using your ArcGIS organizational account.
  2. Go to My Surveys.
    Note:

    Your own survey location and data will differ from the following example images.

  3. Click the Whale Sighting Survey.

    An overview of the survey responses opens. The overview lists the total number of surveys completed, the number of participants, and the dates of the first and last survey.

    Overview of surveys

  4. Click the Data tab.

    Data tab

    The Data page contains a map of survey locations and a table of survey responses. The map automatically zooms to an extent that displays as many of your surveys as possible.

  5. Click any survey entry in the table.

    The map pans and zooms to the point that represents the survey you clicked. In addition, an Individual Response pane opens with details about the survey.

    Individual Response pane

    The Data page also includes options to convert your data into additional formats for use by other applications. You can even convert your data into a web map. Before you convert your data, you'll explore one more page with information on your survey results.

  6. Click the Analyze tab.

    Analyze tab

    The Analyze page contains charts and maps that show statistics about your survey's results. For your whale survey, these charts help determine which whale species is most often observed and which times and dates have the most sightings. You took your three surveys at nearly the same time, so the Hour of sighting chart probably has a large spike at a specific time.

    Hour of sighting chart

  7. Explore the Analyze page. When you finish, return to the Data page.

Create a web map

Next, you'll convert your survey data into a web map. This map is the first step toward creating a web app that will display survey results with an appealing and easy-to-use interface.

  1. On the Data page, click Open in Map Viewer.

    Open in Map Viewer button

    A new web browser tab opens to ArcGIS Online, displaying the survey data in Map Viewer. The Contents pane to the side of the map contains a layer that represents the point data from your survey. The layer's name contains a long string of letters and numbers that doesn't convey much information. You'll rename the layer to something more appropriate.

  2. In the Contents pane, point to the layer that represents your survey data. Click the More Options button and choose Rename.

    More Options button with Rename selected in the options menu

  3. In the Rename window, change the Layer Name to Marine Observations and click OK.

    Depending on where your survey points are located, the default zoom level of the web map may not be appropriate to display all the data.

  4. In the Contents pane, point to the Marine Observations layer. Click the More Options button and choose Zoom to.

    The map displays all your survey points. The points contain the data from the survey responses, which you can access through the layer's table.

  5. Point to the Marine Observations layer and click the Show Table button.

    Show Table button

    A table opens under the map, similar to the table you encountered in the Data page. The table also contains the same survey response data. The layer will update automatically with new observations of marine life sightings as they are recorded.

  6. Close the table.

    Lastly, you'll save the web map.

  7. On the ribbon above the map, click Save and choose Save As.

    Save As

  8. In the Save Map window, complete the following parameters:
    • Title: Whale Monitoring
    • Tags: Whales, Marine Animals, Costa Rica
    • Summary: A web map that contains observations of whales and other marine life in Costa Rica
  9. Click Save Map.

    Your map is saved. You can now access it from ArcGIS Online.

Add a layer for the national park

Before you create a web app out of your web map, you'll make a few more changes to it. First, you'll change the basemap to emphasize geographic patterns in the ocean. Then, you'll add a layer of the Marino Ballena National Park boundary. Many tour guides and captains travel within this park, so it's likely that a lot of the marine observations will be inside it.

  1. On the ribbon, click Basemap and choose Oceans.

    Basemap gallery with Oceans selected

    The Oceans basemap emphasizes marine bathymetry, while removing many land-based features. Next, you'll add the Marino Ballena National Park boundary.

  2. On the ribbon, click Add and choose Search for Layers.

    Search for Layers

    The search pane appears

  3. In the search box, type the park's name in Spanish, Parque Nacional Marino Ballena. Then typeowner:Learn_ArcGIS.
  4. Confirm thatArcGIS Online is displayed at the top of the pane.

    Search parameters

  5. Press Enter

    The search returns a layer, owned by the Learn ArcGIS administrator account.

  6. For the Parque Nacional Marino Ballena layer, click Add to Map.Click Add to Map

    Park boundaries on map

    The park boundaries are added to the map. This layer was created by Geoporter, a nonprofit organization of educators who work with communities to examine local resources and solve local issues.

    Note:

    If none of your survey results are within the park boundaries (as shown in the example), that's okay. You'll add a file of example survey results later with data collected inside the park.

  7. Click X in the upper right of the Add to Map dialog when done.
  8. Click the Back arrow to return to the Content tab

Change symbology

The Marino Ballena National Park layer is styled with a random green polygon symbol. Next, you'll apply more visually appealing symbology to the layer You'll also change the symbology for the marine observations to display different types of observations with different symbols, so users can tell at a glance what kind of observation each symbol represents.

  1. In the Contents pane, point to the Parque Nacional Marino Ballena layer and click the Change Style button.

    Change Style button

    The Change Style pane opens. You can choose to symbolize the layer based on a data attribute located in the layer's table, or with a single symbol. The park boundaries layer contains only one feature (unlike the marine observations layer, which contains three), so you'll symbolize the layer with a single symbol.

  2. For Location (Single Symbol), click Options.

    Single symbol options

    The pane changes to show options for the default symbol. You'll change the symbol's color and outline pattern.

  3. Click Symbols.

    Symbols button

    A window with more symbol options appears. You can change both the fill color and the outline color.

  4. For Fill, change the color to a darker green and the transparency to 60 percent.

    Fill color and transparency

  5. Click Outline. Change the outline color to the darkest green and Transparency to 10 percent.
  6. Change Pattern to the dash-dot-dash pattern.

    Outline color, transparency, and pattern

  7. Click OK.

    The changes are automatically applied to the map. The new symbol stands out more without obscuring the basemap.

  8. At the bottom of the Change Style pane, click OK. Then, click Done.

    Next, you'll symbolize marine observations so that each species has a different symbol. This symbology will allow users to distinguish different types of observations at a glance.

  9. On the Contents pane, point to the Marine Observations layer and click the Change Style button.
  10. In the Change Style pane, for Choose an attribute to show, choose Species.

    Choose an attribute to show

    The available drawing styles update. Unlike the national park layer, which had only one feature, there are multiple features in the marine observations layer. You can choose to give features unique symbols based on their attribute information (the survey data in the layer's table).

  11. For Select a drawing style, for Types (Unique symbols), click Options.

    Options for unique symbols

    By default, each species type is given a symbol with a unique color.

    Symbols for each species

    You can either use the default symbols or modify them.

  12. Optionally, in the Change Style pane, click the symbols and change them to your preference.

    The list of species contains two categories called Other. One of the Other categories is a survey option that a guide or captain can choose to record the sighting of a species they couldn't identify. The second Other category was automatically added to the layer in the web map to categorize any records that do not have a species specified. You'll turn off the second Other category.

  13. Scroll to the bottom of the list of species. Uncheck the Other box.

    Other species category

  14. At the bottom of the Change Style pane, click OK. Then, click Done.

Configure pop-ups

Each marine observation has a pop-up that contains all the survey information related to that observation. While this information can be useful, it's best to include the most important details in each pop-up. Next, you'll configure pop-ups to create a more user-friendly experience.

  1. Click any marine observation to open its pop-up.

    Default pop-up

    The current pop-up title isn't useful. Additionally, some of the information about the tour guide and weather conditions is unnecessary to show. You'll change the title and hide some of the unnecessary details.

  2. Close the pop-up. In the Contents pane, point to the Marine Observations layer, click the More Options button, and choose Configure Pop-up.

    Configure Pop-up

    First, you'll change the pop-up's title to contain the most important information: the species observed.

  3. For Pop-up Title, delete the current text. Click the Add Field Name or Expression button and choose Species {species}.

    Add Field Name or Expression button with Species selected in the list

    Next, you'll modify and remove some of the additional fields in the pop-up.

  4. For Pop-up Contents, click Configure Attributes.

    Configure Attributes

    The Configure Attributes window opens. It contains a list of all attributes displayed in the layer, with options to display them or change their field alias (the name of the attribute that appears in the pop-up). You already have the species field as the pop-up title, so you can turn it off in the pop-up content.

  5. In the Display column, uncheck the box for the Species field.

    Species field display

    You'll also turn off a few other fields.

  6. Uncheck Display for the following fields:
    • Date
    • Species of Turtle
    • In what direction is the species moving?
    • Minutes of observation
    • Captain or guide name
    • Your name
    • Type of tour
    • Departure location

    This window also has options for changing the order of fields. You'll move the number of species seen to the top of the pop-up to emphasize it.

  7. Click the Group size field to select it and click the Move up button. Repeat this process two more times to move the field above the Hour of sighting field.

    Move up

  8. Optionally, move other fields to arrange them in an order you think is best.
  9. Click OK. In the Configure Pop-up pane, click OK.
  10. On the map, open a pop-up.

    Configured pop-up

    The new pop-up contains a smaller amount of information, but it's information that is more likely to be relevant to your users.

  11. Close the pop-up.
  12. Save your map.

Configure a web mapping application

Your web map is complete. Next, you'll configure a web mapping application, also called a web app. A web app presents a web map with an appealing, user-friendly interface. You'll share your app with the public so users can see changes in observations over time.

  1. On the ribbon, click Share.

    Share button

    Before you create the web app, you'll share the map. Otherwise, when users open the app, they won't see the map.

  2. For Choose who can view this map, choose Everyone (public).
  3. Under Embed this map, Click Create a web app.

    Create a Web App button

    The Create a New Web App window appears. You can either build a web app from scratch with the Web AppBuilder, or you can use a template that configures a lot of settings for you. You'll use a template with minimal extra settings to emphasize your map and survey results.

  4. Search for and click Minimalist.

    Minimalist web app template

    A pane with a short summary of the template appears.

  5. Click Create Web App.

    Create web app button

    Next, you're given the option to update the metadata (title, tags, and summary) of your web app. The default metadata is the same that you used for your web map. You'll change some of the metadata to distinguish your app from your map and provide more description for users.

  6. Update the following information:
    • Title: Whale Monitoring off the Pacific Coast of Costa Rica
    • Summary: The most recent marine life sightings off the Pacific coast of Costa Rica
  7. Click Done.

    The app is created based on the template you chose. You also have a simple set of options to modify and customize the content of your app.

    Default web app

    Your options are organized in the General, Theme, Options, and Search tabs.

    Tabs to modify the web app

    On the General tab, which is chosen by default, you can change the web map that your app will use. You already chose your web map, so you don't need to make any changes. Instead, you'll change the app's theme to give it a darker appearance.

  8. Click the Theme tab. Change the Color Theme to Dark.

    Color Theme set to Dark

    Next, you'll modify the user interface to include more options for users.

  9. Click the Options tab. Check the Home Extent Button option.

    Home Extent Button

    Now, app users can return to the default extent of the map if they navigate away. You'll also turn on a map legend, a list of map layers, and a side panel with map details.

  10. Check the following options:
    • Display a Legend
    • Display legend + layer list
    • Display map details in side panel

    Legend and map details options

    You can also display a feature's pop-up in a side panel instead of in the map. However, doing so isn't necessary for this lesson. Next, you'll save and preview your app.

  11. Below the map, click Save.

    Save the web app

  12. Click Launch.

    Your web app opens in a new browser tab or window. Currently, your app doesn't look much different from your web map, because the side panel is collapsed by default.

  13. In the upper left corner of the app, click the Toggle side panel button.

    Toggle side panel button

    The side panel expands. It currently shows the legend, which contains the national park and marine observation layers.

  14. Switch from the Legend tab to the Details tab.

    Your app currently has no details because you have not given the web map a description.

  15. Click a marine observation to open a pop-up.

    The pop-up has a dark color because of the theme you chose.

  16. Explore the web app as much as you want. When you finish, close the web app and return to the configuration page.

    Next, you'll add a description that will appear on the Details tab of the app's side panel. The description comes from the item details of the web map that the app uses.

  17. Below the map, click Close.

    The app's item page opens. The title, summary, and tags are already completed from when you first created the app. To display map details in the app, you must edit the item details for the web map instead.

  18. At the top of the page, click Content. In your Content page, click your Whale Monitoring web map to open its item page.
  19. For Description, click Edit.

    Edit the description

  20. Add the following description (or write your own):

    This web app contains recent marine life sightings off the Pacific coast of Costa Rica. These marine life observations were taken by tour guides and boat captains and include sightings of whales, dolphins, turtles, and other prominent marine creatures.

  21. Click Save.

In this lesson, you created a web map from your survey results and turned it into a web app that users can explore. In the next lesson, you'll analyze survey results to discern patterns in the locations and times that marine animals are observed. This analysis will give stronger insight into the changing patterns of whale populations in Bahía Ballena.