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

This sample shows how a FeatureEffect can be used to highlight features in the CSVLayerView and display the corresponding attribute information in dgrid. A polgyon is drawn on the view using the SketchViewModel. Features that intersect a polygon remain unaffected while features that all outside of the polygon have the following excludedEffect applied to look blurry.

csvLayerView.effect = {
  filter: {
    geometry: query.geometry,
    distance: query.distance,
    units: query.units
  },
  excludedEffect: "blur(5px) grayscale(80%)"
};

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.

/************************************************
 * fires when user clicks a row in the grid
 * get the corresponding graphic and select it
 *************************************************/
function selectFeatureFromGrid(event) {
  // close view popup if it is open
  view.popup.close();
  // get the ObjectID value from the clicked row
  const row = event.rows[0];
  const id = row.data.__OBJECTID;

  // setup a query by specifying objectIds
  const query = {
    objectIds: [parseInt(id)],
    outFields: ["*"],
    returnGeometry: true
  };

  // query the csvLayerView using the query set above
  csvLayerView
    .queryFeatures(query)
    .then(function (results) {
      const graphics = results.features;
      // remove all graphics to make sure no selected graphics
      view.graphics.removeAll();

      // create a new selected graphic
      const selectedGraphic = new Graphic({
        geometry: graphics[0].geometry,
        symbol: {
          type: "simple-marker",
          style: "circle",
          color: "orange",
          size: "12px", // pixels
          outline: {
            // autocasts as new SimpleLineSymbol()
            color: [255, 255, 0],
            width: 2 // points
          }
        }
      });

      // add the selected graphic to the view
      // this graphic corresponds to the row that was clicked
      view.graphics.add(selectedGraphic);
    })
    .catch(errorCallback);
}