Watch for changes in components

This sample demonstrates how to watch for changes in your map components application by listening to events and watching attributes. The sample prints messages to the output message div as changes happen in the application.

Listen for component ready

The sample shows how to listen for the arcgisViewReadyChange event. This is typically used as an indicator that you can start interacting with the application.

1
2
3
4
5
6
7
8
9
10
// Listen for when the component is ready
arcgisMap.addEventListener("arcgisViewReadyChange", (event) => {
  const { zoom } = event.target;
  let message = `<br><span>arcgisViewReadyChange:</span> initial zoom is ${zoom}`;
  displayMessage(message);

  const { portalItem } = event.target.map;
  message = `<br><span>arcgisViewReadyChange:</span> WebMap title is ${portalItem?.title}`;
  displayMessage(message);
});

Listen for property changes

This code snippet shows the pattern for listening for changes to the component's properties via the arcgisViewChange event. The event fires whenever there is a change to any of the properties, for example, zoom, basemap, and center. The event callback returns the current values for all of the map component's properties, even ones that didn't change. For example, if the zoom level changes, the basemap value will stay the same.

1
2
3
4
5
6
7
// Listen for property changes after the component has been loaded.
arcgisMap.addEventListener("arcgisViewChange", async (event) => {
  const { zoom, basemap } = event.target;
  const message = `<br><span>arcgisViewChange:</span>
    zoom has changed to ${zoom} and basemap is ${basemap?.title}`;
  displayMessage(message);
});

Watch for attribute changes

You can also watch for changes to the map's attributes when they are reflected on a DOM element, by using a mutation observer. For example, when you zoom in and out, the mutation observer will report changes to the map component's updating property.

To verify if an attribute is reflected, check the Component Reference under the Properties tab. Objects and arrays are always set as properties and can't be watched with a mutation observer; they require an event listener.

1
2
3
4
5
6
7
8
9
10
11
12
13
// Initialize the mutation observer
const observer = new MutationObserver((mutations, observer) => {
  for (let mutation of mutations) {
    const message = `<br><span>MutationObserver:</span> ${mutation.attributeName} has changed to
      ${mutation.target[mutation.attributeName]}`;
    displayMessage(message);
  }
});

// Start observing the map's attributes
observer.observe(arcgisMap, {
  attributeFilter: ["updating"]
});

For more information, see the Watch for changes in web components guide topic.