Multi-line labels

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.

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.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close