This sample shows the use of the angle property within an IconSymbol3DLayer, enhanced by the RotationVariable, to visualize data trends in a 3D SceneView, with rotating arrows indicating positive or negative changes in property values over time.
IconSymbol3DLayer angle
The angle property sets the clockwise rotation (in degrees) of an Icon within a PointSymbol3D.
This is useful for icons like arrows that can be used in multiple orientations. For instance, an arrow can point in any direction, not just in its default one.
In our sample, we set the angle to 90 degrees to make the arrow point upwards initially. This ensures it's correctly positioned for the attribute-driven rotation we'll apply later.
// Create a PointSymbol3D with an IconSymbol3DLayer referencing a left pointing arrow image
const arrowTrendSymbol = {
type: "point-3d", // autocasts as new PointSymbol3D()
symbolLayers: [
{
type: "icon", // autocasts as new IconSymbol3DLayer()
size: "30", // points
resource: {
href: arrowSourcePNG
},
material: {
color: "white"
},
angle: 90 // initial clockwise angle in degrees to make the arrow point upwards
}
],
verticalOffset: {
// verticalOffset shifts the symbol vertically
screenLength: 3,
maxWorldLength: 18,
minWorldLength: 3
},
callout: {
type: "line", // autocasts as new LineCallout3D()
color: "white",
size: 1
}
};
RotationVariable
By defining a RotationVariable, we can visually
represent trends such as price changes in the housing market by rotating each icon according to a specific attribute value
that drives the arrow's rotation. This value is then added to the Icon's angle to determine
the final rotation.
By using the rotationType
property set to arithmetic we achieved a counter-clockwise rotation for the icons. This approach
adds 90 degrees to the icon's initial rotation, positioning it to face right.
Then the icons rotate counter-clockwise based on the corresponding attribute value.
Thanks to this, we can have the following visual representation:
- 0 degrees: indicates a neutral trend, with the arrow pointing to the right.
- 0 to 90 degrees: represents a positive trend, with the arrow pointing progressively upwards to the right.
- 0 to -90 degrees: represents a negative trend, with the arrow pointing progressively downwards to the right.
We also add a ColorVariable to give immediate feedback about the intensity of the trend.
// Use Esri color ramp "Red and Green 11" from
// https://developers.arcgis.com/javascript/latest/visualization/symbols-color-ramps/esri-color-ramps/
const colors = ["#00ffaaff", "#17a67dff", "#403c35ff", "#b02626ff", "#ff0000ff"];
// Create the renderer using the PointSymbol3D defined above
const arrowTrendRenderer = {
type: "simple", // autocasts as new SimpleRenderer()
symbol: arrowTrendSymbol,
visualVariables: [
// Use RotationVariable to make all the arrows rotated according to the trend values
{
type: "rotation", // autocasts as new RotationVariable()
field: "Property_Value_Diff_Percent", // this attribute represents the positive or negative trend in percentage and it can be associated to a degree of rotation
rotationType: "arithmetic" // to make the rotation counter clockwise. It also adds 90 degrees to the icon's initial rotation, positioning it to face right
},
// Use ColorVariable to color all the arrows according to the trend intensity
{
type: "color", // autocasts as new ColorVariable()
field: "Property_Value_Diff_Percent", // the trend intensity can be represented by this attribute
stops: [
// the trend intensity going from green (positive) to red (negative)
{ value: 80, color: colors[0] },
{ value: 10, color: colors[1] },
{ value: 0, color: colors[2] },
{ value: -10, color: colors[3] },
{ value: -80, color: colors[4] }
]
}
]
};
Billboarded icon rotation
This sample shows billboarded rotated icons, which are useful for representing trends or status indicators, as the icons consistently face the camera. The icon billboarding behavior depends on
the elevationInfo mode of the FeatureLayer
(buildingsPropertyTrendLayer.elevationInfo = {
mode: "relative-to-scene" // The elevationInfo mode positions billboarded icons on top of the buildings
}),
Icons can also be draped on the scene using the on-the-ground elevationInfo mode, in which case the angle can be used
to indicate specific directions.
