flow

AMD: require(["esri/smartMapping/symbology/flow"], (flowSchemes) => { /* code goes here */ });
ESM: import * as flowSchemes from "@arcgis/core/smartMapping/symbology/flow.js";
Object: esri/smartMapping/symbology/flow
Since: ArcGIS Maps SDK for JavaScript 4.23

Object containing helper methods for generating optimal settings for FlowRenderer. The getSchemes() method is used to generate renderer properties best suited to the basemap and theme.

Method Overview

Name Return Type Summary Object

Clones a flow scheme object.

flow

Returns the flow scheme with the given name.

flow

Returns a primary scheme and secondary schemes defining properties for flow visualizations in a ImageryLayer and ImageryTileLayer.

flow

Returns the flow schemes filtered by tags included and excluded from the paramters.

flow

Returns metadata for the available themes.

flow

Method Details

cloneScheme

Method
cloneScheme(scheme){FlowScheme}

Clones a flow scheme object.

Parameter
scheme FlowScheme

The flow scheme object to clone.

Returns
Type Description
FlowScheme Returns a clone of the given color scheme object.
Example
// clones the primary scheme returned from the getSchemes() method
let flowScheme = primaryScheme.clone();

getSchemeByName

Method
getSchemeByName(params){FlowScheme}

Returns the flow scheme with the given name.

Parameters
Specification
params Object

See the table below for details of each parameter that may be passed to this function.

Specification
name String

The name of the desired scheme.

theme String
optional
Default Value: "flow-line"

Determines how flow lines will render. Possible values are listed below.

Value Description Example
flow-line Renders the uv and magnitude data as animated flow lines. This is ideal for representing wind and other atmospheric data. flow-line
wave-front Renders UV and magnitude data in a wave-like animation. This theme works well for ocean data. above

Possible Values:"flow-line"|"wave-front"

basemap String|Basemap
optional

The Esri basemap to pair with the visualization. This value indicates the best colors for visualizing flow lines against the given basemap. If you have a non-Esri basemap (e.g. a VectorTileLayer basemap with a custom style) or no basemap at all, then use the basemapTheme parameter instead of this parameter.

basemapTheme String
optional

If you have a non-Esri basemap (e.g. a VectorTileLayer basemap with a custom style) or no basemap at all, use this parameter to indicate whether the background of the visualization is light or dark.

Possible Values:"light"|"dark"

Returns
Type Description
FlowScheme Returns the scheme matching the given name.
Example
// Constructs the scheme using the Perfect Pigtails color ramp.
const schemes = flowSchemes.getSchemeByName({
  name: "Perfect Pigtails",
  basemapTheme: "dark",
  theme: "wave-front"
});

getSchemes

Method
getSchemes(params){FlowSchemes}

Returns a primary scheme and secondary schemes defining properties for flow visualizations in a ImageryLayer and ImageryTileLayer. The basemap parameter determines the appropriate color schemes used to visualize flow lines.

Parameters
Specification
params Object

See the table below for details of each parameter that may be passed to this function.

Specification
theme String
optional
Default Value: "flow-line"

Determines how flow lines will render. Possible values are listed below.

Value Description Example
flow-line Renders the uv and magnitude data as animated flow lines. This is ideal for representing wind and other atmospheric data. flow-line
wave-front Renders UV and magnitude data in a wave-like animation. This theme works well for ocean data. above

Possible Values:"flow-line"|"wave-front"

basemap String|Basemap
optional

The Esri basemap to pair with the visualization. This value indicates the best colors for visualizing flow lines against the given basemap. If you have a non-Esri basemap (e.g. a VectorTileLayer basemap with a custom style) or no basemap at all, then use the basemapTheme parameter instead of this parameter.

basemapTheme String
optional

If you have a non-Esri basemap (e.g. a VectorTileLayer basemap with a custom style) or no basemap at all, use this parameter to indicate whether the background of the visualization is light or dark.

Possible Values:"light"|"dark"

Returns
Type Description
FlowSchemes Returns an object containing the primary flow scheme to use for the given basemap. Secondary schemes are also provided.
Example
// gets the primary scheme for the features of the given geometry type and basemap
const schemes = flowSchemes.getSchemes({
  basemapTheme: "dark",
  theme: "wave-front"
});

// the suggested default scheme for the layer, basemap, and theme
let primaryScheme = schemes.primaryScheme;

getSchemesByTag

Method
getSchemesByTag(params){FlowScheme[]}

Returns the flow schemes filtered by tags included and excluded from the paramters.

Parameters
Specification
params Object

See the table below for details of each parameter that may be passed to this function.

Specification
includedTags String[]
optional

When provided, only schemes containing all the matching tags will be returned.

Known Tags: light | dark | reds | yellows | oranges | greens | blues | purples | pinks | browns | grays | bright | subdued | colorblind-friendly | diverging | sequential | 3d

excludedTags String[]
optional

When provided, only schemes excluding all the provided tags will be returned.

Known Tags: light | dark | reds | yellows | oranges | greens | blues | purples | pinks | browns | grays | bright | subdued | colorblind-friendly | diverging | sequential | 3d

theme String
optional
Default Value: "flow-line"

Determines how flow lines will render. Possible values are listed below.

Value Description Example
flow-line Renders the uv and magnitude data as animated flow lines. This is ideal for representing wind and other atmospheric data. flow-line
wave-front Renders UV and magnitude data in a wave-like animation. This theme works well for ocean data. above

Possible Values:"flow-line"|"wave-front"

basemap String|Basemap
optional

The Esri basemap to pair with the visualization. This value indicates the best colors for visualizing flow lines against the given basemap. If you have a non-Esri basemap (e.g. a VectorTileLayer basemap with a custom style) or no basemap at all, then use the basemapTheme parameter instead of this parameter.

basemapTheme String
optional

If you have a non-Esri basemap (e.g. a VectorTileLayer basemap with a custom style) or no basemap at all, use this parameter to indicate whether the background of the visualization is light or dark.

Possible Values:"light"|"dark"

Returns
Type Description
FlowScheme[] Returns an array of flow schemes with the given tags included in the search and excluding the given tags excluded from the search.
Example
// returns colorblind friendly red color schemes
const schemes = flowSchemes.getSchemesByTag({
  basemapTheme: "dark",
  theme: "wave-front",
  includedTags: [ "reds", "colorblind-friendly" ]
});

getThemes

Method
getThemes(basemap){Theme[]}

Returns metadata for the available themes. If a basemap is provided, returns themes that work best with the given basemap.

Parameter
basemap String|Basemap
optional

The Esri basemap string or basemap object that will be used with the returned theme(s).

Returns
Type Description
Theme[] Returns an object containing information about the available themes for the given basemap.

Type Definitions

FlowScheme

Type Definition
FlowScheme

Suggested property values for defining the scheme used to visualize flow lines.

Properties
name String

The unique name of the scheme.

tags String[]

Tags associated with the scheme.

id String

The unique id of the color scheme to use in the visualization. The id is assigned based on the following template: <themeName>/<basemapName>/<schemeName>.

theme String

Determines how flow lines will render. Possible values are listed below.

Value Description Example
flow-line Renders the uv and magnitude data as animated flow lines. This is ideal for representing wind and other atmospheric data. flow-line
wave-front Renders UV and magnitude data in a wave-like animation. This theme works well for ocean data. above

Possible Values:"flow-line"|"wave-front"

color Color

The suggested color of the flow lines if a color visual variable is not desired.

colors Color[]

The suggested colors to use if a ColorVariable is set on the flow renderer.

density Number

The suggested density of the stream lines.

flowSpeed Number

The suggested flowSpeed of the stream lines.

trailLength Number

The suggested length of the stream lines.

trailWidth Number

The suggested width of the stream lines.

trailCap Number

The suggested cap style of the stream lines.

layerEffect String

The suggested effect to apply to the input layer.

minWidth Number

The suggested size to apply to small magnitude values if a SizeVariable is set on the flow renderer.

maxWidth Number

The suggested size to apply to large magnitude values if a SizeVariable is set on the flow renderer.

minOpacity Number

The suggested opacity to apply to small magnitude values if an OpacityVariable is set on the flow renderer.

maxOpacity Number

The suggested opacity to apply to large magnitude values if an OpacityVariable is set on the flow renderer.

FlowSchemes

Type Definition
FlowSchemes

The return object of the getSchemes() method.

Properties
primaryScheme FlowScheme

The flow scheme best suited for the given basemap.

secondarySchemes FlowScheme[]

Additional flow schemes that may be used to visualize stream lines overlaid on the given basemap or basemap theme.

basemapId String

The ID of the basemap associated with the given schemes.

basemapTheme String

Indicates whether the average basemap color is light or dark.

Theme

Type Definition
Theme

Describes a theme that pairs well with the given basemaps. See the table below for more details of the properties in this object.

Properties
name String

The name of the theme.

label String

The label identifying the theme in UI elements.

description String

Text describing the theme in the UI.

basemaps String[]

The Esri basemaps that pair well with the given theme.

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