FlowRenderer with visual variables | Sample | ArcGIS Maps SDK for JavaScript

Skip to content

This sample shows how to apply the FlowRenderer to an ImageryTileLayer to create an animated streamline visualization of wind speed and direction during Hurricane Ida in August 2021.

The FlowRenderer can only be used with raster datasets that have a Vector-UV or Vector-MagDir source type. The direction of the raster defines the direction of movement, and the magnitude defines the length of the streamline.

The FlowRenderer can only be used with ImageryLayer and ImageryTileLayer. The following code snippet shows how to apply this renderer to an ImageryTileLayer. You can use the sliders and components in the Controls panel to adjust the property values of FlowRenderer.

const layer = new ImageryTileLayer({
  url: "https://tiledimageservices.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/NLDAS_Hourly_8_30_2021/ImageServer",
  title: "Winds",
  renderer: {
    type: "flow", // autocasts to new FlowRenderer
    trailWidth: "2px",
    density: 1,
    visualVariables: [
      {
        type: "color",
        field: "Magnitude",
        stops: [
          { color: [40, 146, 199, 1], value: 0 },
          { color: [160, 194, 155, 1], value: 5 },
          { color: [218, 230, 119, 1], value: 10 },
        ],
      },
    ],
  },
  effect: "bloom(1.5, 0.5px, 0)",
});

FlowRenderer with effects and blending

FlowRenderer in a 3D scene

FlowRenderer with elevation modes

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>FlowRenderer with visual variables | Sample | ArcGIS Maps SDK for JavaScript</title>

    <!-- Load the ArcGIS Maps SDK for JavaScript from CDN -->
    <script type="module" src="https://js.arcgis.com/5.0/"></script>

    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }

      #controls {
        width: 300px;
        max-height: 90vh;
        overflow: auto;
      }
    </style>
  </head>

  <body class="calcite-mode-dark">
    <arcgis-map center="-98, 39" zoom="4">
      <arcgis-zoom slot="top-left"></arcgis-zoom>
      <arcgis-expand slot="top-left">
        <arcgis-legend></arcgis-legend>
      </arcgis-expand>
      <arcgis-expand slot="top-right" expand-icon="sliders-horizontal">
        <calcite-card id="controls" class="calcite-mode-dark">
          <div slot="heading">Controls</div>
          <calcite-label
            >Trail width
            <calcite-slider
              id="trailWidth"
              min="0.1"
              max="10"
              value="2"
              step="0.1"
              label-handles></calcite-slider>
          </calcite-label>
          <calcite-label
            >Trail length
            <calcite-slider
              id="trailLength"
              min="0.1"
              max="200"
              value="100"
              label-handles></calcite-slider>
          </calcite-label>
          <calcite-label
            >Density
            <calcite-slider
              id="density"
              min="0.1"
              max="3"
              value="1"
              step="0.1"
              label-handles></calcite-slider>
          </calcite-label>
          <calcite-label
            >Flow speed
            <calcite-slider
              id="flowSpeed"
              min="0.1"
              max="40"
              value="10"
              step="0.1"
              label-handles></calcite-slider>
          </calcite-label>
          <calcite-label
            >Maximum path length
            <calcite-slider
              id="maxPathLength"
              min="0.1"
              max="300"
              value="200"
              label-handles></calcite-slider>
          </calcite-label>
          <calcite-label
            >Flow representation
            <calcite-segmented-control id="flowRepresentation">
              <calcite-segmented-control-item value="flow-to">To</calcite-segmented-control-item>
              <calcite-segmented-control-item value="flow-from" checked
                >From</calcite-segmented-control-item
              >
            </calcite-segmented-control>
          </calcite-label>
          <calcite-label
            >Cap style
            <calcite-segmented-control id="trailCap">
              <calcite-segmented-control-item value="butt" checked
                >Butt</calcite-segmented-control-item
              >
              <calcite-segmented-control-item value="round">Round</calcite-segmented-control-item>
            </calcite-segmented-control>
            <small>*Round caps are only supported when trail width is greater than 3pt</small>
          </calcite-label>
          <calcite-label
            >Effects enabled
            <calcite-checkbox id="effectsEnabled" checked></calcite-checkbox>
          </calcite-label>
        </calcite-card>
      </arcgis-expand>
    </arcgis-map>

    <script type="module">
      const [Map, ImageryTileLayer] = await $arcgis.import([
        "@arcgis/core/Map.js",
        "@arcgis/core/layers/ImageryTileLayer.js",
      ]);
      const viewElement = document.querySelector("arcgis-map");
      const layer = new ImageryTileLayer({
        url: "https://tiledimageservices.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/NLDAS_Hourly_8_30_2021/ImageServer",
        title: "Winds",
        renderer: {
          type: "flow", // autocasts to new FlowRenderer
          trailWidth: "2px",
          // color: [50, 120, 240, 1],
          density: 1,
          visualVariables: [
            {
              type: "color",
              field: "Magnitude",
              stops: [
                {
                  color: [40, 146, 199, 1],
                  value: 0,
                },
                {
                  color: [160, 194, 155, 1],
                  value: 5,
                },
                {
                  color: [218, 230, 119, 1],
                  value: 10,
                },
              ],
            },
          ],
        },
        effect: "bloom(1.5, 0.5px, 0)",
      });
      const map = new Map({
        basemap: "dark-gray-vector",
        layers: [layer],
      });
      viewElement.map = map;

      const sliderProps = ["trailWidth", "density", "maxPathLength", "flowSpeed", "trailLength"];
      sliderProps.forEach((prop) => {
        document.getElementById(prop).addEventListener("calciteSliderChange", updateRenderer);
      });
      document
        .getElementById("flowRepresentation")
        .addEventListener("calciteSegmentedControlChange", updateRenderer);
      document
        .getElementById("trailCap")
        .addEventListener("calciteSegmentedControlChange", updateRenderer);
      document
        .getElementById("effectsEnabled")
        .addEventListener("calciteCheckboxChange", updateEffect);

      function updateEffect(event) {
        let checkbox = event.target.checked ? "bloom(1.5, 0.5px, 0)" : null;
        layer.effect = checkbox;
      }

      function updateRenderer(event) {
        let propName = event.target.id;
        let propValue = event.target.value;
        if (propName && propValue != null) {
          let tempRenderer = layer.renderer.clone();
          tempRenderer[propName] = propValue;
          layer.renderer = tempRenderer;
        }
      }
    </script>
  </body>
</html>