This sample demonstrates how to label features in a 2D FeatureLayer using an Arcade expression. To display labels, set the labelInfo property of the FeatureLayer to one or more label classes. See the Labeling guide page for more information and known limitations.
All label expressions are written with Arcade, which provides you access to feature attributes via the $feature profile variable. The label expression is defined in a separate script element, and is formatted using the Concatenate Arcade function.
Labels are separated into multiple lines using the TextFormatting.NewLine Arcade constant.
<script type="text/plain" id="label">
// field storing wind direction as a number from 0 - 360
var DEG = $feature.WIND_DIRECT;
// field storing wind speed in mph
var SPEED = $feature.WIND_SPEED;
// The When() function will classify the wind direction
// to a compass point (e.g. N, NW, S, SE)
var DIR = When( SPEED == 0, null,
(DEG < 22.5 && DEG >= 0) || DEG > 337.5, 'N',
DEG >= 22.5 && DEG < 67.5, 'NE',
DEG >= 67.5 && DEG < 112.5, 'E',
DEG >= 112.5 && DEG < 157.5, 'SE',
DEG >= 157.5 && DEG < 202.5, 'S',
DEG >= 202.5 && DEG < 247.5, 'SW',
DEG >= 247.5 && DEG < 292.5, 'W',
DEG >= 292.5 && DEG < 337.5, 'NW', null );
var WIND = SPEED + ' mph ' + DIR;
var TEMP = Round($feature.TEMP) + '° F';
var RH = $feature.R_HUMIDITY + '% RH';
var NAME = $feature.STATION_NAME;
var labels = [ NAME, TEMP, WIND, RH ];
// Concatenate all label variables in the same string
// but on multiple lines
return Concatenate(labels, TextFormatting.NewLine);
</script>The Arcade expression is referenced in the labeling the following way.
labelingInfo: [
{
labelExpressionInfo: {
expression: document.getElementById("label").text
},
labelPlacement: "center-right",
minScale: minScale,
symbol: {
type: "text",
font: {
size: 9,
family: "Noto Sans"
},
horizontalAlignment: "left",
color: "#2b2b2b"
}
}
];