Apply featureEffect to a FeatureLayer | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

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 Histogram component is used with a Slider to highlight block groups in Phoenix, AZ if they fall within the age range specified by the slider’s thumb values. As user moves the thumbs, the application updates the filter property of the layer’s featureEffect and applies the following included and excluded effects.

      // this function is called when the map is loaded
      // and 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)",
        };
      }

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <title>Apply featureEffect to a FeatureLayer | Sample | ArcGIS Maps SDK for JavaScript</title>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }

      #controls {
        padding: var(--calcite-spacing-sm);
        width: 380px;
        background-color: var(--calcite-color-background);
        color: var(--calcite-color-text-1);
      }

      #description {
        font-size: var(--calcite-font-size-lg);
      }
    </style>
  </head>

  <body class="calcite-mode-dark">
    <arcgis-map item-id="f3551252973c41fa868c08edceb504e6">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-expand slot="top-left">
        <arcgis-legend></arcgis-legend>
      </arcgis-expand>
      <div id="controls" slot="bottom-left">
        <div id="description">Phoenix Average Age (2015-2020)</div>
        <div>by block groups</div>
        <arcgis-slider range-labels-placement="end" show-range-labels>
          <arcgis-histogram
            slot="content-start"
            color-blending-enabled
            style="flex: 1"></arcgis-histogram>
        </arcgis-slider>
      </div>
    </arcgis-map>

    <script type="module">
      const histogram = await $arcgis.import("@arcgis/core/smartMapping/statistics/histogram.js");

      // get references to the map, histogram, and slider components
      const viewElement = document.querySelector("arcgis-map");
      const histogramElement = document.querySelector("arcgis-histogram");
      const sliderElement = document.querySelector("arcgis-slider");

      // define the min, max, field, and starting values for the histogram and slider
      const min = 18;
      const max = 80;
      const field = "MEDAGE_CY";
      const startingValues = [25, 35];

      // wait for the map to be ready
      await viewElement.viewOnReady();

      // get the phoenix featurelayer from the webmap
      const layer = viewElement.map.layers.getItemAt(0);
      layer.effect = null;
      // generate the histogram for the median age field
      // within the specified min and max values
      applyFeatureEffect(layer, `MEDAGE_CY BETWEEN ${startingValues[0]} AND ${startingValues[1]}`);
      // generate the histogram values for the median age field
      const histogramResponse = await histogram({
        layer: layer,
        field: field,
        numBins: 80,
        minValue: min,
        maxValue: max,
      });
      // set the histogram properties
      histogramElement.bins = histogramResponse.bins;
      histogramElement.min = min;
      histogramElement.max = max;
      histogramElement.colorStops = [
        {
          color: [89, 157, 212],
          minValue: startingValues[0],
          maxValue: startingValues[1],
        },
      ];
      // set the slider properties
      sliderElement.min = min;
      sliderElement.max = max;
      sliderElement.values = startingValues;

      // this function is called when the map is loaded
      // and 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 slider range
      sliderElement.addEventListener("arcgisInput", (event) => {
        const where = `MEDAGE_CY BETWEEN ${sliderElement.values[0]} AND ${sliderElement.values[1]}`;
        histogramElement.colorStops = [
          {
            color: [89, 157, 212],
            minValue: sliderElement.values[0],
            maxValue: sliderElement.values[1],
          },
        ];
        applyFeatureEffect(layer, where);
      });
    </script>
  </body>
</html>