Skip To Content

Make an app

You can add value to the map you made in the previous lesson by publishing it as 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 several predefined configurable templates, or use Web AppBuilder for ArcGIS to design your own.

In this lesson, you'll publish your lava flow risk zone map in the Simple Map Viewer template. This web app allows you to choose color schemes, add descriptive text, and decide which map tools you want to make available to users. To create a web app, you'll need either an ArcGIS organizational account or a public account to save and share your map. You can sign up for a free trial account if you do not have one.

Save the map

You'll begin by saving your map.

  1. If you do not have an account, sign up for a free ArcGIS trial account.
  2. Return to the browser window with your Hawaii map.
  3. On the ribbon, click the Save button and choose Save.
  4. If necessary, sign in to your ArcGIS organizational or public account.
  5. In the Save Map window, type Hawaii Island Lava Flow Hazard Zones in the Title box.
  6. For the tags, type words that will help people find the map through searches. After each tag, press Enter.
  7. For the summary, type a brief description of the map's content.

    Save Map window

  8. Click Save Map.

    The map is saved to My Content, which you can access from the content page in the organization.

Edit item details

Next, you'll edit the information that describes your map (also known as its metadata). The metadata changes you make to your map will carry over to your web app. In particular, you'll edit your map's Description, which will allow users to learn about the map's content.

  1. In the upper left corner of the page, click Home and choose Content.

    On the My Content tab of the content page, the map is listed by its name and other details.

  2. Click the ellipsis button next to the map title and choose View item details.

    View item details

    The item details page contains information about your map. From this page, you can also share the map with others, monitor map usage to gauge its popularity, and edit settings such as the map extent.

  3. On the item details page, for Description, click Edit.
    Note:

    You can also edit by clicking the blue text below the heading.

  4. In the Edit Description box, type (or copy and paste) the following text: The classification of lava flow hazard zones on the island of Hawaii was made by the United States Geological Survey in 1974. The risk levels are based on the location and frequency of historic eruptions.
    Tip:

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

  5. Click Save.

    Your map's item details are updated.

Save the shelters as a layer

The Emergency Shelters layer exists in your map but nowhere else. Nobody would be able to find it, for instance, by searching the organization's layers. By saving it as a layer to My Content, you can share it and add it to other maps. You'll be its owner, and the properties you give it will be its defaults. When someone else adds the layer to a map (assuming you share it), it will display with the symbology you chose.

  1. On the upper right of the item details page, click Open in Map Viewer.
  2. Open the properties for the Emergency Shelters layer and choose Save Layer at the bottom of the menu.
    Note:

    This menu choice is only available for layers that you've created. You won't see it in the properties for other layers in this map. (If you are an administrator of the organization that owns the content, you will also see this menu choice.)

  3. In the Create Item window, keep the title Emergency Shelters.
  4. Add a few tags that will help people find the map through searches. After each tag, press Enter.
  5. Add a summary of the layer's content.

    Create Item window

  6. Click Create Item.
  7. Save the map.
  8. In the upper left corner of the page, click Home and choose Content.

    Emergency Shelters layer

    The layer appears as an item in My Content.

Create a web app

Now, you'll create your web app. The first step is to share your map so others can see it.

  1. If necessary, open the map. On the ribbon above the map, click the Share button.

    Share button

  2. In the Share window, check the box to share the item with your organization—or, if you want, share it with everyone.

    Share window

    Tip:

    If you want to share the map through social media accounts such as Facebook or Twitter, share it with everyone.

    When you share the map, the Update Sharing window opens, which indicates that the Emergency Shelters layer that you own may not be visible to others because it is not shared in the same way as the map.

  3. Click Update Sharing to adjust the settings of the listed layer so it can be viewed in the web map.

    Now that the map is shared, you'll make the web app.

  4. In the Share window, click Create a Web App.

    Create a Web App button

    The Create a New Web App window opens, presenting a gallery view of the available templates. Some are designed for specific purposes; others are for general use.

    The templates are in alphabetical order. You can use the scroll bar to review the full gallery, or you can filter the templates by using the tabs on the left or the Search box at the top.

  5. On the left, click Showcase a Map.

    Filtered gallery of templates

    Note:

    If your organization has configured custom galleries, you may not see these same configurable apps.

  6. Click the Simple Map Viewer template, and then click Create Web App.
  7. In the Create a New Web App window, accept the default title and tags.

    It won't be a problem that the web app has the same title as the map it's based on, because the two items are of different types.

  8. For the summary, type a brief description of the app.

    Create a New Web App window

    By default, the web app is given the same sharing properties as the web map.

  9. Click Done.

    The Configure window opens with a preview of the app.

    Configure window

Configure the app

You can change the web app's configurable properties using the tabs in the Configure window. Some of these properties, such as the title, theme, and text color, have default settings. In this section, you'll make changes to some of these settings.

  1. Click the General tab.

    By default, the web app title is the same as its source map.

  2. Leave the default setting for the title, or type a new title of your own.
    Note:

    If you type a new title, it will display when users open the web app. The title of the web app item in My Content, however, will remain Hawaii Island Lava Flow Hazard Zones (the title you accepted when you published the web app in the last section).

    To the left of the map is its legend. Under the legend, the About section gives a short description of the map. This text comes from the item description you created for the web map. You can override this text.

  3. Copy and paste the following text into the Description box:

    The boundaries and classification of lava flow hazard zones on Hawaii Island were first mapped by the U.S. Geological Survey in 1974. This classification scheme divides the island into 18 major zones that are ranked from 1 through 9 based on the probability of coverage by lava flows. The risk levels are based primarily on the location and frequency of historic eruptions (those for which there are written records or that are known from the oral traditions of the Hawaiians) and the geologic mapping and scientific dating of the old flows from prehistoric eruptions.

  4. In the Description box, press Enter twice to add a blank line, and type (or copy and paste) Click a hazard zone or volcano to learn more.
  5. Highlight the sentence you just typed. On the toolbar at the top of the Description box, click the Italic button to italicize the sentence. Click some white space to deselect the text.

    Description box

  6. In the first line of text, highlight the word classification. On the toolbar, click the Create Link button.

    Create Link button

  7. In the Link Properties box, copy and paste https://pubs.er.usgs.gov/publication/7000036 into the URL text box. Click the arrow next to Target and choose New Window. Click Set.

    Link Properties

    This link will take the user to a United States Geological Survey page that describes the hazard zones in more detail.

  8. Click the Options tab. Uncheck the Find Location box. Leave the Home Extent Button box checked.

    The Home Extent button lets the user return to the starting map view after panning and zooming. The Find Location tool zooms the map to the user’s own location (for example, to Redlands, California).

  9. Click the Theme tab. For Color Theme, choose a theme color.

    Color theme

    You can choose any color you like. The theme color will be used as the background color for the web app title.

  10. For the first Text Color, choose a color for the web app text.

    Title color

    This color will be used for the title text.

  11. For the third Text Color, choose the same color you chose for the previous text.

    This color will be used for the drawer title text. (The drawers are the collapsible Legend and About panes.) The second Text Color, which you won't change, determines the color for non-title text in the drawers.

  12. Click Save.

    The preview of your configured web app updates to show your changes. The web app includes a search tool in the upper right corner. The purpose of your web app is to inform people about volcanoes and areas of lava flow risk. Aside from opening pop-ups, users don’t need to interact with the map much. They probably don’t need to look for specific addresses or places on the map.

  13. Click the Search tab and uncheck all the boxes.
  14. Click Save.

    Configured web app

  15. At the bottom of the Configure window, click Close.

    You're taken to the web app's item details page.

Edit the app's item details

The item title, summary, and tags are already completed from when you first created the web app. You still need to add a description and some other information.

  1. On the item page, next to Description, click Edit.
  2. In the Edit Description box, type a description of the web app, for example:

    Lava flow hazard zones for the island of Hawaii as defined by the U.S. Geological Survey. Volcanoes, emergency shelters, and major highways are also shown.

  3. Click Save.
  4. For Access and Use Constraints, click Edit and type None. Public domain data and images. Click Save.
  5. In the lower right of the page, for Credits (Attribution), click Edit and type Hawaii State GIS Program; United States Geological Survey.
  6. Click Save.
    Tip:

    If you later decide to make changes to the way the web app is configured, open this item page and click Configure App.

View the app

  1. At the top of the item page, click the thumbnail image to open the application. (You can also click View Application.)

    Web app

    The app opens in a new browser tab or window.

  2. Explore the app by navigating and opening pop-ups.

    Hazard zone pop-up

    The pop-ups behave the same in the web app as they do in the web map.

  3. Click the Default extent button to return to the original view of the map.

    Default extent button

    Note:

    Any changes you make to the source web map, such as adding or removing layers, changing symbology, or configuring pop-ups, will be reflected automatically in the app. If you change the sharing properties of the map (or if you delete it), this will affect the app as well.

Make a thumbnail image

The last thing to do is replace the default generic thumbnail image on the item details page with one that shows your app.

  1. Capture an image of the app with your image editing software.
    Tip:

    If you're not sure how to do that, capture the image with the Print Screen key (PrtScn) on your keyboard and paste it into the Windows Paint accessory. In Windows 7, you can open Paint from Start > All Programs > Accessories.

  2. Resize the image to a width of 600 pixels, but don't alter the aspect ratio.
    Tip:

    The ideal aspect ratio is 3:2. When the image width is 600 pixels, the height should be about 400 pixels. If your height value is substantially different, crop the image to avoid distortion in the thumbnail.

  3. Save the image in PNG file format to a folder on your computer.
  4. Return to the web app's item details page.
  5. Above the default thumbnail image, click Edit Thumbnail.
  6. On the Upload Thumbnail window, click Choose File (or your browser's equivalent command). Browse to the folder where you saved the thumbnail and upload the image. Click OK.

    The new thumbnail image appears.

    App thumbnail image

You now know how to make a map, add layers to it, create your own layers from file-based data, configure pop-ups, and publish your map as a web app. What's next? You can try Analyze Volcano Shelter Access in Hawaii, which considers the accessibility of emergency shelters from populated areas on the island of Hawaii. You can learn how to publish map layers from ArcMap to ArcGIS Online in Homeless in the Badlands. If you'd like to delve deeper into web apps, try Get Started with Story Maps or Oso Mudslide - Before and After in which you'll create an app with Web AppBuilder.