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">
  // 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 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"
  }
}]