Apply effects to features

Explore in the sandboxView live

This sample demonstrates how you can use spatial relationships to discover how features are spatially related to each other. It sets an effect on layers to show the features meet the spatial filter while graying out the features that do not meet the spatial filter. This can be done by creating a new FeatureEffect and specifying its filter and excludedEffect properties. The effect object can then be applied to the layer view's effect property.

How it works

Once the application loads, user can select:

  • Layer - to set a spatial filter on
  • Predefined geometry - to see how features from the layer are spatially related to this geometry
  • Spatial relationship - to specify type of spatial relationship you want to see between the geometries
  • Distance - to create a buffer around the predefined geometry and use the buffer to do spatial filter
  • Unit - specifies the distance unit to apply to the buffer

The layer will be updated as user makes selections to show features that are included in the spatial filter while dimming out the features that are excluded from the spatial filter.

// set the geometry filter on the visible FeatureLayerView
function updateFilter() {
  featureFilter = {
    // autocasts to FeatureFilter
    geometry: filterGeometry,
    spatialRelationship: geometryRel,
    distance: distance,
    units: unit
  // set effect on excluded features
  // make them gray and transparent
  if (featureLayerView) {
    featureLayerView.effect = {
      filter: featureFilter,
      excludedEffect: "grayscale(100%) opacity(30%)"