VectorTileLayer hitTest

Explore in the sandboxView live

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.

Use dark colors for code blocksCopy
// 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.

Use dark colors for code blocksCopy
// 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;
  }
});

MapView

VectorTileLayer