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"
      }
    ]
  }
}

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