Apply drop-shadow effects to layerview | Sample | ArcGIS Maps SDK for JavaScript

This sample demonstrates how a scale dependent drop-shadow feature effect set on a FeatureLayerView can be used to highlight counties where the winning party in a presidential election flipped from the previous election.

This map has two feature layers that show the winning parties by county in the 2012 and 2016 presidential elections. References to those layers and their layer views are set once the map component is ready. Once each layer view is initialized, we set a scale dependent feature effect on each one to highlight the counties where the winning party flipped for the presidential election that year.

Selecting a year from the upper corner of the map toggles between the 2012 and 2016 election layers and updates the party switch statistics shown in the map.

// get 2012 and 2016 election layers when the view is initialized
// setup feature effects on the corresponding layer views
// 2016 election layer
const layer16 = viewElement.map.layers.items[0];
const layer16View = await viewElement.whenLayerView(layer16);
applyFilter(layer16View, "F2012_to_2016_Party_Switch");

// 2012 election layer
const layer12 = viewElement.map.layers.items[1];
const layer12View = await viewElement.whenLayerView(layer12);
applyFilter(layer12View, "F2008_to_2012_Party_Switch");

// apply a scale dependent drop-shadow effect to counties where
// the winning party changed from the previous election
function applyFilter(layerView, field) {
  const featureFilter = {
    where: `${field}='R' OR ${field}='D'`,
  };
  // set scale dependent drop-shadow effects on election results featurelayers
  layerView.featureEffect = {
    filter: featureFilter,
    includedEffect: [
      {
        scale: 36978595,
        value: "drop-shadow(3px, 3px, 4px)",
      },
      {
        scale: 18489297,
        value: "drop-shadow(2px, 2px, 3px)",
      },
      {
        scale: 4622324,
        value: "drop-shadow(1px, 1px, 2px)",
      },
    ],
  };
}

<!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 drop-shadow effects to layerview | Sample | ArcGIS Maps SDK for JavaScript</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }

      calcite-chip[selected] {
        --calcite-color-foreground-2: var(--calcite-color-brand);
        --calcite-color-text-1: var(--calcite-color-text-inverse);
      }
    </style>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.1/"></script>
  </head>
  <body>
    <arcgis-map item-id="cc5f66590815460895fd256cc1702a4c">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <calcite-block expanded id="topbar" slot="top-right" heading="Presidential election">
        <calcite-chip-group id="yearsChip" selection-mode="single-persist">
          <calcite-chip value="2012" selected>2012</calcite-chip>
          <calcite-chip value="2016">2016</calcite-chip>
        </calcite-chip-group>
        <p id="stats"></p>
      </calcite-block>
    </arcgis-map>

    <script type="module">
      const viewElement = document.querySelector("arcgis-map");
      const statsElement = document.getElementById("stats");

      const yearsChip = document.getElementById("yearsChip");
      // chips that will toggle visibilities of two election layers
      yearsChip.addEventListener("calciteChipGroupSelect", () => {
        setLayerVisibility(yearsChip.selectedItems[0].value);
      });

      await viewElement.viewOnReady();

      // get 2012 and 2016 election layers when the view is initialized
      // setup feature effects on the corresponding layer views
      // 2016 election layer
      const layer16 = viewElement.map.layers.items[0];
      const layer16View = await viewElement.whenLayerView(layer16);
      const stat12 = "<b>Party switch</b><br/>Democrat - 12 counties <br/ >Republican - 193 counties";
      const stat16 = "<b>Party switch</b><br/>Democrat - 19 counties <br/ >Republican - 219 counties";
      applyFilter(layer16View, "F2012_to_2016_Party_Switch");

      // 2012 election layer
      const layer12 = viewElement.map.layers.items[1];
      const layer12View = await viewElement.whenLayerView(layer12);
      applyFilter(layer12View, "F2008_to_2012_Party_Switch");

      // apply a scale dependent drop-shadow effect to counties where
      // the winning party changed from the previous election
      function applyFilter(layerView, field) {
        const featureFilter = {
          where: `${field}='R' OR ${field}='D'`,
        };
        // set scale dependent drop-shadow effects on election results featurelayers
        layerView.featureEffect = {
          filter: featureFilter,
          includedEffect: [
            {
              scale: 36978595,
              value: "drop-shadow(3px, 3px, 4px)",
            },
            {
              scale: 18489297,
              value: "drop-shadow(2px, 2px, 3px)",
            },
            {
              scale: 4622324,
              value: "drop-shadow(1px, 1px, 2px)",
            },
          ],
        };
      }

      setLayerVisibility(yearsChip.selectedItems[0].value);

      function setLayerVisibility(year) {
        const showLayer12 = year === "2012";
        layer12.visible = showLayer12;
        layer16.visible = !showLayer12;
        statsElement.innerHTML = showLayer12 ? stat12 : stat16;
      }
    </script>
  </body>
</html>