Add multiple label classes to a layer

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

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, relative 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.

Use dark colors for code blocksCopy
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.

MapView

FeatureLayer