Skip To Content

Create an app

In the previous lesson, you finished your web map by adding and styling demographic data to show census tracts with a high percentage of households without vehicles. In this lesson, you'll use your map to create a web app. A web app is a customized user interface that enhances your map's appearance, adds (or removes) functionality, and helps you integrate the map with other media. You can choose from a variety of configurable templates, depending on how you want to display your map. You simply want to showcase your map to the public, so you'll configure a Basic Viewer app template with only a few standard navigation tools. You'll also edit the app's item details to include proper information about the app's purpose and data sources.

Create a web app

To create a web app, you must first share your map. You already shared your map previously, so you don't have to do so again. However, you'll still access the list of configurable app templates through the Share window.

  1. If necessary, open your Houston Evacuation Map.
  2. On the ribbon, click the Share button.

    The map is shared with everyone.

  3. Click Create a Web App.

    Create a Web App button

    The Create a New Web App window opens. It includes a gallery of configurable apps, organized into categories based on purpose and functionality. You want your map to be the primary focus of your app. You also want to show the legend, pop-up information, and a map description. For these purposes, you'll use the Basic Viewer app.

  4. Click the Showcase a Map tab.

    Showcase a Map tab

    A list of app templates that provide a simple user interface is displayed.

    Note:

    If you are using an organizational account and your organization has configured custom galleries, you may not see the same configurable apps in this tab. If so, you can search for the Basic Viewer template using the search box.

  5. Click the Basic Viewer app. Then, click Create Web App.

    Before you configure the app, you must specify its title, tags, and summary. By default, the app has the same information as the web map used to create it. You'll change the title to better represent what you intend the map to emphasize, and leave the other parameters unchanged.

  6. Change Title to At-Risk Population in Houston.
  7. Click Done.

    The app opens in its configurable state.

    Default configurable app

Configure the app

Next, you'll change elements of the app's presentation to better communicate the map's story to users. There are four tabs of configurable parameters available. The default tab is General, which includes options for the title and subtitle, as well as additional details to explain the map. You already provided a title, so you'll start with the subtitle.

  1. For Subtitle, type Census tracts that may be vulnerable during a hurricane.

    The app details are a longer description that will be shown in the app.

  2. Next to Details, click Edit. Type (or copy and paste) the following text:

    This map shows evacuation routes and demographic data by census tract for Houston, Texas. The darker blue tracts have a higher percentage of households without a vehicle. This pattern helps answer the question: Where in Houston should we provide evacuation assistance during a hurricane?

    Tip:

    If you copy and paste the text, it may be formatted. You can remove the formatting by highlighting the text and clicking the Remove Format button on the toolbar.

    General tab parameters

  3. Click the Theme tab.

    This tab provides options to specify colors for various user interface elements. Feel free to experiment with colors and choose the ones you like. The following steps will provide recommended colors.

  4. For Header color, choose the blue color (#0084A8) in the second row from the bottom, fourth column from the right.

    Header color option

  5. For Header text color and Button icon color, choose the lightest gray (#EBEBEB) in the second row, first column.
  6. For Panel background, choose the next-darkest gray (#D6D6D6) in the third row, first column.
  7. For Panel text color, choose black (#1A1A1A).

    Theme tab parameters

  8. Under the map, click Save.

    The parameters you chose are saved and displayed on the app. Next, you'll configure the navigation tools you want to display in your app.

  9. Click the Options tab.

    By default, the basemap gallery, bookmarks, map details, and share tools are chosen. The app also includes a list of map layers. You'll uncheck the basemap gallery and bookmarks options in order to streamline the user experience and focus on the map content. Of the available options, you'll also include a legend.

  10. Uncheck the Basemap Gallery and Bookmarks boxes. Check the Legend box.

    Legend box

    The final tab, Search, provides options for users to search for specific places in the map. For your app's purposes, this functionality isn't necessary, so you'll turn it off.

  11. Click the Search tab.
  12. Uncheck Enable search tool.

    Enable search tool box

  13. Click Save.

    Preview of the final app configuration

  14. In the preview, test your app's functionality. Navigate the map and click the various buttons in the user interface.
  15. When satisfied, click Close.

    The app's details page opens.

Edit the item details

Your app is completed. Next, you'll edit its details to provide meaningful information about the map and data for the users. This information is called metadata, and it's important for all maps and apps to have it. The Item Information bar indicates your progress toward high-quality item information and also indicates the most important improvement you can make.

  1. Under Item Information, next to Top Improvement, click Add a summary.

    Item Information improvement

    The Edit Summary box becomes active.

  2. Type (or copy and paste) the following text:

    This web app highlights areas in need of assistance during a hurricane evacuation in Houston, Texas.

    Edit Summary box

  3. Click Save.

    The Item Information bar updates to reflect the information you added. Next, its recommendation is to add a description.

  4. Next to Top Improvement, click Add a description.

    The Edit Description box becomes active. A description should be even more detailed and in-depth than a summary. It should explain not only the app's purpose and what kind of data it shows, but also information about how to use the app and how it was created.

  5. Type (or copy and paste) the following text:

    This app shows evacuation routes and demographic data by census tract for Houston, Texas. The darker blue tracts have a higher percentage of households without a vehicle. This pattern helps answer the question: Where in Houston should we provide evacuation assistance during a hurricane?

    Use the Layers and Legend tools to learn more about the data shown in the map. Click individual census tracts to see pop-up information, including the percentage of households without a vehicle.

    The map in this app contains a Living Atlas layer of Houston evacuation routes and a layer of Houston demographic data. The demographic layer is styled using an Arcade expression that calculates the percentage of households without a vehicle. This information is also provided in pop-ups.

  6. Click Save.

    The Item Information progress bar indicates that you are closer to completing the item information for the app.

  7. Next to Item Information, click Learn more.

    A complete list of suggested improvements is displayed. You have completed all but one: Add terms of use.

    Expanded Item Information section

  8. Click Add terms of use.

    The Edit Terms of Use box becomes active. Your data comes from local and federal governmental authorities and is public domain, so there are no terms of use.

  9. Type None. Public domain data. Click Save.

    Next, you'll replace the default thumbnail image with one that better shows your app. Doing so will allow users to get an idea of what the app contains before they open it. Generally, your thumbnail should be a JPEG, PNG, or GIF image of your map or app with a size of 600 pixels by 400 pixels.

    While you can capture an image with the Print Screen key or image editing software, for the purposes of this lesson you'll be provided an example image to use as your thumbnail.

  10. Save the example image to your computer.
  11. Click Edit Thumbnail.

    Edit Thumbnail button

  12. In the Upload Thumbnail window, click Choose File (or your browser's equivalent command).
  13. Browse to the location where you saved the example image. Double-click the image.

    The image is added to the Upload Thumbnail window. You can change the way the image is positioned or zoomed, but because the image is the recommended size, you don't need to make any changes.

  14. Click OK.

    The thumbnail is added. The details page is complete. You can copy the app's URL to share it with anyone you want to show it to.

In these lessons, you created a map with a layer of hurricane evacuation routes in Houston, Texas. You then added demographic data by census tract and used smart mapping, pop-ups, and expressions to emphasize areas with limited vehicle ownership. The spatial patterns revealed in your map helped you determine where evacuation assistance is most needed in the event of a hurricane. Finally, you shared your findings by turning your map into an interactive web app.

What's next? To learn more about mapmaking in ArcGIS Online, try Fight Child Poverty with Demographic Analysis or Track Crime Patterns to Aid Law Enforcement. To learn more about spatial analysis and problem solving, try Analyze Volcano Shelter Access in Hawaii or Identify Landslide Risk Areas in Colorado. If you'd like to take a more detailed look at web apps, try Get Started with Story Maps or Oso Mudslide - Before and After.

You can find more lessons in the Learn ArcGIS Lesson Gallery.