Overview map | Sample | ArcGIS Maps SDK for JavaScript

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Overview map | Sample | ArcGIS Maps SDK for JavaScript</title>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }

      #overviewDiv {
        width: 300px;
        height: 200px;
        border: 1px solid black;
      }
    </style>
  </head>

  <body>
    <arcgis-scene
      basemap="hybrid"
      ground="world-elevation"
      camera-position="8.310773,47.087139,3871"
      camera-tilt="72"
      camera-heading="203">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-navigation-toggle slot="top-left"></arcgis-navigation-toggle>
      <arcgis-compass slot="top-left"></arcgis-compass>
      <arcgis-map
        basemap="topo-vector"
        id="overviewDiv"
        slot="top-right"
        hide-attribution></arcgis-map>
    </arcgis-scene>

    <script type="module">
      (async () => {
        const [
          Extent,
          intersectionOperator,
          SpatialReference,
          Graphic,
          reactiveUtils,
          promiseUtils,
        ] = await $arcgis.import([
          "@arcgis/core/geometry/Extent.js",
          "@arcgis/core/geometry/operators/intersectionOperator.js",
          "@arcgis/core/geometry/SpatialReference.js",
          "@arcgis/core/Graphic.js",
          "@arcgis/core/core/reactiveUtils.js",
          "@arcgis/core/core/promiseUtils.js",
        ]);

        const viewSceneElement = document.querySelector("arcgis-scene");
        const viewMapElement = document.querySelector("arcgis-map");

        // Helper for extent calculation
        const webmercatorExtent = new Extent({
          xmin: -20037508.342787,
          ymin: -20037508.342787,
          xmax: 20037508.342787,
          ymax: 20037508.342787,
          spatialReference: SpatialReference.WebMercator,
        });

        const visibleAreaDebouncer = promiseUtils.debounce(async () => {
          if (viewSceneElement.stationary) {
            // Go to the visibleArea of the viewSceneElement
            // intersection is used to ensure the extent does not exceed the world extent
            const intersection = intersectionOperator.execute(
              webmercatorExtent,
              viewSceneElement.visibleArea,
            );
            await viewMapElement.goTo(intersection);
          }
        });

        viewSceneElement.viewOnReady(async () => {
          await viewMapElement.viewOnReady();
          viewMapElement.constraints.rotationEnabled = false;
          viewMapElement.view.ui.components = []; // remove the attribution from the overview map
          const visibleAreaGraphic = new Graphic({
            geometry: null,
            symbol: {
              type: "simple-fill",
              color: [0, 0, 0, 0.5],
              outline: null,
            },
          });
          viewMapElement.graphics.add(visibleAreaGraphic);

          reactiveUtils.watch(
            () => viewSceneElement.visibleArea,
            async (visibleArea) => {
              try {
                await visibleAreaDebouncer();
                visibleAreaGraphic.geometry = visibleArea;
              } catch (error) {
                // Check if the error is an AbortError
                if (error.name === "AbortError") {
                  // Ignore AbortError as it's expected behavior for debounced promises when using goTo
                  return;
                }
                // For any other errors, re-throw or log them
                console.error("Error updating visible area graphic:", error);
              }
            },
            {
              initial: true,
            },
          );
        });
      })();
    </script>
  </body>
</html>