Add multiple label classes to a layer

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample demonstrates how label a FeatureLayer with multiple label classes in a 2D MapView.

Label expressions are always constructed using Arcade. Arcade provides a series of built-in functions that allow you to perform mathematical calculations and logical operations within your expression. Multiple label classes are used in this sample to display information about the features in a visually appealing style.

The sample displays weather conditions at weather stations throughout the world using five label classes. Initially, the map is zoomed-out to display multiple weather stations with only the temperature label classes displaying. The Bookmarks widget in the top-right of the app will allow you to quickly zoom in to see all the label classes.

First, the temperature is displayed in the above-left position, relative to the feature. We employ some where logic in order to display temperatures at and above 32 degrees in red, and temperatures below 32 degrees in blue. Then, wind speed and direction is displayed in the above-right position, releative humidity is displayed in the below-left position, and the weather station name is displayed in the below-right position. The two temperature label classes do not have a minScale property value set, whereas the other three label classes have a minScale value of 2500000, so as you zoom out, only the temperature labels become visible.

const tempArcade = "Round($feature.TEMP) + '° F';";
const lowTempClass = {
  labelExpressionInfo: {
    expression: tempArcade
  },
  labelPlacement: "above-left",
  where: "TEMP <= 32"
};
const highTempClass = {
  labelExpressionInfo: {
    expression: tempArcade
  },
  labelPlacement: "above-left",
  where: "TEMP > 32"
};

const windArcade = document.getElementById("wind-direction").text;
const windClass = {
  labelExpressionInfo: {
    expression: windArcade
  },
  labelPlacement: "above-right",
  minScale: minScale
};

const humidityArcade = "$feature.R_HUMIDITY + '% RH'";
const humidityClass = {
  labelExpressionInfo: {
    expression: humidityArcade
  },
  labelPlacement: "below-left",
  minScale: minScale
};

const nameArcade = "$feature.STATION_NAME";
const nameClass = {
  labelPlacement: "below-right",
  labelExpressionInfo: {
    expression: nameArcade
  },
  minScale: minScale
};

layer.labelingInfo = [ nameClass, humidityClass, lowTempClass, highTempClass, windClass ];

This sample also uses the When() function to reclassify wind direction values to either N, NE, E, SE, S, SW, W, or NW. The final line of the wind direction expression is returned as the label text. To read more details about Arcade and its syntax, see the Arcade guide page.