Watch for changes

This sample demonstrates how to watch for the changes that are happening in your application by listening to events and watching property changes. It prints messages to the output message div as changes happen in the application.

The .when() method is called on the WebMap and the View once instances of these classes are created. This method takes two input parameters: a callback function and an errback function. The callback function is called when the instances of the WebMap and View are loaded. The errback executes if the promise fails and error will be printed to output message div.

1
2
3
4
5
6
7
8
webmap
  .when(() => {
    // This function will execute once the promise is resolved
    displayMessage(
      `<span> webmap.when </span> - web map loaded successfully`
    );
  })
  .catch(errorHandler);

The sample also shows how to listen to events. It listens to the change event on the map's allLayers property. In this case, we only track when layers are added to the map. It also listens to the layerview-create event on the view to get notified when each layer in the map has a corresponding LayerView and is rendered in the view. Lastly, we listen to the click event on the view.

1
2
3
4
// Listen to the click event on the map view.
view.on("click", (event) => {
  console.log("click event: ", event.mapPoint);
});

The sample shows how to watch for property changes. It watches the stationary property of the view when its value becomes true using reactiveUtils.when() method. We can then check the new values for extent and center properties when the view becomes stationary.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// Watch view's stationary property for becoming true.
reactiveUtils.when(() => view.stationary === true, () => {
  // Get the new center of the view only when view is stationary.
  if (view.center) {
    const info =
    `<br> <span> the view center changed. </span>
    x: ${view.center.x.toFixed(2)}
    y: ${view.center.y.toFixed(2)}`;
    displayMessage(info);
  }
  // Get the new extent of the view only when view is stationary.
  if (view.extent) {
    const info =
      `<br> <span> the view extent changed: </span>
      <br> xmin: ${view.extent.xmin.toFixed(2)}
      xmax: ${view.extent.xmax.toFixed(2)}
      <br> ymin: ${view.extent.ymin.toFixed(2)}
      ymax: ${view.extent.ymax.toFixed(2)}`;
      displayMessage(info);
  }
});

This map shows the change in water usage in Atascadero, CA from 2013 to 2014. Parcels that increased their consumption of water are show in blue, while those that decreased are shown in brown. The symbol size represents the quantity of increase, or decrease, in thousands of gallons.