Depict land use change with time animation

Note:

This tutorial will be retired January 30, 2025. We apologize for any inconvenience this may cause. You may view an archived version of this tutorial here.

Landsat satellite imagery has become a living photo album of the Earth's surface since the program launched its first rocket on July 23, 1972. Originally named Project EROS (Earth Resources Observation Satellites), Landsat has since collected millions of images as new rockets were launched and camera technology improved. In this tutorial, you're a GIS analyst finding snapshots among Landsat's archives showing mangroves in Thailand's coastal Samut Songkhram province succumbing to shrimp farming. You'll build a web app using ArcGIS Web AppBuilder, Landsat imagery, and add a time slider widget so that users can easily visualize changes in mangroves over the last few decades and identify areas in need of restoration.

This tutorial was last tested on July 28, 2023.

View final result

Requirements

• ArcGIS organizational account with a Publisher, Facilitator, or Administrator role (see options for software access)

Retrieve historical imagery

First, you'll locate the area of interest (Samut Songkhram province, Thailand) and add Landsat satellite imagery from ArcGIS Living Atlas of the World. NASA's Landsat satellites have been taking pictures of the planet for almost 50 years. As satellite imaging technology has improved, so have the quality and types of data collected. This massive archive of images has been compressed into one data layer that can be viewed on ArcGIS Online.

Locate the study area

You'll locate Samut Songkhram province on a map in ArcGIS Online.

1. Sign in to your ArcGIS organizational account.

   Note:

   If you don't have an organizational account, see options for software access.

2. On the ribbon, click Map.

   Note:

   Depending on your organizational and user settings, you may have opened Map Viewer. ArcGIS Online offers two map viewers for viewing, using, and creating maps. For more information on the map viewers available and which to use, please see this FAQ.

   This tutorial uses Map Viewer Classic.

3. In the search box to the upper right of the map, type Samut Songkhram, THA and press Enter.

   The map changes to show Samut Songkhram city. A pop-up automatically appears and confirms the location.

   

4. Close the pop-up. In the map, use the zoom tools and click the Zoom Out button one time to display the whole province of Samut Songkhram.

   

   The map displays the whole province of Samut Songhram.

   

   Next, you will change the basemap so that labels show and add satellite imagery from the ArcGIS Living Atlas.

Add multispectral Landsat data

Every map starts with a basemap, which provides geographic context for the data you want to display on the map. You'll change the basemap so you can show the extent of Samut Songkhram province with labels, while also showing the imagery. You will find the imagery layers by searching the Living Atlas. ArcGIS Living Atlas is a masterfully assembled collection of authoritative, ready-to-use global geographic information. The themed and publicly shared content in ArcGIS Living Atlas can be accessed using ArcGIS Online map tools. Next, you'll change the basemap and add ArcGIS Living Atlas data to your map.

1. On the ribbon, click Basemap and choose Light Gray Canvas.

   

2. On the ribbon, click Add and click Browse Living Atlas Layers.

   

   The Living Atlas pane appears.

3. In the Living Atlas pane, in Search for layers, type Multispectral and press Enter.

   The search results display layers with the word multispectral in their name. Among the search results is the Multispectral Landsat layer.

4. Add the Multispectral Landsat layer to the map.

   

   The layer is added to the map and the name of the layer is added to the Contents pane.

5. Click the Back button to close the Living Atlas pane.

   

   You can see both the imagery and the basemap labels, which help provide context and orientation.

   

   By default, there is a filter that limits the imagery displayed in the Multispectral Landsat layer to very recent captures. You'll remove that default filter to have access to all available imagery since the 1970’s.

6. In the Contents pane, point to the Multispectral Landsat layer to display its options. Click Filter.

   

7. Click Remove Filter.

   

   No visible changes happen in the map when you remove the filter, but by removing the filter, you will have access to all imagery since the 1970's, which you will use to help visualize land use changes over time.

Save the map

Next, you'll save your map and give it metadata.

1. On the ribbon, click the Save button and click Save.

   

2. For the title, type Land Use Change in Samut Songkhram, Thailand.
3. For the tags, type the following words and press Enter after each one:

   • Thailand
   • Historical
   • Imagery

4. For the summary, type This map is a collection of images showing four decades of vegetation change in Samut Songkhram, Thailand.

   

5. Click Save Map.

   The map is saved with the specified title, tags, and summary. As you work, it is good practice to save map frequently to ensure you don't lose any progress.

You've created a map that will serve as a foundation for your presentation on land-use change in the province of Samut Songkhram, Thailand. Next, you'll delve into the historical collection of the Multispectral Landsat layer and create a time animation to show certain images in chronological order.

Show imagery over time

The imagery layer that you added to the map contains all the images captured by the Landsat satellites since the program began. As such, the layer can be time-enabled and filtered to select out and display only the images you need for your animation.

Next, you'll enable the time capabilities of the Multispectral Landsat layer. Then, you'll configure a time animation to show historical images at an appropriate speed. You'll filter the dataset to use only specific, relevant, and high-quality images in your animation. It will also be important to select images from approximately the same time of year (within a three-month period) to accommodate seasonal changes in moisture and vegetation health. Finally, you'll emphasize vegetation in the imagery by changing its spectral bands to color infrared. Doing so will make the distinction between types of land use more apparent to your audience. Then you'll identify a region of Samut Songkhram that has experienced significant land-use change for your web app.

Enable time animation

First, you'll enable the time function for the layer. Enabling time on the layer allows you to search through 40 years of satellite imagery for your study area.

1. In the Contents pane, point to the Multispectral Landsat layer. Click the More Options button and choose Enable Time Animation.

   

   The time animation toolbar appears at the bottom of the map window. The map also changes to show only imagery within the first date range on the timeline: July 24, 1972, to July 24, 1977. Your map viewer turns a color, such as white or blue, because of an error in capturing the first image of this area.

   

   The Landsat program began in 1972, and early Landsat imagery can often be of poor quality or, in this case, show only blank tiles. Later, you'll filter this and other problematic images out of the dataset so only high-quality images are shown. First, you'll look at all of the images to see which ones might be useful for your presentation.

2. On the time animation toolbar, click the Play/Pause button.

   

   The timeline plays, cycling through all available images in chronological order.

   

   You can see the differences in the images over time. The speed at which the animation progresses is not ideal for observing changes, so you'll change the default settings of the time animation tool to lower the playback speed.

   Note:

   Some images may not load before the timeline continues to the next image. You may need to play the animation more than once to see all of the images.

3. When you are finished watching the time animation, click the Play/Pause button again to pause the animation.

   Next, you'll configure the time animation tool to display images at a more optimal rate.

Configure the time animation tool

In this section, you will change the default settings in the time animation toolbar to play the animation at an appropriate speed, and to display images by decades to start building your presentation.

1. On the time animation toolbar, click the Configure button.

   

   The Time Settings window appears. This window allows you to change the playback speed of the timeline so that more or less time will pass before the timeline jumps to the next image.

2. In the Time Settings window, adjust the playback speed to the slowest setting and click OK.

   

3. Play the time slider again.

   While the time animation plays more slowly, sometimes the imagery changes even when the time slider does not. The time slider is currently divided into five-year intervals, and it's possible for more than one image to have been taken during these intervals. You'll lower the display interval to show only one image per tick of the timeline. Doing so will cause the time animation to take much longer to span the entire chronology of Landsat imagery, so you'll also narrow the time encompassed by the timeline to show only imagery between 1972 and 1980. Later, you'll look at imagery from the other decades. This way, you can look at the imagery in more manageable 10-year time periods and also choose the best image from each decade to include in your presentation.

4. Pause the animation.
5. Click the Configure button. In the Time Settings window, click Show advanced options.

   The advanced settings give you the option of customizing the time span and display intervals of the animation.

6. Under Time Span, for Start Time, change it to 7/24/1972 12:00 AM and for End Time, change it to 1/1/1980 12:00 AM.
7. Under Time Display, for Length of one time interval, for Count, type 1. Verify that Units is set to Year.

   

8. Click OK. Play the time animation again.

   Tip:

   You can also use the Previous and Next buttons to the right of the timeline to switch between the imagery.

   Most of the years between 1972 and 1980 have no imagery or imagery of too low quality to use. In 1978, however, the Landsat program captured a usable image of your study area:

   

   You'll use this image in your presentation to show land use during the 1970s. Later, you'll filter the Landsat dataset to include only this layer, as well as a few others. To do that, you'll need to know the layer's acquisition date, or the date the image was captured by the satellite.

9. Click the image in the map window to open a pop-up for the image.

   

   The acquisition date for this image was December 15, 1978. You'll use this date in the next section when you filter the dataset. First, you'll repeat the process for the 1980s, 1990s, and 2000s to find an image for each decade to use in your presentation. You will also do a search from 2010 until present day to find the most recent high-quality image.

10. On a piece of paper or text editor on your computer, prepare a table similar to the example below. You will use this table to record the date for each image in the specified decade.

    Decade	Date
    1970s	12/15/1978
    1980s
    1990s
    2000s
    Most recent

    Note:

    Remember to select images from the same time of year (within a three-month period). Seasonal differences in rainfall can affect the appearance of vegetation health.

11. Click the Configure button again to open the Time Settings window, and click Show advanced options.
12. Under Time Span, for End Time, change it to 1/1/1990 12:00 AM and for Start Time, change it to 1/1/1980 12:00 AM.
13. Optionally, you can adjust the playback speed to your preference.

    

14. Click OK. Play the time animation again. Remember to play the animation more than once for the images to appear properly.

    Tip:

    After playing the animation once or twice, using the Previous and Next buttons can make it easier to assess the image quality and cloud cover.

    The Landsat program did not capture an image for your study area during the 1980s. In your presentation, this decade will appear blank. Fortunately, there are good-quality images in the next three decades.

15. Repeat the process of configuring the time settings to view the imagery for the 1990s and 2000s and the most recent high-quality images. When you find an image for each time period, remember to click within the study area and record the date in your table. Use the following time settings for each decade:

    Note:

    Steps are to click Configure, click Show advanced options, change End Time to specified date, change Start Time to specified date, and click OK. Play the animation, click the image to open pop-up.

    • 1990s
      • Start time: 1/1/1990 12:00 AM
      • End time: 1/1/2000 12:00 AM

      

    • 2000s
      • Start time: 1/1/2000 12:00 AM
      • End time: 1/1/2010 12:00 AM

      

    • Most recent
      • Start time: 1/1/2010 12:00 AM
      • End time: <Today's date>

      

    After reviewing animations for each time period, you should have images for the following dates:

    Decade	Date
    1970s	12/15/1978
    1980s	No image
    1990s	10/24/1994
    2000s	12/14/2004
    Most recent	most current date

16. Save your map.

Filter the highest-quality images

Next, you'll filter the Multispectral Landsat layer to display only the best image from each decade.

1. In the Contents pane, point to the Multispectral Landsat layer and click the Filter button.

   

   The Filter: Multispectral Landsat window opens. This window allows you to set a filter on the data to only display parts of that data. You can build filters based on attribute values. You'll build a filter based on the Acquisition Date attribute for the different decades. To do this, you will add three more expressions and fill out the parameters.

2. Click Add another expression three times so you have a total of four expressions to work with.

   

   Now you have four expressions to build.

3. Click Display features in the layer that match all of the following expressions and choose Display features in the layer that match any of the following expressions.

   

4. For each of the filter expressions, change the first drop-down menu to Acquisition Date. Confirm that the second drop-down menu is set to is on.

   

5. For the third drop-down menu in each filter expression, type one of the four dates of the images you chose for your presentation: 12/15/1978, 10/24/1994, 12/14/2004, and <Most current date>.

   

6. Click Apply Filter.

   The filter is applied, but the images are not shown because the time animation toolbar is still configured to only show images from a small range of dates.

7. On the time animation toolbar, click the Configure button and open the advanced options.
8. Under Time Span, for Start Time, type 7/24/1972 and for End Time, type the most current date of your images to show the entire range of available dates. For Time Display, change the display interval to 10 years

   Tip:

   You can quickly set the Start Time and End Time parameters by dragging the slider handles to the respective ends of the timeline.

   

9. Click OK.
10. Click the Play/Pause button to view the images.

    Only the images for the four dates you chose when you created the filter appear. No image appears between 1982 and 1992, because there were no images for this decade. You have filtered only the images that you want. Next, you will enhance the display of the images using infrared.

Enhance the imagery with infrared

Even with only four images, it's difficult to tell how much land use has changed over time. When viewing imagery in natural color, as you are now, differences between vegetation, land, and water are not always clear. It can be especially difficult to distinguish land-use differences in earlier images, when satellites had less advanced sensors. To better see how land use has changed over time, you'll change the spectral band combinations of the imagery.

Each Landsat satellite captures red, green, and blue wavelengths of visible light to display imagery the way a human eye sees it. However, they also have sensors that capture information not normally visible. The data from these sensors can be combined into different combinations of spectral bands to emphasize different features. For example, infrared sensors show healthy vegetation as bright red and deep water as black. You'll use infrared to better show land-use change.

1. In the Contents pane, point to the Multispectral Landsat layer, click the More Options button, and choose Image Display.

   

   The Image Display pane appears, allowing you to change the band combination of the imagery.

2. For Renderer, choose Color Infrared with DRA.

   

3. Under Image Enhancement, for Stretch Type, choose Standard Deviation.

   

   Note:

   Using the stretch functions will apply different contrast settings to help accentuate clusters of values. The standard deviation setting helps to brighten the red values so that vegetation and water are more distinct.

4. Click Apply and click Close.

   The image, for July 24, 1972, now shows healthy vegetation as brighter red, and water as darker blue to black.

   

5. Play the time animation again.

   As expected, the greatest amount of vegetation loss occurs between 1978 and 1994. From 1994 to 2004, it appears that there was a dramatic decrease in land-use change, which suggests that the 1991 regulations on the aquaculture industry may have been effective in thwarting the spread of shrimp farms. After 2004, some areas even experienced a rebound, and changed from water back to vegetation. These areas are important to your organization and donors in supporting the idea that education and conservation can result in restoration.

6. Zoom to the coastal areas of Samut Songkhram. Play the animation along different sections of the coast. Take note of where you see the most reduction and rebound in healthy vegetation.

   

   The area of Samut Songkhram that has seen the most significant amount of change is in the southernmost portion of the province.

7. Play the time animation again.

   The images for the four decades display the obvious changes in vegetation for this area.

   

   As expected, the greatest amount of vegetation loss occurs between 1978 and 1994. From 1994 to 2004, it appears that there was a dramatic decrease in land-use change, which suggests that the 1991 regulations on the aquaculture industry may have been effective in thwarting the spread of shrimp farms. After 2004, some areas even experienced a rebound, changing from water back to vegetation. These areas are important to your organization and donors in supporting the idea that education and conservation can result in restoration.

   In 1978, this area appears as a solid distribution of bright red, or healthy vegetation. Playing the animation through to present day, you'll observe the mass conversion from healthy vegetation to water. Much of the change occurs between the 1978 and 1994 images, which is the result of the uncontrolled growth in the shrimp farming industry. After 1994, the decimation of healthy coastal vegetation appears to have slowed, with some areas even rebounding back from water to vegetation. This is the area that you will use for your web app because it shows potential for successful restoration efforts.

8. Save your map.

You've enabled time animation for your data. You looked at images of Samut Songkhram and chose the best image per decade. You then filtered the Landsat data to show only those images. Lastly, you changed the band combination of the imagery to emphasize vegetation and make the differences in land use clearer. Your web map now contains only relevant data for your presentation. Next, you'll create a web app from your map in order to present your findings to potential donors to your nonprofit organization.

Share your results as a web app

To share your findings publicly and with your organization, you'll create a web app based on your map. 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 want to present your map with a time slider to demonstrate the changes in land use and distribution of vegetation over four decades. To do so, you'll share your web map as a web app and enable a time-slider widget. 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 web app

To create a web app, you'll share your map as a web app.

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

   

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

   

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. If you want to create an app without a template, you can just choose Web AppBuilder.

5. In the Create a New Web App window, click Web AppBuilder

   

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

   

   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.

8. Click Get Started.

   Your web app appears, displaying imagery and many options for configuring your app.

   

   Next, you will configure the appearance of your app and later, you will add the time slider widget so those who use your app can view changes in vegetation over time.

Configure app theme and web map properties

Next, you'll change some basic appearance properties for your app by experimenting with and setting the app's theme and style. You will also set a custom default extent for your app so that it opens to the correct area of your map. There are several tabs in the Configure window. You'll configure settings on the following tabs:

• Theme: Define the color scheme and add a logo and URL. Define the time slider color scheme and time control location.
• Map: Choose web map to include in your app, set custom extents, and set refresh intervals.
• Widget: Add functionality to your app, such as a basemap selector, legend, measure tool, analysis tools, and more.

1. On the Theme tab, experiment with different themes, styles, and layouts for your app by clicking the various options.
2. When you are finished looking at different options, set the following properties for your app:
   • Theme - Billboard Theme
   • Style - choose the black color.
   • Layout - choose the first option.

   

3. In the Theme pane, click Save.

   

   Note:

   It is good practice to save often as there is no auto-save in Web AppBuilder.

4. Click the Map tab.

   In the Map tab, you can set which web map is used in your app. Because you shared your web map as a web app, it is automatically chosen as the featured web map.

   

   You could change the web map's sharing status to one of three options: private (you), your organization, or publicly (everyone). You can also set the extent so when users launch your app, it automatically zooms to a specified area. In this case, you will set the extent to the same area you explored earlier that has obvious vegetation change over time.

5. On the map, zoom and center your display to the following area:

   

6. In the Map tab, click Use current map view.

   

   Now, when a user opens your app, it will automatically display the area shown in your map. You have set the theme and the map extent for your app. Next, you will add some widgets.

Add and configure widgets

Setting the theme of your app gives it a good look and feel. Adding widgets to your app gives it functionality that compliments your data and allows users to interact with your app in a more meaningful and useful way. Next, you will add some widgets, including the time slider widget, so that users can visualize the vegetation changes over time in your app.

1. Click the Widget tab.

   

   The Billboard theme comes with some basic widgets, such as Zoom In, Zoom Out, Default Extent, My Location, and Search.

   

   You can add other widgets to enhance the functionality of your app. Some other widgets are:

   • Measurement
   • Query
   • Analysis
   • Select
   • Directions
   • Time Slider
   • Basemap Gallery

   Only add widgets that enhance your app and experience working with your data.

2. In the Widget tab, click the first empty Widget button to set it to its corresponding button in the app's interface.

   

   The Choose Widget window appears.

   

3. Scroll down and click the Time Slider widget and click OK.

   

   The Configure Time Slider window appears. Here, you will set some basic properties for the widget.

4. For Time Settings, keep the default of Honor the time settings of the web map since you configured the time settings in your web map. In the Slider Settings section, uncheck Automatically play the slider.

   

   When the app is opened, the user will have to manually play the slider, rather than have the slider play when the app opens.

5. Click OK. Save the app and click Previews.

   The preview of your app appears. From here, you can choose different devices and resolutions for the preview of your app and also interact with it as a user would.

6. In the app, click the Time Slider button.

   

   The time slider appears, starting at the date of your first image that you configured in the web map.

   

7. In the time slider, click play.

   

   The app runs through the imagery just as you had set it to in the web map. Next, you will add more widgets.

8. In the pane, click Configure to return to the Widget tab.

   

9. Next to the Time Slider widget, click the next blank widget button to add another.

   

10. In the Choose Widget window, add the Layer List widget and click OK.
11. In the same manner, add the following widgets:
    • Legend
    • Measurement
    • Basemap Gallery

    

    You have added five widgets that are useful for your app. You can always remove widgets or modify them once they are added to your app.

12. Save your app and click Launch.

    

    Your app appears in a different browser tab as a user would see it: without the configure pane open.

    

13. Click each of the widgets to test them. When you click the Basemap Gallery, choose a basemap that has labels that you can see.

    Next, you will set the item details and share your web app so that others can use it.

14. Return to the browser tab that has your web app in configure mode.
15. On the ribbon, next to the app's title, click the Shot item details button.

    

    You are automatically taken to the app's item page in ArcGIS Online. 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 credits, and use limitations. 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 will add information about your app so that users who find your app can learn more about its context.

16. For Description, click Edit, and copy and paste the following description. Click Save when finished.

    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.

17. For Terms of Use, click Edit, and type None. Click Save.
18. Scroll down and locate Credits (Attribution). Click Edit, and type USGS, Landsat NASA. Click Save.

    

19. Click Share.

    The sharing settings appear.

    

    Your app is already shared to Everyone (public) because that is how you shared your web map.

In this tutorial, 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 tutorials in the tutorial gallery.

Acknowledgements

• Multispectral Landsat: Esri, USGS, AWS , NASA. The imagery is sourced from the U.S. Geological Survey (USGS) Landsat collection on AWS and the National Aeronautics and Space Administration (NASA).