Property Changes with ReactiveUtils

This sample demonstrates how utilize reactiveUtils to watch the state of different data types and structures within the application. Using reactiveUtils allows for combining values from multiple sources which reduces or eliminates the need to create multiple watchers, as well as gives the ability to work directly with Collections.

The following code snippet shows how to use the watch method on the stationary and scale properties of the MapView to determine when the properties have changed and logs the new scale value to the console.

1
2
3
4
5
6
7
8
9
// Use reactiveUtils to check when the view scale changes.
// view.stationary is included so that a message is only shown
// when the view is not moving.
reactiveUtils.watch(
    () => [view.stationary, view.scale], ([stationary, scale]) => {
        if (stationary) {
            console.log(`View Scale changed to: ${scale}`);
        }
    });

The code snippet below shows how to utilize the watch method to access the current and the previous value of the view's extent once it changes and logs these values to the console.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Use reactiveUtils to check when the extent changes.
// view.stationary is included so that a message is only shown
// when the view is not moving.
let oldExtent = view.extent;
reactiveUtils.watch(
    () => [view.stationary, view.extent],
    ([stationary, extent], [wasStationary]) => {
        if (stationary) {
            console.log(`Current Extent: ${extent}`);
            console.log(`Previous Extent: ${oldExtent}`);
        } else if (wasStationary) {
            oldExtent = extent;
        }
    }
);

This code snippet below shows how to watch for a change in the allLayers property of the Map, which is a Collection, and log if the layers are visible to the console.

1
2
3
4
5
6
// Use reactiveUtils to check when a Collection has changed
reactiveUtils.watch(
    () => view.map.allLayers.every((layer) => layer.visible),
    (allVisible) => {
        console.log(`All layers are visible = ${allVisible}`)
    });

The map displays Fire Perimeters for the state of California from the Department of Forestry and Fire Protection.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close