Watch for changes

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

The .then() 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.

webmap.then(function () {
  // This function will execute once the promise is resolved
  console.log("webmap loaded successfully");
})
.otherwise(function(err){
  // This function will execute if the promise is rejected
  console.log("error: ",  err);
});

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.

// Listen to the click event on the map view.
view.on("click", function(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 watchUtils.whenTrue() method. We can then check the new values for extent and center properties when the view becomes stationary.

// Watch visible property of popup to check whether the popup is visible or not.
view.popup.watch("visible", function(visible) {
  console.log("popup visible: ", visible);
});

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.