Opacity | ArcGIS Maps SDK for JavaScript

Flash flood warnings (2002 - 2012). All warning areas are given the same transparent symbol, which allows areas of more frequent flood activity to show more clearly.

What is per feature opacity?

Layers with lots of overlapping features can be effectively visualized by setting a highly transparent symbol on all features (at least 90-99 percent transparency works best). This is particularly effective for showing areas where many polygons and polylines stack on top of one another.

For example, the following map shows areas that underwent a flash flood warning over a 10-year period. Each polygon represents one flash flood warning that lasted a time span of one to 12 hours. Each is assigned a blue fill symbol with an alpha level of 0.04 (96% transparency).

opacity 0.04

Figure : Flash flood warnings visualized as highly transparent polygons. Opaque areas experienced a high number of flash flood warnings. Transparent areas experienced fewer flash flood warnings.

Areas that experienced just one flash flood warning will have an opacity value of 0.04. Areas that experienced more than one will have a higher opacity value, making it more visible.

When opacity is not set on a per feature basis, you can only distinguish areas that experienced at least one flash flood warning.

opacity full

Figure : Flash flood warnings visualized as opaque polygons. There is no visual cue indicating areas that experienced more warnings than others.

This visualization technique works whether you have all your data stored in one layer, or separated in multiple layers. Each feature’s transparency multiplies with other overlapping features in either scenario, so you can easily see where a higher density of features exist compared to areas with sparse features.

How per feature opacity works

Opacity can only be set on a feature per feature basis via the color property of the symbol representing each feature. This allows the opacity at a given pixel to multiply across overlapping features.

Note the color value in the snippet below. Each parameter represents a color channel (i.e. rgba(red, green, blue, alpha)). The alpha (i.e. opacity) value must be a very small number. Depending on the density of features, a number between 0.01 and 0.1 usually works best.

ArcGIS JS API

      layer.renderer = new SimpleRenderer({
        symbol: new SimpleFillSymbol({
          color: "rgba(0,76,115,0.04)",
          outline: null,
        }),
      });

Examples

Polygon density from one layer

The following example demonstrates how to set opacity on a feature per feature basis to effectively show the density of overlapping polygons.

Create a simple renderer.
Set a symbol in the renderer with a very small alpha value (e.g. 0.01 - 0.1) in the color property.

ArcGIS JS API


45 collapsed lines
1
<!doctype html>
2
<html>
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6
    <title>Location style - polygons</title>
7

8
    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
9
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
10
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
11

12
    <style>
13
      html,
14
      body,
15
      #viewDiv {
16
        height: 100%;
17
        margin: 0;
18
      }
19
      #titleDiv {
20
        padding: 10px;
21
      }
22

23
      #titleText {
24
        font-size: 20pt;
25
        font-weight: 60;
26
        padding-bottom: 10px;
27
      }
28
    </style>
29
    <script type="module">
30
      const [MapView, Map, FeatureLayer, SimpleRenderer, SimpleFillSymbol] = await $arcgis.import([
31
        "@arcgis/core/views/MapView.js",
32
        "@arcgis/core/Map.js",
33
        "@arcgis/core/layers/FeatureLayer.js",
34
        "@arcgis/core/renderers/SimpleRenderer.js",
35
        "@arcgis/core/symbols/SimpleFillSymbol.js",
36
      ]);
37

38
      // flash flood warnings layer
39
      const layer = new FeatureLayer({
40
        portalItem: {
41
          id: "f9e348953b3848ec8b69964d5bceae02",
42
        },
43
      });
44

45

46
      layer.renderer = new SimpleRenderer({
47
        symbol: new SimpleFillSymbol({
48
          color: "rgba(0,76,115,0.04)",
49
          outline: null,
50
        }),
51
      });
25 collapsed lines
52

53

54
      const map = new Map({
55
        basemap: "gray-vector",
56
        layers: [layer],
57
      });
58

59
      const view = new MapView({
60
        map,
61
        container: "viewDiv",
62
        center: [-98, 40],
63
        zoom: 3,
64
      });
65
      view.ui.add("titleDiv", "top-right");
66
    </script>
67
  </head>
68

69
  <body>
70
    <div id="viewDiv"></div>
71
    <div id="titleDiv" class="esri-widget">
72
      <div id="titleText">Flash Floods by Season</div>
73
      <div>Flash Flood Warnings (2002 - 2012)</div>
74
    </div>
75
  </body>
76
</html>

Flash flood warnings (2002 - 2012). All warning areas are given the same transparent symbol, which allows areas of more intense activity to show more clearly.

Polygon density from two layers

You many need to consider the density of features between multiple layers. The following example demonstrates how to show the density of polygons from two layers representing burn areas. Because layers draw on top of one another, we can set the same symbol on features from two or more layers to achieve the same visualization as the previous example.

Create a simple renderer.
Set a symbol in the renderer with a very small alpha value (e.g. 0.01 - 0.1).
Apply the same renderer to two or more layers representing the same, or similar phenomena.

ArcGIS JS API


58 collapsed lines
1
<!doctype html>
2
<html>
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6
    <title>Location style - polygons</title>
7

8
    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
9
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
10
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
11

12
    <style>
13
      html,
14
      body,
15
      #viewDiv {
16
        height: 100%;
17
        margin: 0;
18
      }
19
      #titleDiv {
20
        padding: 10px;
21
      }
22

23
      #titleText {
24
        font-size: 20pt;
25
        font-weight: 60;
26
        padding-bottom: 10px;
27
      }
28
    </style>
29
    <script type="module">
30
      const [MapView, WebMap, FeatureLayer, SimpleRenderer, SimpleFillSymbol, LayerList] =
31
        await $arcgis.import([
32
          "@arcgis/core/views/MapView.js",
33
          "@arcgis/core/WebMap.js",
34
          "@arcgis/core/layers/FeatureLayer.js",
35
          "@arcgis/core/renderers/SimpleRenderer.js",
36
          "@arcgis/core/symbols/SimpleFillSymbol.js",
37
          "@arcgis/core/widgets/LayerList.js",
38
        ]);
39

40

41
      const burnsLayer = new FeatureLayer({
42
        title: "Burn areas",
43
        url: "https://services.arcgis.com/jIL9msH9OI208GCb/ArcGIS/rest/services/California_Fire_Perimeters_1878_2019/FeatureServer",
44
        layerId: 1,
45
        opacity: 1,
46
        blendMode: "multiply",
47
      });
48

49

50
      const prescribedLayer = new FeatureLayer({
51
        title: "Prescribed burns",
52
        url: "https://services.arcgis.com/jIL9msH9OI208GCb/ArcGIS/rest/services/California_Fire_Perimeters_1878_2019/FeatureServer",
53
        layerId: 2,
54
        opacity: 1,
55
        blendMode: "multiply",
56
      });
57

58

59
      const renderer = new SimpleRenderer({
60
        symbol: new SimpleFillSymbol({
61
          color: "rgba(168, 0, 0, 0.17)",
62
          outline: null,
63
        }),
64
      });
65
      burnsLayer.renderer = renderer;
66
      prescribedLayer.renderer = renderer;
26 collapsed lines
67

68

69
      const map = new WebMap({
70
        portalItem: {
71
          id: "16bbd616637c4af29683d45eff023dfa",
72
        },
73
        layers: [burnsLayer, prescribedLayer],
74
      });
75

76
      const view = new MapView({
77
        map,
78
        container: "viewDiv",
79
      });
80
      view.ui.add("titleDiv", "top-right");
81
      view.ui.add(new LayerList({ view }), "top-right");
82
    </script>
83
  </head>
84

85
  <body>
86
    <div id="viewDiv"></div>
87
    <div id="titleDiv" class="esri-widget">
88
      <div id="titleText">California fires</div>
89
      <div>Burn areas (1878 - 2020)</div>
90
    </div>
91
  </body>
92
</html>

California burn areas (1878 - 2020). This visualization shows which areas experienced more fires whether they were prescribed, natural, or accidental.

Density of multiple types

The following example demonstrates how to show the density of polygons from two layers representing different types of features. This app visualizes the locations of all flash flood and tornado warnings over a 10-year period. Flash flood warnings are given a transparent blue fill symbol, and tornado warnings are given a transparent orange symbol.

This allows you to see areas with a high density of floods, versus a high density of tornadoes, and areas that have a high density of both.

Create two simple renderer objects.
Set a symbol in each renderer with a different color. The colors must be different hues, but the alpha values of the colors should be the same value (e.g. 0.01 - 0.1).
Apply each renderer to its respective layer.
Set the average blend mode on the topmost layer. This will average the color of all layers below it. This ensures the topmost layer isn’t dominating the visualization simply because of the layer order in the map.

Flash flood and tornado warning areas (2002 - 2012). Symbols with the same transparency, but different hues are applied to each layer. This allows the end user to see areas that experienced a high density of flash flood warnings, or tornado warnings, or both.

ArcGIS JS API


57 collapsed lines
1
<!doctype html>
2
<html>
3
  <head>
4
    <meta charset="utf-8" />
5
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
6
    <title>Location style - polygons</title>
7

8
    <link rel="stylesheet" href="https://js.arcgis.com/5.0/esri/themes/light/main.css" />
9
    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
10
    <script type="module" src="https://js.arcgis.com/5.0/"></script>
11

12
    <style>
13
      html,
14
      body,
15
      #viewDiv {
16
        height: 100%;
17
        margin: 0;
18
      }
19
      #titleDiv {
20
        padding: 10px;
21
      }
22

23
      #titleText {
24
        font-size: 20pt;
25
        font-weight: 60;
26
        padding-bottom: 10px;
27
      }
28
    </style>
29
    <script type="module">
30
      const [MapView, Map, FeatureLayer, GroupLayer, SimpleRenderer, SimpleFillSymbol, LayerList] =
31
        await $arcgis.import([
32
          "@arcgis/core/views/MapView.js",
33
          "@arcgis/core/Map.js",
34
          "@arcgis/core/layers/FeatureLayer.js",
35
          "@arcgis/core/layers/GroupLayer.js",
36
          "@arcgis/core/renderers/SimpleRenderer.js",
37
          "@arcgis/core/symbols/SimpleFillSymbol.js",
38
          "@arcgis/core/widgets/LayerList.js",
39
        ]);
40

41
      // flash flood warnings layer
42
      const floods = new FeatureLayer({
43
        title: "Flash flood warnings",
44
        portalItem: {
45
          id: "f9e348953b3848ec8b69964d5bceae02",
46
        },
47
        renderer: new SimpleRenderer({
48
          symbol: new SimpleFillSymbol({
49
            color: "rgba(0,76,115,0.03)",
50
            outline: null,
51
          }),
52
        }),
53
        popupEnabled: false,
54
        blendMode: "average",
55
      });
56

57

58
      const tornadoes = new FeatureLayer({
59
        title: "Tornado warnings",
60
        portalItem: {
61
          id: "105fee001d244d33b90bf3ae5a243679",
62
        },
63
        popupEnabled: false,
64
        blendMode: "average",
65
        renderer: new SimpleRenderer({
66
          symbol: new SimpleFillSymbol({
67
            color: "rgba(255, 128, 26,0.03)",
68
            outline: null,
69
          }),
70
        }),
71
      });
31 collapsed lines
72

73

74
      const map = new Map({
75
        basemap: "gray-vector",
76
        layers: [
77
          new GroupLayer({
78
            title: "Severe weather warnings",
79
            layers: [floods, tornadoes],
80
          }),
81
        ],
82
      });
83

84
      const view = new MapView({
85
        map,
86
        container: "viewDiv",
87
        center: [-98, 40],
88
        zoom: 4,
89
      });
90
      view.ui.add("titleDiv", "top-right");
91
      view.ui.add(new LayerList({ view }), "top-right");
92
    </script>
93
  </head>
94

95
  <body>
96
    <div id="viewDiv"></div>
97
    <div id="titleDiv" class="esri-widget">
98
      <div id="titleText">Severe weather warnings</div>
99
      <div>Flash Floods and tornadoes (2002 - 2012)</div>
100
    </div>
101
  </body>
102
</html>

Filter features by attribute

Sample Code

API support

The following table describes the geometry and view types that are suited well for each visualization technique.

	2D	Lines	Polygons	Client-side	Server-side
Clustering
Binning
Heatmap
Opacity
Bloom
Aggregation
Thinning	¹	¹	¹	²	³
Visible scale range

Full SupportPartial SupportNo Support

Feature reduction selection not supported
Only by feature reduction selection
Only by scale-driven filter

High density dataHeatmap High density dataBloom

What is per feature opacity?

How per feature opacity works

Examples

Polygon density from one layer

Polygon density from two layers

Density of multiple types

Related samples and resources

Filter features by attribute

API support