This sample demonstrates how to label a FeatureLayer with formatting tags instead of multiple label classes in a 2D Map.

These label expressions are always constructed using Arcade, which provides you access to feature attributes via the $feature profile variable. The label expression is defined in a separate script element. Arcade provides a series of built-in functions that allow you to perform mathematical calculations and logical operations within your expression. Instead of using multiple label classes to display information about the features in a visually appealing style, we can use formatting tags and Arcade to format and style the labels in a single label class, similar to ArcGIS Pro.

To use formatting tags for labeling, the font family must also supports the tags, with the exception of Color, Size, and Underline (these will always work). Here is a simple example where we label the $feature.mag field, and set the font to use “Atkinson Hyperlegible Next” at size 18 with Underline:

labelExpressionInfo.expression = "return `<UND><FNT name='Atkinson Hyperlegible Next' size='18'>${$feature.mag}</FNT></UND>`";

Since “Atkinson Hyperlegible Next” supports Bold, we could also use the Bold tag here instead of the Underline:

labelExpressionInfo.expression = "return `<BOL><FNT name='Atkinson Hyperlegible Next' size='18'>${$feature.mag}</FNT></BOL>`";

However, in our sample, we already define the font family in the TextSymbol.font property. This means that all labels will use the ‘Atkinson Hyperlegible Next’ font by default. We added the same font family as a formatting tag so that the text associated with the feature data are also styled with the same font family.

This sample displays earthquakes throughout the world. First, the earthquake magnitude is displayed at the top of the label. We employ some when logic in order to display magnitudes based on value (using the mag field), using the same color scheme as the features. The features were stylized in ArcGIS Online using the Map Viewer. Then we add some text to the label to give it more context, and we make both the text and the label value the same font family, size, color, and Bold.

"<CLR ${color}><BOL><FNT name='Atkinson Hyperlegible Next' size='18'>Magnitude: </FNT>${formattedMagnitude}</BOL></CLR>"

Next we get the depth value. We want this to be a smaller size than the Magnitude, and a different color. We’re use the same color as the label background outline.

"<CLR red='100' green='0' blue='140'>" + "<FNT name='Atkinson Hyperlegible Next' size='14'>" + "Depth: " + $feature.depth + " meters" + "</FNT></CLR>"

Lastly, we add a location to the label. However, we want to display a different font family without having to create a new LabelClass. We can apply a new formatting tag to update the font family. Formatting tags take precedence over TextSymbol properties.

var location = Text($feature.place);
var formattedLocation = "<FNT name='Walter Turncoat'>" + location + "</FNT>";

When everything is combined together, notice that we introduced new variables to handle the formatting and clean-up any potential issues with the data. For example, we want the magnitude to reach one decimal place, but the depth should not have any decimal places. We also want the location to be underlined. Here is how the entire label script looks:

    <script type="text/plain" id="earthquakes-mag">
      var magnitude = IIf(IsEmpty($feature.mag), "N/A", Text($feature.mag, "0.0"));
      var depth = IIf(IsEmpty($feature.depth), "N/A", Text($feature.depth, "0"));
      var location = Text($feature.place);
      var formattedMagnitude = "<FNT size='18'>" + magnitude + "</FNT>";
      var formattedLocation = "<FNT name='Walter Turncoat'>" + location + "</FNT>";
      var color = When(
        magnitude <= 3 && magnitude > 0,
        "red='254' green='229' blue='217'",
        magnitude <= 4.5 && magnitude > 3,
        "red='252' green='174' blue='145'",
        magnitude <= 6 && magnitude > 4.5,
        "red='251' green='106' blue='74'",
        magnitude <= 7.5 && magnitude > 6,
        "red='222' green='45' blue='38'",
        magnitude > 7.5,
        "red='165' green='15' blue='21'",
        "red='188' green='28' blue='253'"
      );
      var label = `<CLR ${color}><BOL><FNT name='Atkinson Hyperlegible Next' size='18'>Magnitude: </FNT>${formattedMagnitude}</BOL></CLR>
      <CLR red='100' green='0' blue='140'><FNT name='Atkinson Hyperlegible Next' size='14'>Depth: ${depth} meters</FNT></CLR>
      <UND>${formattedLocation}</UND>`;
      return label;
    </script>

This sample uses the When() function to classify by color the earthquake magnitude values to match the colors of the features. The final line of the earthquake magnitude expression is returned as the label text. To read more details about Arcade and its syntax, see the Arcade guide page.

See: Labeling Font Properties

See: Labeling Formatting Tags

See: ArcGIS Arcade assistant (beta)