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

Unsupported browser

You are using a browser that is not supported. JavaScript API works on the latest versions of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. Use one of these browsers and provide your feedback through GeoNet, the Esri Community.

  • {i18n.unsupportedBrowser.chrome}
  • Firefox
  • Safari
  • undefined
Loading...

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);
}

Sample search results

TitleSample
Loading...