Apply drop-shadow effects to layerview

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 webmap is loaded. 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// get 2012 and 2016 election layers when the view is initialized
// setup feature effects on the corresponding layer views
view.when().then(() => {
  // 2016 election layer
  const layer16 = webmap.layers.items[0];
  view.whenLayerView(layer16).then( (lv) => {
    applyFilter(lv, "F2012_to_2016_Party_Switch");
  });

  // 2012 election layer
  const layer12 = webmap.layers.items[1];
  view.whenLayerView(layer12).then( (lv) => {
    applyFilter(lv, "F2008_to_2012_Party_Switch");
  });

  // this function is called when layerViews are loaded
  // for 2012 and 2016 election results layers and called
  // once to set up the effects on the layer views to set
  // drop-shadow effect on counties where the winning parties
  // 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)"
        }
      ]
    };
  }
});

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close