This sample shows how a FeatureEffect can be used to highlight features in the CSVLayerView and display the corresponding attribute information in dgrid. A polygon 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.
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
*************************************************/functionselectFeatureFromGrid(event) {
// close view popup if it is open view.popup.close();
// get the ObjectID value from the clicked rowconst row = event.rows[0];
const id = row.data.__OBJECTID;
// setup a query by specifying objectIdsconst 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 graphicconst 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);
}