VectorTileLayer hitTest

This sample shows how to use the hitTest() method on the MapView to access features in a VectorTileLayer. This is done by setting up a pointer-move event handler on the view and passing the returned x, y screen coordinates to the hitTest() method of the view, along with additional options to only include graphics from the VectorTileLayer. The method returns a promise, resolving to an array of objects containing any features retrieved from the VectorTileLayer. Subsequently, the content is generated to include contours information and is presented in a tooltip.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// Listen to MapView's pointer move event and call hittest
// Display the contours info if the hittest result
// contains contours information from vector tile layer
view.on("pointer-move", async (event) => {
  let hits;
  try {
    hits = await hitTest(event);
    if (hits) {
      let displayContent;
      for (let hit of hits) {
        displayContent = hits.map((hit) => {
          const styleLayer = layer.getStyleLayer(hit.graphic.origin.layerId);
          const mapPoint = view.toMap({x: event.x, y: event.y});
          graphic.geometry = mapPoint;

          let depressionValue;
          // check the values returned in depression attributes and assign descriptive info
          switch (hit.graphic.attributes["DEPRESSION"]) {
            case 0:
              depressionValue = "Depression status is indeterminate";
              break;
            case 1:
              depressionValue = "Depression contour";
              break;
            case 2:
              depressionValue = "Feature is a normal contour";
              break;
            default:
              depressionValue = hit.graphic.attributes["DEPRESSION"];
          }
          const content = {
            "Contour": hit.graphic.attributes["Contour"],
            "Depression": depressionValue,
            "Unit": hit.graphic.attributes["Unit"]
          }
          return content;
        });
      }
      // clean up the tooltip content to show contours info
      displayContent[0] = JSON.stringify(displayContent[0])?.replace(/[{}]/g, '');
      displayContent[0] = displayContent[0].replace(/\"/g, "").replace(/:/g, ": ");;
      displayContent[0] = displayContent[0].split(",").join("<br />")
      const screenPoint = hits.screenPoint;
      vtlTooltip.show(screenPoint, displayContent[0]);
    } else {
      vtlTooltip.hide();
    }
  } catch {}
});

The following snippet shows how the hitTest method returns label features from a VectorTileLayer.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// debounce the hittest as user moves the mouse over the map to improve performance
const hitTest = promiseUtils.debounce(async (event) => {
  // get hit test results only from the vector tile layer
  const hit = await view.hitTest(event, {include: layer});
  if (hit.results.length) {
    // check if the hit test results from the vector tile layer contains
    // results for label layers defined in styleLayerIds
    const results = hit.results.filter((result) => {
      return result.graphic;
    });
    results.screenPoint = hit.screenPoint;
    if (!results.length) {
      return null;
    }
    return results;
  } else {
    return null;
  }
});

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close