This sample shows how to use a FeatureEffect and a map component's highlights property to emphasize features in a FeatureLayerView. It also shows how to select the corresponding rows in a FeatureTable. When the user draws one or more rectangles on the map, the features are highlighted and the matching rows are selected simultaneously.
When the app loads, the map component's highlights property is set as shown below.
// set the highlights collection. Change the colors of the two default highlight option objects
arcgisMap.highlights = [
{ name: "default", color: "#17CBE8" }, // used by feature table and popup
{ name: "temporary", color: "magenta" } // used when user mouse the pointer over table cells
];
When the user completes a rectangle on the map, the SketchViewModel's create event is triggered. After the rectangle is created, we query for features that intersect it and highlight the matching features in the FeatureTable by setting the highlightIds property.
// This function is called when the user completes drawing a rectangle on the map.
// It queries features that intersect the rectangle and sets the highlightIds
// of the feature table component to match the objectIds of features of the query result
async function selectFeatures(geometry, layerView) {
try {
const query = { geometry };
const result = await layerView.queryFeatures(query);
if (result.features.length === 0) {
clearSelection();
} else {
arcgisFeatureTable.highlightIds.removeAll();
arcgisFeatureTable.filterGeometry = geometry;
const highlightIds = result.features.map((feature) => feature.attributes.ObjectId);
arcgisFeatureTable.highlightIds.addMany(highlightIds);
}
} catch (error) {
console.error("Error selecting features:", error);
}
}
Changing the selection in the feature table updates the features displayed on the map accordingly. Setting the highlightIds of the feature table triggers the arcgisSelectionChange event on the feature table component. In response, the corresponding features are highlighted on the map by calling the highlight method on the feature layer view. Additionally, feature effects are applied to any features that fall outside the rectangle.
// detect changes in the feature table selection
// apply feature effect to the layer view based on selected objectIds
arcgisFeatureTable.addEventListener("arcgisSelectionChange", (event) => {
event.detail.removed.forEach((item) => {
const data = features.find((data) => data === item);
if (data) {
features.splice(features.indexOf(data), 1);
}
});
event.detail.added.forEach((item) => {
features.push(item);
});
layerView.featureEffect = {
filter: { objectIds: features },
excludedEffect: "blur(5px) grayscale(90%) opacity(40%)"
};
});
If the user draws additional rectangles, the app uses the unionOperator to merge the rectangles and uses the resulting merged geometry for the query.