Highlight features by geometry

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

This sample shows how to highlight features in a CSVLayer on the client side. Graphics that intersect a polygon drawn on the view using the SketchViewModel are highlighted and the view zooms to the selection. It also displays the attributes of selected graphics in an OnDemandGrid. Users then can click on a row in the OnDemandGrid and the corresponding hurricane feature will be selected on the view.

sketchViewModel.on("create-complete", function (event) {
  // query features that intersect this polygon
  selectFeatures(event.geometry);
});

function selectFeatures(geometry) {
  view.graphics.removeAll();
  if (csvLayerView) {
    // create a query and set its geometry parameter to the
    // polygon that was drawn on the view
    var query = {
      geometry: geometry,
      outFields: ["*"]
    };

    // query graphics from the csv layer view. Geometry set for the query
    // can be polygon for point features and only intersecting geometries are returned
    csvLayerView.queryFeatures(query).then(function (graphics) {
        // remove existing highlighted features
        if (highlight) {
          highlight.remove();
        }

        // highlight query results
        highlight = csvLayerView.highlight(graphics);

        // get the attributes to display in the grid
        var data = graphics.map(function (feature, i) {
          return Object.keys(feature.attributes)
            .filter(function (key) {
              // get fields that exist in the grid
              return (gridFields.indexOf(key) !== -1);
            })
            // need to create key value pairs from the feature
            // attributes so that info can be displayed in the grid
            .reduce((obj, key) => {
              obj[key] = feature.attributes[key];
              return obj;
            }, {});
        });

        // set the datastore for the grid using the
        // attributes we got for the query results
        dataStore.objectStore.data = data;
        grid.set("collection", dataStore);
      })
      .catch(errorCallback);
  }
}