Multi-line labels
Note: Support for 3D on mobile devices may vary, view the system requirements for more information.
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.
All label expressions are written with Arcade, which provides you access to feature attributes via the $feature
global 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">
var DEG = $feature.WIND_DIRECT;
var SPEED = $feature.WIND_SPEED;
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 ];
return Concatenate(labels, TextFormatting.NewLine);
</script>
The Arcade expression is referenced in the labelingInfo
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"
}
}]