flowRenderer | Web Map Specification

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: Raster Renderers

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. Values above 1 increase density, values between 0 and 1 decrease it, and a value of 0 shows no streamlines. Very high values may be limited by screen size and trail length.
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"
      }
    ]
  }
}