Multi-line labels

Explore in the sandboxView live

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. See the Labeling guide page for more information and known limitations.

                            
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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.

                  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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"
    }
  }
];

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