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.
// 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.
const groupLayer = new GroupLayer({
effect: "bloom(2, 0.5px, 0.0)", // apply bloom effect to make the colors pop
layers: [temperatureLayer, currentsLayer]
});