Watch for changes

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

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 .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.

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

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 view's stationary property for becoming true.
watchUtils.whenTrue(view, "stationary", function() {
  // Get the new center of the view only when view is stationary.
  if (view.center) {
    var 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) {
    var 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.