Flow Renderer

A flow renderer is a renderer that uses animated streamlines to visualize U-V or Magnitude-Direction raster data. This renderer works with ImageryLayers and ImageryTileLayers.

Referenced by: renderer

Properties

Property	Details
authoringInfo	An object containing metadata about the authoring process for creating a renderer object. This allows the authoring clients to save specific overridable settings so that next time it is accessed via the UI, their selections are remembered. Non-authoring clients can ignore it.
color	The color of the streamlines.
density	The density of the streamlines. Accepted values are between 0 and 1, where 0 is the least dense and 1 is the most dense.
flowRepresentation	Sets the flow direction of the data. Valid values: flow_from flow_to
flowSpeed	The speed of the animated streamlines, relative to simulation time. This serves as a multiple of the magnitude from the imagery layer. If the magnitude is 2 m/s, and flowSpeed is 10, then the actual speed of a streamline will be 20 pts/s. A speed of 0 will result in no animation.
legendOptions	A legend containing one title, which is a string describing the renderer in the legend.
maxPathLength	The maximum length the streamlines will travel in points.
trailCap	The style of the streamline's cap. The 'round' cap will only be applied if trailWidth is greater than 3pts. Valid values: butt round
trailLength	The approximate visible length of the streamline in points. This will be longer where the particle is moving faster, and shorter where the particle is moving slower.
trailWidth	The width of the streamlines in points.
type	Specifies the type of renderer used. Valid value of this property flowRenderer
visualVariables[]	An array of objects used to set rendering properties. Supports color, size, and opacity visual variables.

Flow renderer without visual variables Example

Flow renderer with single color.

{
  "visualVariables": [],
  "density": 0.8,
  "color": [
    0,
    255,
    255,
    255
  ],
  "maxPathLength": 200,
  "trailWidth": 1,
  "flowSpeed": 10,
  "trailLength": 100,
  "flowRepresentation": "flow_from",
  "type": "flowRenderer",
  "authoringInfo": {
    "flowTheme": "flow-line",
    "type": "flow",
    "visualVariables": []
  }
}

Wave front flow renderer with color visual variable Example

Flow renderer with color visual variable rendered using the wave front theme.

{
  "visualVariables": [
    {
      "type": "colorInfo",
      "field": "Magnitude",
      "stops": [
        {
          "color": [
            72,
            56,
            95,
            255
          ],
          "value": 0
        },
        {
          "color": [
            153,
            83,
            117,
            255
          ],
          "value": 1.7
        },
        {
          "color": [
            219,
            74,
            91,
            255
          ],
          "value": 3.4
        },
        {
          "color": [
            252,
            154,
            89,
            255
          ],
          "value": 5.1
        },
        {
          "color": [
            254,
            224,
            134,
            255
          ],
          "value": 6.8
        }
      ]
    }
  ],
  "density": 0.8,
  "color": [
    0,
    255,
    255,
    255
  ],
  "maxPathLength": 200,
  "trailWidth": 8,
  "flowSpeed": 3,
  "trailLength": 0.7,
  "flowRepresentation": "flow_from",
  "type": "flowRenderer",
  "authoringInfo": {
    "flowTheme": "wave-front",
    "type": "flow",
    "visualVariables": [
      {
        "maxSliderValue": 13.641680717468262,
        "minSliderValue": 0,
        "theme": "high-to-low",
        "type": "colorInfo"
      }
    ]
  }
}

Flow renderer with color, opacity, and size visual variables Example

Flow renderer with flow line theme and color, opacity, and size visual variable.

{
  "visualVariables": [
    {
      "type": "colorInfo",
      "field": "Magnitude",
      "stops": [
        {
          "color": [
            72,
            56,
            95,
            255
          ],
          "value": 0
        },
        {
          "color": [
            153,
            83,
            117,
            255
          ],
          "value": 1.7
        },
        {
          "color": [
            219,
            74,
            91,
            255
          ],
          "value": 3.4
        },
        {
          "color": [
            252,
            154,
            89,
            255
          ],
          "value": 5.1
        },
        {
          "color": [
            254,
            224,
            134,
            255
          ],
          "value": 6.8
        }
      ]
    },
    {
      "type": "transparencyInfo",
      "field": "Magnitude",
      "stops": [
        {
          "transparency": 75,
          "value": 0
        },
        {
          "transparency": 0,
          "value": 6.8
        }
      ]
    },
    {
      "type": "sizeInfo",
      "field": "Magnitude",
      "stops": [
        {
          "size": 1,
          "value": 0
        },
        {
          "size": 4,
          "value": 13.641680717468262
        }
      ]
    }
  ],
  "density": 0.8,
  "color": [
    0,
    255,
    255,
    255
  ],
  "maxPathLength": 200,
  "trailWidth": 1,
  "flowSpeed": 10,
  "trailLength": 100,
  "flowRepresentation": "flow_from",
  "type": "flowRenderer",
  "authoringInfo": {
    "flowTheme": "flow-line",
    "type": "flow",
    "visualVariables": [
      {
        "maxSliderValue": 13.641680717468262,
        "minSliderValue": 0,
        "theme": "high-to-low",
        "type": "colorInfo"
      },
      {
        "maxSliderValue": 13.641680717468262,
        "minSliderValue": 0,
        "type": "transparencyInfo"
      },
      {
        "maxSliderValue": 13.641680717468262,
        "minSliderValue": 0,
        "theme": "high-to-low",
        "type": "sizeInfo"
      }
    ]
  }
}