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

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, the arcgis-slider-histogram-range component uses bins generated with the histogram() statistics function to highlight block groups in Phoenix, AZ that fall within the age range specified by its thumb values. As users move 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)",
        };
      }

common-components

arcgis-slider-histogram-range

<!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.2/"></script>

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

      #controls {
        padding: var(--calcite-space-sm);
        width: 380px;
        background-color: var(--calcite-color-surface-1);
        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-histogram-range
          range-labels-placement="center"
          value-labels-display="auto"
          show-range-labels
        ></arcgis-slider-histogram-range>
      </div>
    </arcgis-map>

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

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

      // 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
      const histogramResponse = await histogram({
        layer,
        field,
        numBins: 80,
        minValue: min,
        maxValue: max,
      });


      // 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)",
        };
      }


      // set the histogram and slider properties
      await histogramRangeSlider.updateFromHistogramResult(histogramResponse);
      histogramRangeSlider.value = startingValues.join(",");
      applyFeatureEffect(layer, await histogramRangeSlider.generateWhereClause(field));

      // apply a feature effect to highlight the block groups that
      // fall within the slider range
      histogramRangeSlider.addEventListener("arcgisInput", async () => {
        applyFeatureEffect(layer, await histogramRangeSlider.generateWhereClause(field));
      });
    </script>
  </body>
</html>