This sample demonstrates area-based hit testing in 2D using the screenRectangle hitTarget, introduced at 5.1 for MapView and the map component. Instead of testing a single screen point, the sample uses a rectangle on the screen to find all intersecting features from a FeatureLayer.

As you pan or zoom, the sample re-runs the hit test for the rectangle, highlights intersecting features, and lists them in a side panel. Selecting an item in the list highlights that feature and opens its popup. This provides a high-level pattern for workflows such as area inspection and drag-to-select interactions.

How it works

The map displays a FeatureLayer for Population Change 2010-2023 by Tracts. A fixed rectangle in the center of the screen is used as the hitTarget for hitTest().

Whenever the view becomes stationary after panning or zooming, the app runs hitTest() with that screen rectangle to find intersecting tracts. Matching features are highlighted in the map and listed in the side panel. Clicking a tract in the calcite-list highlights the corresponding tract with FeatureLayerView.highlight() and opens its popup.

The following snippet shows the runRectHitTest() function. It is called once after the layer view is ready, and then called again each time the arcgisViewChange event indicates the view is stationary.

1
      // Runs area-based hit testing using the rectangle overlay and syncs map/list UI state.
2
      async function runRectHitTest() {
3
        const rect = document.getElementById("rect").getBoundingClientRect();
4
        // Use screen rectangle as the hit target to find all intersecting features in view.
5
        const hit = await viewElement.hitTest(rect, { include: [layer] });
6
        const graphics = hit.results.filter((result) => result.graphic).map((result) => result.graphic);
7
        currentHitGraphics = graphics;
8

9
        hitHighlight?.remove();
10

11
        if (graphics.length > 0) {
12
          hitHighlight = layerView.highlight(graphics);
13
        }
14

15
        renderHitFeatureList(graphics);
16

17
        if (featurePanelElement) {
18
          featurePanelElement.description = `Tracts in focus: ${graphics.length}`;
19
        }
20
      }