This sample demonstrates how to apply a featureEffect to an instance of a FeatureLayer. FeatureEffect is used to draw attention features of interest by highlighting the features that meet the filter requirements or by dimming the features that do not meet the filter requirements.
In this sample, a HistogramRangeSlider is used to highlight block groups in Phoenix, AZ if they fall within the age range specified by the HistogramRangeSlider's thumb values. As user moves the HistogramRangeSlider thumbs, the application updates the filter property of the layer's feature
and applies the following included and excluded effects.
// this function is called when the map is loaded
// then when user changes the histogram range slider thumbs
function applyFeatureEffect(layer, where){
layer.featureEffect = {
filter: {
where
},
includedEffect: "bloom(0.9 0.6pt 0)",
excludedEffect: "blur(2.25pt) opacity(0.5)"
};
}
// apply a feature effect to highlight the block groups that
// fall within the age range
slider.on(["thumb-change", "thumb-drag", "segment-drag"], (event) => {
const layer = map.layers.getItemAt(0);
applyFeatureEffect(layer, slider.generateWhereClause(field))
});