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 lesson, 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 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 lesson, you'll use the following skills: choosing a web app template, creating and configuring your app, and editing the app's item details. This lesson is designed for beginners. You must have a public, organizational, or trial account to complete this lesson. 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 Map Viewerto 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 ArcGIS Living Atlas of the World.
- 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 Map Viewer.
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 lesson, 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.
- In Map Viewer, click Sign In and enter your ArcGIS Online credentials.
- With the U.S. Generations by Congressional District web map displayed, click the Share button on the ribbon above the map.
- 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.
- 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.
- Accept the default title, tags, and folder, and click Done.
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 lesson: Share a map.
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.
Configure the app
Next, you'll change elements of the app's presentation to better communicate the map's meaning.
- Review the settings on the App tab.
- 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.
- Click the General tab. Scroll down a bit and check the Splash Screen box. Enter the following:
- For Splash screen title: Where are the Baby Boomers?
- 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.
- For Define custom button text: Explore the map
- Click Save to save your configuration settings to this point.
- 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.
- Uncheck the Print Tool box. Click the General tab and uncheck Enable search tool.
- 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.
- Go back to the app configuration tab and click Close.
The app's item page appears.
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.
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.
- 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.
- Click Save.
- 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.
- Click Save.
This app was created for instructional purposes using a publicly available web map featured in Esri's Living Atlas of the World.
- Click Save.
- For Credits (Attribution), click Edit and type Esri, Living Atlas and click Save.
If you're signed in with an organizational account and your organization has set up content categories, you can click Edit next to Categories and select up to 20 categories to make it easier to find your app later. You can also use the Filter categories box to narrow the list of categories.
- Under URL, click Copy to copy the app's URL to your computer's clipboard. Paste the URL into an email.
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 lessons, 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:
- Find other publicly available maps in Living Atlas and use them to create map-based apps.
- Explore the configurable app gallery and try other app templates that interest you.
- Browse the Story Maps gallery of user-created apps.
- Learn more about creating apps using the following resources: Get started with apps, Choose a configurable app, and Create apps from maps.