Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://developers.arcgis.com/javascript/latest/visualization/high-density-data/opacity/ below:

Opacity | Overview | ArcGIS Maps SDK for JavaScript 4.33

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.

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).

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.

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.

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

Use dark colors for code blocks Copy

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
      layer.renderer = new SimpleRenderer({
        symbol: new SimpleFillSymbol({
          color: "rgba(0,76,115,0.04)",
          outline: null,
        }),
      });

Modifying the layer.opacity (instead of the renderer's symbol) applies a consistent transparency across all features at once and will not yield the desired result.

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

1. Create a simple renderer.
2. 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

Expand

46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 46 47 48 49 50 51 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52 52

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
      layer.renderer = new SimpleRenderer({
        symbol: new SimpleFillSymbol({
          color: "rgba(0,76,115,0.04)",
          outline: null,
        }),
      });

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.

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.

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

ArcGIS JS API

Expand

59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 59 60 61 62 63 64 65 66 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
      const renderer = new SimpleRenderer({
        symbol: new SimpleFillSymbol({
          color: "rgba(168, 0, 0, 0.17)",
          outline: null,
        }),
      });
      burnsLayer.renderer = renderer;
      prescribedLayer.renderer = renderer;

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

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.

1. Create two simple renderer objects.
2. 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).
3. Apply each renderer to its respective layer.
4. 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

Expand

58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 72 72 72 72 72 72 72 72 72 72 72 72 72 72 72 72 72 72 72 72 72 72 72 72 72 72 72 72 72 72 72

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
      const tornadoes = new FeatureLayer({
        title: "Tornado warnings",
        portalItem: {
          id: "105fee001d244d33b90bf3ae5a243679",
        },
        popupEnabled: false,
        blendMode: "average",
        renderer: new SimpleRenderer({
          symbol: new SimpleFillSymbol({
            color: "rgba(255, 128, 26,0.03)",
            outline: null,
          }),
        }),
      });

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

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4