Skip To Content

Quick exercise: Create an app

Web apps are a great way to inform, educate, entertain, and inspire people about a wide variety of topics. With ArcGIS Online, it's easy to create a web app from a map without the need for specialized development skills. In this exercise, you'll assume the role of a travel agency chain co-owner. In this scenario, you and your business partners want to expand your business to include luxury travel tours, and you were tasked with deciding which agency location is your best option for a first launch. To help you make this decision, you found a public web map and analyzed it visually in the map viewer to compare the location options. Now you want to create a web app from the map and share the app, including your impressions and recommendations, with your business partners. As you work through the steps in this exercise, you'll use the following skills: choosing a web app template, creating and configuring your app, and editing the app's item details. This exercise is designed for beginners. You must have a public, organizational, or trial account to complete this exercise. Estimated time: 20 minutes.

You're a co-owner of a small chain of travel agencies, with locations in the Los Angeles, Washington D.C., and Chicago areas. You and your business partners are interested in expanding your travel services this year to include luxury travel tours, and preliminary Internet research has convinced you that the baby boomer generation—people between the ages of 52 and 70—is your most promising target market.

You were tasked with determining the best agency location to launch the new services and used the map viewer to visually analyze a public web map you found to compare the three location options. Now you want to share the map and your findings with your partners to see whether their impressions match yours. You can do this with ArcGIS Online: turn the web map into an app, configure it to include text and other media, and email a link to the app to your business partners.

Open the map

Start by opening the U.S. Generations by Congressional District map you explored. The map is publicly available from Living Atlas of the World.

  1. In a browser, go to http://www.arcgis.com/home/webmap/viewer.html?webmap=7735d6cf26094ae198514c4d673f6652.

    The U.S. Generations by Congressional District web map opens in the map viewer.

  2. This web map highlights the predominant generation in each Unites States congressional district in 2016. The predominant generation in a district is the generation that has the highest population compared to the other generations in the district.

    In another exercise, you visually analyzed this map to compare the three location options for launching luxury travel services to baby boomers. Now you are ready to make a formal proposal to your business partners by creating a web app from the map and adding your impressions and recommendations.

Sign in and create a web app

You want to present the U.S. Generations by Congressional District map to your business partners and walk them through your impressions of the three potential locations you analyzed. This will support your recommendation to launch luxury travel services in Washington, D.C. You also want to encourage your partners to explore the map themselves to determine whether their impressions match yours.

One way to use a map to tell a story or share information with others is to create a web app from the map. Map-based apps provide a simplified interface that allows you to share a story or message in a focused way and allows others to explore the map with a specific purpose in mind. You'll create your map-based app using one of the many configurable app templates that come with ArcGIS Online.

To access the templates, you must be signed in to ArcGIS Online.

  1. In the map viewer, click Sign In and enter your ArcGIS Online credentials.
  2. Now, you can choose a configurable app template to use to create your web app.
  3. With the U.S. Generations by Congressional District web map displayed, click the Share button on the ribbon above the map.
  4. Note:
    By default, the web app you create will be shared with the public. If you are signed in with an organizational account and own groups, you may see an option to share your app with one of your groups instead of with the public. To learn how to share content with groups, see Quick exercise: Share a map.
  5. In the Share window, click Create a Web App.

    The Create a New Web App window appears. It includes a gallery of configurable apps organized into categories based on purpose and functionality.

  6. You want the map to be the primary focus of your app as it's the basis of your recommendation to your business partners. You want the app to include the legend, bookmarks, and pop-ups that were configured for the map, as well as your impressions of the location options, while still maximizing the screen real estate dedicated to the map. The Basic Viewer app in the Showcase a Map category is a good choice.

  7. On the left, click the Showcase a Map tab, click the Basic Viewer app, read the description of the app, and click Create Web App.
  8. By default, the app is given the same sharing properties as the map.
  9. Accept the default title, tags, and folder, and click Done.
  10. The app is now ready to be configured.

Configure the app

Next, you'll change elements of the app's presentation to better communicate the map's meaning.

  1. Review the settings on the App tab.
  2. By default, your app is given the same title as that of the web map. You'll accept the defaults here and move on to configuring other elements of the app.
  3. Click the Theme tab. Keep the Default layout. For Color Theme, choose a bright blue that most closely matches the blue used in the map to represent baby boomers. For Title Color and Icon Color, accept the default white.
  4. Next, you'll configure a splash screen to record your impressions of the map for your business partners. The splash screen will appear when the app is loaded and will include a button you configure for your partners to use to close the splash screen and explore the map themselves.
  5. Click the General tab. Scroll down a bit and check the Splash Screen box. Enter the following:
    1. For Splash screen title: Where are the Baby Boomers?
    2. For Splash screen content text:

      This map highlights the predominant generation in each U.S. congressional district in 2016. The predominant generation is the generation with the highest population compared to the other generations in a given district. As the legend shows, each generation is represented by a different color. The Baby Boomer generation, which is our target market, is blue. The Millennial generation is yellow. The color of a district on the map reflects the predominant generation in that district.

      At this zoom level, Millennials dominate the map, but you can use the Bookmarks tool to zoom into the cities where our agencies are located to get a clearer picture of the districts and more detailed information. These are my impressions from analyzing the map using these bookmarks and by clicking on different districts to see detailed pop-up information:

      • The Los Angeles area has a strong predominance of Millennials over Baby Boomers and a relatively low population of Baby Boomers in District 43 and other districts near our travel agency.
      • The Chicago area has one predominantly Baby Boomer district, while the rest are dominated by Millennials. The Baby Boomer population in District 6 where our agency is located is not a lot higher than that of Los Angeles District 43 and is still quite a bit lower than the Millennial populations.
      • Washington, D.C. has more Baby Boomer-dominated districts than the other cities, and these districts have large populations of Baby Boomers. Virginia District 10, the purple district where our agency is located, is close to two predominantly Baby Boomer districts with high populations of Baby Boomers (for example, nearly 200,000 in Virginia District 5).

      Proposal: I recommend that we launch our luxury travel services in the Washington, D.C. agency due to the predominance and notably higher populations of Baby Boomers in that city as compared to the other locations.

      Now, explore the map yourself and let me know if your impressions match mine.

    3. For Define custom button text: Explore the map
  6. Click Save to save your configuration settings to this point.
  7. Next, you'll specify the tools you want to include on the toolbar in the app. You want to keep it simple and give your business partners only the tools they'll need to analyze the three locations of interest, so you'll only include the map's legend, bookmarks, and details about the map.
  8. Click the Tools tab. For Specify active tool at app startup, select Legend. Uncheck all of the boxes selected by default, except the Bookmarks box. Check the Legend and Map Details boxes.
  9. The legend will appear after the splash screen is closed and will also be available, along with the other specified tools, on the toolbar.

    Your partners won't need to print the map, and they can find the locations of interest by using the Bookmarks tool, so the Print and Search tools won't be needed.

  10. Uncheck the Print Tool box. Click the General tab and uncheck Enable search tool.
  11. Now you can save your configuration settings and preview your app to make sure it meets your needs.
  12. Click Save and click Launch to view your app in a new browser tab. Test your new app. For example, review your splash screen text and test the button. Click features on the map to display pop-ups. Zoom and pan the map, use the Bookmarks tool to zoom to the locations of interest, and click the Default Extent button to return to the default extent of the map.
  13. Now that you have configured your app, you are almost ready to show it to your business partners. You just need to fill in a few details on the item page before presenting your app.
  14. Go back to the app configuration tab and click Close.
  15. The app's item page appears.

Edit the item details

Some of the item details from the map, such as the summary and tags, are added automatically to the web app. You'll modify this information for your app and add some other information.

  1. Click Edit next to the summary text and enter the following:

    This app highlights the predominant generation in each U.S. congressional district in 2016. The map forms the basis of an analysis of travel agency locations to determine the best one for launching luxury travel services to Baby Boomers.

  2. Click Save.
  3. For Description, click Edit and enter the following:

    This app highlights the predominant generation in each U.S. congressional district in 2016. The map, which was featured in Esri’s Living Atlas gallery, forms the basis of an analysis of travel agency locations to determine the best one for launching luxury travel services to Baby Boomers. Use the Bookmarks tool to see the predominant generations in the districts in and around Los Angeles, Chicago, and Washington, D.C. Click individual districts on the map to see pop-up information, including the population of each generation in a given district.

    This app was created for instructional purposes only and should not be used as an authoritative resource.

  4. Click Save.
  5. For Access and Use Constraints, click Edit, and enter the following:

    This app was created for instructional purposes using a publicly available web map featured in Esri's Living Atlas of the World.

  6. Click Save.
  7. For Credits (Attribution), click Edit and type Esri, Living Atlas and click Save.
  8. You've finished configuring your app and updating the item details. Now you can send your business partners an email with a link to your app.
  9. Under URL, click Copy to copy the app's URL to your computer's clipboard. Paste the URL into an email.

Next steps

After only 20 minutes working in ArcGIS Online, you've created a configurable app to present your findings and recommendations to your business partners. What's next?

To find more scenario-based exercises, browse the ArcGIS Learn gallery. To start, try Are graduation and unemployment rates related? or Oso Mudslide—Before and After. You can also visit The ArcGIS Book and The ArcGIS Imagery Book websites.

Explore ArcGIS Online on your own and discover what else is possible. A few ideas are as follows: