1
      let oldExtent = viewElement.extent;
2
      reactiveUtils.watch(
3
        // Track scale, extent, and movement in the view.
4
        () => [viewElement.stationary, viewElement.extent, viewElement.scale],
5
        ([stationary, extent, scale]) => {
6
          // Set the previous extent when the view is not moving.
7
          if (stationary) {
8
            oldExtent = extent;
9
            return;
10
          }
11
          // Show the last stationary extent when movement resumes.
12
          if (oldExtent === extent) showExtent(extentCells.previous, oldExtent);
13
          // Show the latest extent and scale while the view moves.
14
          showExtent(extentCells.current, extent);
15
          currentScaleLabel.textContent = roundToHundredthsPlace(scale);
16
        },
17
      );

1
      reactiveUtils.watch(
2
        // Track visibility of layers in the Collection.
3
        () => [viewElement.allLayerViews.map((layerView) => layerView.visible)],
4
        () => {
5
          let layersVisibleText = "All layers are currently visible.";
6
          visibleLayersList.textContent = "";
7
          viewElement.map.allLayers.forEach((layer) => {
8
            if (layer.visible) {
9
              const listItem = document.createElement("calcite-list-item");
10
              listItem.label = layer.title;
11
              visibleLayersList.appendChild(listItem);
12
            } else {
13
              layersVisibleText = "Not all layers are currently visible.";
14
            }
15
          });
16
          visibleLayersLabel.textContent = layersVisibleText;
17
        },
18
      );