Create multiline labels for a single field in ArcGIS Online Map Viewer

Summary

In ArcGIS Online Map Viewer, longer text strings automatically wrap to create a multiline label. However, multiline labels for a single field can be created using text functions in the Arcade custom expression builder. This is useful for splitting longer text strings and controlling where the new line splits.

Note:
Refer to How To: Create multiline labels in ArcGIS Online Map Viewer to create multiline labels with multiple fields using the Arcade TextFormatting.NewLine constant.

Follow the workflow below to create multiline labels for a single field using a custom Arcade expression in Map Viewer. In this example, an expression is built for a park name label, such as ‘Santee State Park’ in the NAME field. The expression splits the label into two parts: the front part, ‘Santee’ is displayed on the first line, while the back part, ‘State Park’, is displayed on the second line. Other variables within the expression are specified to identify the other park categories, which are 'County Park', and 'Municipal Park'.

Procedure

1. In ArcGIS Online, open the layer in Map Viewer and enable labeling. Refer to Steps 1 through 6 of ArcGIS Online: Apply labels.
2. In the Label features pane, click Add label class.

3. Under Label field, click the Use expression icon.
4. In the expression editor window, insert the appropriate Arcade expression, as described below.
   1. Create a custom function to split the label into two parts, front and back. In this example, ‘front’ is to be the text before the split, and ‘back’ is to be the text after the split. Where there is a space, the text is to be split and displayed in the back part. In the example of ‘Santee State Park’, the ‘front’ text is ‘Santee’ and the ‘back’ text is ‘State Park’.

function FormatName(name, split_pt) {
  var front = Left(name, split_pt);
  var back = Right(name, Count(name) - (split_pt + 1));
  var front_len = Count(front);
  var back_len = Count(back);
  var spacing = "";
  var adjust = 1.3;

2. Specify the following expressions containing conditions to center either the first or second line of the label, depending on the length of the text.

  if (front_len < back_len) {
    spacing = Concatenate(Array(Ceil(((back_len - front_len) / 2) * adjust), " "));
    return spacing + front + TextFormatting.NewLine + back;
  } else {
    if (back_len < front_len) {
      spacing = Concatenate(Array(Ceil(((back_len - front_len) / 2) * adjust), " "));
      return front + TextFormatting.NewLine + spacing + back;
    } else {
      return front + TextFormatting.NewLine + back;
    }
  }  
}

3. Specify the following expressions to determine the category of the feature and the condition for each category. In this example, category 1 is state parks, category 2 is county parks, and category 3 is municipal parks.

var <variable1> = $feature.<fieldName>;
var <categoryVariable1> = Find(" <categoryFieldValue1>", <variable1>);
var <categoryVariable2> = Find(" <categoryFieldValue2>", <variable1>);
var <categoryVariable3> = Find(" <categoryFieldValue3>", <variable1>);

if (<categoryVariable1> != -1) {
  return FormatName(<variable1>, <categoryVariable1>);
} else {
  if (<categoryVariable2> != -1) {
    return FormatName(<variable1>, <categoryVariable2> );
  } else {
    if ( <categoryVariable3>!= -1) {
      return FormatName(<variable1>, <categoryVariable3> );
    } else {
        return <variable1>;
      }
    }
  }

function FormatName(name, split_pt) {
  var front = Left(name, split_pt);
  var back = Right(name, Count(name) - (split_pt + 1));
  var front_len = Count(front);
  var back_len = Count(back);
  var spacing = "";
  var adjust = 1.3;

  if (front_len < back_len) {
    spacing = Concatenate(Array(Ceil(((back_len - front_len) / 2) * adjust), " "));
    return spacing + front + TextFormatting.NewLine + back;
  } else {
    if (back_len < front_len) {
      spacing = Concatenate(Array(Ceil(((back_len - front_len) / 2) * adjust), " "));
      return front + TextFormatting.NewLine + spacing + back;
    } else {
      return front + TextFormatting.NewLine + back;
    }
  }   
}
var park = $feature.NAME;
var state = Find(" State Park", park);
var county = Find(" County Park", park);
var muni = Find(" Municipal Park", park);


if (state != -1) {
  return FormatName(park, state);
} else {
  if (county != -1) {
    return FormatName(park, county);
  } else {
    if (muni != -1) {
      return FormatName(park, muni);
    } else {
        return park;
      }
    }
  }

5. Click Run to verify the expression and click Done.

The image below shows the park name labels split into multiple lines according to the expression. In this example, the park name labels are split into two lines.