Skip To Content

Share your results as a web app

To share your findings with donors and your organization, you'll create a web app based on the map you created in the previous lesson. A web app is a customized user interface that showcases your map for a specific purpose, message, and audience. For example, if you just want to display your map, your app only needs a few basic navigation tools. In this scenario, you need to present your map as a time animation series to demonstrate the changes in land use and distribution of vegetation over four decades. To do so, you'll share your new web map so it can be used in time-aware web applications. Additionally, the Multispectral Landsat layer is premium content, so you must enable the layer to be published through your organizational account at the expense of your organization's credits. Finally, you'll customize the application to present and share your results.

Create a time-aware web app

To create a web app, you must first share your map. Then, you can access the configurable app templates.

  1. If necessary, open your Land Use Change in Samut Songkhram, Thailand web map.
  2. On the ribbon above the map, click Share.

    Share button

  3. In the Share window, check the box to share the map with everyone. You may also choose to share your app with only your organization.

    Share window

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

  4. 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. You can use the scroll bar to review the full gallery, or you can filter the apps with the tabs on the left or the search box at the top.

    You want your map and time animation to be the primary focus of your app, so you'll choose an app that is time-aware. Since you're only showing imagery, you don't need to show a legend or pop-up information.

  5. In the search box, type time. Click the Time Aware app to read its description.

    Time Aware app

    Note:

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

    The description explains that the Time Aware app "presents an interactive view of time-enabled layers." The functionality of this app seems perfect for your data, so you'll choose this one.

  6. Click Create Web App.
  7. In the Create a New Web App window, accept the default title, tags, and folder.
  8. For the summary, type This application shows the patterns of land-use change in Samut Songkhram, Thailand, over the last 40 years.

    Create a New Web App window

    It's okay if the app has the same title as the map because the two items are different types of content. By default, the app is given the same sharing properties as the map.

  9. Click Done.

    Configure window

    The app opens in its configurable state.

Configure the app

Next, you'll change elements of the app's presentation to better communicate the map's meaning. You'll also add a logo and a link to your organization's website in case users want to learn more. There are several tabs in the Configure window. You'll configure settings on the following tabs:

  • General: Choose the web map you want in your app, define the title, and add a supporting dialog box.
  • Theme: Define the color scheme and add a logo and URL. Define the time slider color scheme and time control location.
  • Options: Choose whether to include a legend, zoom controls, scale bar, and share dialog box.
  • Time Settings: Define settings for time behavior and time sliders. Specify the format for the date and time display with the option to customize.
  • Search: Enable location and attribute search tools.

  1. On the General tab, uncheck the Display about dialog box.
  2. Click the Theme tab.

    The Theme tab allows you to change the color schemes and add a logo and a link. You'll add your charity's logo, shown below, to clearly connect your app to your organization.

    Charity's logo

  3. For Logo image URL, paste the following URL:

    http://esripressbooks.maps.arcgis.com/sharing/rest/content/items/61972ff7609f4666913f1846944f53a1/data

    You're also able to add a link to your charity's website, so that when users click the logo they are directed to a site where they can learn more about your organization's goals and programs. For the purposes of this project, you'll leave this blank.

  4. At the bottom of the Configure window, click Save to save your configuration and preview the app.

    Save

    Your custom logo is added and the About button no longer appears.

    App preview

    In the next section, you can set the location and color scheme of the time slider.

  5. Change Time control location to Bottom right, and accept the default color scheme.
  6. Click the Options tab.

    The map displays only satellite imagery and does not contain any symbology, so the map doesn't require a legend.

  7. Uncheck the Legend box.

    Web app options

  8. Click the Time Settings tab.

    This tab contains a number of options for customizing your time-aware app. The first three boxes control the time behavior in the app. You want users to be able to see the year and control the time animation themselves.

  9. Check the Display time box, if necessary. Leave the Loop time continuously and Automatically play slider boxes unchecked.

    The next box controls the display on the time slider. Choosing to update the time display immediately can slow performance for large datasets, but your dataset is small.

  10. Check the Update time immediately box, if necessary.

    The slider control and navigation options allow you to customize the time slider interface. You can choose to hide the time slider, show navigation buttons, and add tick marks to the slider. You want the audience to see the time slider and to be able to navigate it. Tick marks can be helpful for visualizing the time milestones when controlling the time slider.

  11. Check the Show navigation buttons, Add tick marks to slider, and Playback Speed Button boxes.

    Time slider controls

    In the Date/Time Format section, you can define how the date and time format appears in your app. Your map emphasizes a large time frame and the important information is the year that the imagery was captured.

  12. Change the predefined date format to show only the year. You may also choose to customize your date format.

    Date and time format

  13. Click the Search tab. (You may need to click the right arrow to show more tabs.)
  14. Uncheck the Enable search tool box.

    The search tool allows your audience to search for addresses or other locations. Your map is about this particular study area, so you do not want your audience to navigate away.

  15. Click Save to save your configuration and preview the app.
  16. Click the Play/Pause button to run the animation, or click the forward and backward navigation tool to compare the images.
  17. On the time slider, click between the two slider handles and drag right and left to move more seamlessly between the images for the other time periods.

    Move time slider

  18. At the bottom of the window, click Close.

    When you close your app, you are automatically taken to the item page. Before sharing your application, you should add metadata about your app. Metadata allows users to learn more about your map, such as data sources and size.

Edit the item details

The item page allows you to provide supporting information about your app, control the sharing options, delete or move the application, change owners, track usage, and attach code for embedding in websites, and you can also access the app configuration tools from here. You're going to add information about your app so that users who find your app can learn more about its context.

  1. For Description, click Edit, and type the following description:

    Uncontrolled growth of shrimp farms in the 1980s resulted in the decimation of valuable mangrove ecosystems. In the early 1990s, laws and regulations were implemented which slowed the destruction of the remaining healthy vegetation along the coast. In recent years, some areas have had success with restoration efforts. These areas should be the focus of continued conservation education and monitoring practices.

  2. Click Save.
  3. For Terms of Use, click Edit, and type None. Click Save.
  4. For Credits (Attribution), click Edit, and type USGS, Landsat NASA. Click Save.

In these lessons, you created a map with Landsat imagery and enabled time to view the layer's large stores of chronological data. Then, you filtered the layer to display only four key images to show land-use change patterns in Samut Songkhram, Thailand, over the last 40 years. Lastly, you shared your map as a web app and configured it to the needs of your organization. The app can be shared by email or social media and can also be embedded in your organization's website.

A similar map can be made for any region in the world using the Multispectral Landsat layer. Experiment with other band combinations to enhance the features important to your study. The time animation tools are essential to representing historical imagery, while the filter function allows you to sift through thousands of images captured by NASA satellites.

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