This sample demonstrates how utilize reactive to watch the state of different data types and structures within the application.
Using reactive 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 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 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 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.