FlowRenderer with effects and blending

This sample shows how to use the FlowRenderer with layer effects and blendModes to display ocean currents and sea surface temperature data.

How it works

Normally, the FlowRenderer only displays its streamlines in one solid color. To create a multivariate visualization with the FlowRenderer, you can use layer blending. In this application, we're blending together an ocean currents layer (visualized by the flow renderer - which gives us the streamlines) and a sea surface temperature layer (visualized by a RasterStretchRenderer - which gives us the color). When initializing the currents layer, we give it a destination-in blendMode so that the temperature layer only draws where it overlaps with the currents layer.

Use dark colors for code blocksCopy
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
      // ocean currents, visualized with flow renderer
      const currentsLayer = new ImageryTileLayer({
        url: "https://tiledimageservices.arcgis.com/jIL9msH9OI208GCb/arcgis/rest/services/Spilhaus_UV_ocean_currents/ImageServer",
        renderer: {
          type: "flow", // autocasts to FlowRenderer
          density: 1,
          maxPathLength: 10, // max length of a streamline will be 10
          trailWidth: "2px"
        },
        blendMode: "destination-in", // temperature layer will only display on top of this layer
      });

Then, we add both layers to a GroupLayer. We apply the bloom layer effect to the group layer to make the colors glow on the dark basemap.

Use dark colors for code blocksCopy
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
      const groupLayer = new GroupLayer({
        effect: "bloom(2, 0.5px, 0.0)", // apply bloom effect to make the colors pop
        layers: [temperatureLayer, currentsLayer]
      });

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