Skip To Content

Create an app

In the previous lesson, you captured slides to emphasize key points in your scene. Now, you'll share your scene with the public. To improve the scene's presentation and make your message clear, you'll create a web app using Web AppBuilder for ArcGIS, which allows you to add widgets for navigation and additional information. Before you create the app, you'll add a few finishing touches to the scene.

Configure the legend

To make your scene as presentable as possible before sharing it, you'll configure the legend to remove unneeded information and clarify the purpose of certain layers.

  1. If necessary, open your Palm Beach County Shoreline Protection scene.
  2. Open the legend.

    The legend shows the names and symbols for all layers currently visible in the scene. Because the default extent of the layer has the 3D Reefs group turned off, the layers in that group don't appear in the legend. However, the 3D Reefs layers will appear when the group is turned on. Currently, however, the Artificial Reefs layer in both the 3D Reefs and 2D Reefs groups have the same name: Artificial Reefs - Palm Beach County. You'll rename these layers so that when they appear in the legend, the distinction between them is clear.

  3. In the Editor, in the 2D Reefs group, click the arrow for the Artificial Reefs - Palm Beach County layer and choose Rename.
  4. Change the name to Artificial Reefs (2D) and press Enter.

    Artificial Reefs (2D)

    The layer name also changes in the legend.

    Artificial Reefs (2D) in the legend

  5. Navigate to the South Corridors Reef slide.

    The legend changes to reflect the visible layers.

  6. In the Editor, in the 3D Reefs group, rename the Artificial Reefs - Palm Beach County layer to Artificial Reefs (3D).

    The layer name changes in the legend.

    Artificial Reefs (3D) in the legend

    Now the legend will display an informative name for the Artificial Reefs layer depending on which layer is visible.

    Another problem with the current legend is that it displays a symbol for the bathymetric image:

    Bathymetric image in legend

    The symbols in the legend contain little, if any, meaning and take up a large amount of space in the legend. You'll hide this layer from appearing in the legend to prevent it from distracting from more meaningful information.

  7. In the Editor, in the Hidden Layers group, click the arrow for the Palm Beach County Bathymetry Image layer and choose Configure Layer.

    The Configure Layer pane for this layer contains fewer parameters than it did for the reefs layer when you gave it a 3D symbol in the previous lesson. The bathymetry image is a tile layer, so it has fewer properties you can change than other types of layers. However, you can change its appearance in the legend.

  8. In the Configure Layer pane, for Legend, click the button to turn it off.

    Legend turned off

    The bathymetry image layer no longer appears in the legend. The legend is much smaller and only contains relevant information.

    Configured legend

  9. In the Configure Layer pane, click Done.
  10. Return to the Overview slide.
  11. Save the scene.

Create an app

Your scene is complete. Next, you'll create a web app with a customized configuration to display your scene in a presentable, easy-to-understand way. You'll use Web AppBuilder to create the app to your specifications.

  1. To the upper left corner of the scene, click the scene's name.

    Scene name

    The scene's item details page opens. All scenes, maps, and layers in ArcGIS Online have an item details page. It contains the metadata for the scene, as well as options for sharing and viewing the scene. The item details page contains the summary and tags you gave your scene when you originally shared it.

  2. In the upper right corner of the item details page, click Create Web App and choose Using the Web AppBuilder.

    Create Web App button

    The Create a New Web App window opens. This window allows you to specify a title, tags, and summary for the web app. The default title and tags are the same as your scene's, so you'll leave them unchanged. You'll add a new summary, however.

  3. In the Create a New Web App window, for Summary, type Key locations for Palm Beach County shoreline protection initiatives.
  4. Click OK.

    Web AppBuilder opens. It displays your Palm Beach County Shoreline Protection scene, but it also contains additional parameters for changing the tools that users can use to navigate and learn about the scene. Currently, the Theme pane is active. You can use this pane to change the web app's appearance, layout, and theme.

    Web AppBuilder default configuration

    While the default theme is okay, the button to access slides is in the upper right corner, one of the last things a user will see when exploring the app. Because slides are important to the experience of your scene, you'll choose a theme that makes it easier to access the slides.

  5. In the pane to the left of the scene, click Tab Theme.

    Tab Theme

    The arrangement of buttons and tools around the scene changes. The Slides button is now in the upper left corner.

    Slides button

    You can also change the color style of the app.

  6. For Style, choose the red style.

    Red style

    You also have two options for the layout. One option places the navigation control buttons in the upper left corner; the other, the lower right. You'll keep the layout unchanged.

  7. Click the Scene pane.

    Scene pane in list of panes

    This pane allows you to choose which scene is featured in the web app. You've already chosen your scene, so you don't need to make any changes. You can also use this pane to set the default extent of the scene in the app. Currently, the default extent is the same as the Overview slide, which is an appropriate starting point for your users.

  8. Click the Widget pane.

    Widget pane in list of panes

    This pane allows you to choose from a list of widgets, or navigation and exploration tools, to include in your web app. Many of these widgets are similar to navigation tools in Scene Viewer. For instance, your app includes a compass, a search box, and zoom controls, among others. You'll leave the default configuration of widgets unchanged.

    Note:

    For a more advanced look at the widgets available in Web AppBuilder, try Oso Mudslide - Before and After.

  9. Click the Attribute pane.

    Attribute pane in list of panes

    This pane allows you to brand your app with titles, external links, and organization logos. You'll add branding for the Palm Beach County local government.

  10. Change the subtitle from with Web AppBuilder for ArcGIS to Coastal Resources.

    Subtitle

    Next, you'll add a logo for the web app. You'll use Palm Beach County's official seal as the logo.

  11. Save the Palm Beach County seal to your computer where you can easily find it.
  12. For Branding, point to the default logo next to the title and subtitle and click Custom. Browse to the location you saved the seal, select it, and click OK.

    Logo

    The logo also appears in the upper left corner of the scene, next to the title. Next, you'll add a link to the Palm Beach County website.

  13. For Links, click Add New Link. For the title, type Environmental Resources Management. For the URL, copy and paste the following link: http://discover.pbcgov.org/erm/Pages/default.aspx.

    Links

  14. Click OK.

    The link is added to the upper right corner of the scene, next to the search bar.

    External link

    You've now configured a simple, user-friendly web app that contains information about the Palm Beach County government as well as your web scene.

  15. At the bottom of the left pane, click Save.

Preview the app

Before you share your app with the public, you'll preview it to make sure nothing else needs to be done.

  1. In Web AppBuilder, at the bottom of the left pane, click Launch.

    A new window opens in your browser. The window contains your app the way users will see it.

    Web app

    Many of the navigation tools are similar or identical to those you used in Scene Viewer. You'll explore a few of the new buttons and tools.

  2. Click the Slides button in the upper left corner. Navigate to some of your slides to confirm that the correct layers are visible for each.
  3. In the upper right corner, click the Environmental Resources Management link.

    The link opens a Palm Beach County government page that contains more information about environmental resource management in the county.

  4. Close the Palm Beach County government page.

    The scene functions properly and doesn't contain any errors. It allows the user to navigate to key areas through slides and also provides a link to additional information. With the app complete, your next task is to share it with the public.

  5. Close the web app and return to the Web AppBuilder page.

Share the app

Next, you'll share your app with the public. This app will be useful not only for informing citizens about Palm Beach County's shoreline protection efforts, but also for giving decision makers information necessary to make plans for the future. Before you share the app, you'll make sure the app's metadata has been inputted correctly.

  1. Above the scene, click the scene's name to open the item details page.

    The item details for the web app already include a summary and tags, because you added them when you created the app. However, the app has a generic, default thumbnail that doesn't convey much about the app. You'll replace the thumbnail with an image of the app.

  2. Save this sample thumbnail to your computer where you can easily find it. (Alternatively, capture your own thumbnail.)
    Tip:

    Thumbnails should have a size of about 600 pixels by 400 pixels.

  3. On the item details page, above the default thumbnail, click Edit Thumbnail.

    Edit Thumbnail

    The Upload Thumbnail window opens.

  4. Click Choose File. Browse to the thumbnail you saved, select it, and click Open.
  5. In the Upload Thumbnail window, click OK.

    The new thumbnail is uploaded and the default thumbnail updates.

    New thumbnail

    You'll also add a description. Descriptions are generally good ways to explain the purpose of a map, scene, or app. They can also include information about the item's contents or external links to more information.

  6. For Description, click Edit.
  7. Type a description of your web app. Alternatively, use the following description:

    This web app depicts the shoreline of Palm Beach County, Florida. It contains data layers that show the location of natural and artificial reefs. It also depicts the location of unconsolidated sediment and dredging activity, with a particular emphasis on these activities in major inlets. This information is critical for shoreline protection and maintenance.

  8. Click Save.

    Next, you'll share your app.

  9. In the upper right corner of the item details page, click Share.

    Share button

    The Share window opens. You can choose to share the web app with everyone, your organization, or any groups for which you have sharing privileges. You want the public to be able to view your app, so you'll share it with everyone.

  10. Check the box next to Everyone (public). Click OK.

    After the Share window closes, the Update Sharing window opens. This window informs you that, although you shared the web app, you have not yet shared the web scene that you used to create the web app. Until the scene is also shared, users will not be able to see all of the content in your web app.

  11. Click Update Sharing.

    Both your scene and your app are now shared.

  12. Scroll to the bottom of the item details page. For URL, copy the link in the text box.

    This URL provides a direct link to your web app. It uses the following format: http://[your organization's URL].arcgis.com/apps/webappviewer3d/index.html?id=[ID number].

    By default, the URL contains your organization's domain name. If you want to share this URL with members outside of your organization, you should remove your organization's domain before sending the link.

  13. Share the URL via email or social media.

In this series of lessons, you created a scene showing the shoreline of Palm Beach County, turned the scene into an app, and shared the app with the public. In doing so, you explored many of the capabilities of Scene Viewer and worked with data in 3D. For more projects that involve 3D data across the ArcGIS platform, try Get Started with ArcGIS Pro and Get Started with Drone2Map for ArcGIS. View the full list of Learn ArcGIS lessons in the Lesson Gallery.