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.

Use dark colors for code blocksCopy
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.

Use dark colors for code blocksCopy
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.

Use dark colors for code blocksCopy
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.