FlowRenderer with effects and blending

Explore in the sandboxView live

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