Access features with hitTest | Sample | ArcGIS Maps SDK for JavaScript

This sample shows how to use the hittest method on the Map component to access features in a FeatureLayerView. This is done by setting up arcgisViewPointerDown and arcgisViewPointerMove event handlers on the map component and passing the returned screen x, y coordinates from the event payload to the hitTest() method of the map component. Additional options are provided to only include graphics from the FeatureLayerView. A promise is returned, which resolves to an array of objects containing any features from the FeatureLayerView. If a feature is returned, then the sample displays an information pertaining to this feature. It also highlights all features belonging to the same hurricane as the feature returned from the hitTest.

// Set up an event handler for pointer-down (mobile) and pointer-move events
// and retrieve the screen x, y coordinates
viewElement.addEventListener("arcgisViewPointerDown", eventHandler);
viewElement.addEventListener("arcgisViewPointerMove", eventHandler);

async function eventHandler(event) {
  // only include graphics from hurricanes layer in the hitTest
  const opts = {
    include: layer,
  };
  // the hitTest() checks to see if any graphics from the hurricanesLayer
  // intersect the x, y coordinates of the pointer
  const response = await viewElement.hitTest(event.detail, opts);
  if (!response.results.length) {
    // no results returned from hittest, remove previous highlights
    highlight?.remove();
    document.getElementById("info").innerHTML = setupHurricaneInfoDiv({
      NAME: "",
      CAT: "",
      WIND_KTS: "",
    });
    return;
  }

  // the topmost graphic from the hurricanes layer and display attribute
  // values from the graphic to the user
  const graphic = response.results[0].graphic;

  const attributes = graphic.attributes;
  const year = attributes.YEAR;
  const name = attributes.NAME;

  // update the hurricanes info div
  document.getElementById("info").innerHTML = setupHurricaneInfoDiv(attributes);

  // highlight all features belonging to the same hurricane as the feature
  // returned from the hitTest
  const query = layerView.createQuery();
  query.where = `YEAR = ${year} AND NAME = '${name}'`;
  layerView.queryObjectIds(query).then((ids) => {
    highlight?.remove();
    highlight = layerView.highlight(ids);
    currentYear = year;
    currentName = name;
  });
}

The sample displays hurricane paths. Click any line segment to view some of its attributes and assign the same symbol to all line segments with the same storm name.