You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.
Skip To ContentArcGIS for DevelopersSign In Dashboard
Loading...

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample demonstrates how to query related features from a FeatureLayer by using the queryRelatedFeatures() method. Each hexagon on the map represents one or more major cities in the U.S. Clicking on a hexagon will trigger a query for its related features, which will be displayed in a table added to the view's UI.

How it works

A function calls queryObjectIds() whenever the user clicks on the map, which returns the objectId of the corresponding hexagon in the layer.

layer.queryObjectIds({
  geometry: point,
  spatialRelationship: "intersects",
  returnGeometry: false,
  outFields: ["*"]
})

We highlight the hexagon, then use the queryRelatedFeatures() method to query for the related features attached to this object id.

return layer.queryRelatedFeatures({
  outFields: ["NAME", "SUM_POPULATION"],
  relationshipId: layer.relationships[0].id,
  objectIds: objectIds
});

We get the attributes from the resulting FeatureSet and create a dgrid component that can hold the resulting data.

  // get the attributes of the FeatureSet
  const rows = relatedFeatureSet.features.map(function(feature) {
    return feature.attributes;
  });
  if (!rows.length) { return; }

  // create a new div for the grid of related features
  // append to queryResults div inside of the Feature widget
  const gridDiv = document.createElement("div")
  const results = document.getElementById("queryResults");
  results.appendChild(gridDiv);

  // destroy current grid if exists
  if (grid) {
    grid.destroy();
  }
  // create the grid to hold the results of the query
  grid = new Grid({
    columns: Object.keys(rows[0]).map(function(fieldName) {
      return {
        label: fieldName,
        field: fieldName,
        sortable: true
      };
    })
  }, gridDiv);
  // add the data to the grid
  grid.renderArray(rows);

Sample search results

TitleSample
Loading...