This sample demonstrates how to add labels to a FeatureLayer in a Map component. You can display labels either by setting the labelingInfo property of the Feature, or by loading a PortalItem with labels already defined.
The value of the MARKER field of the Feature is used to label each feature in the view, which shows Forest Service Recreation Opportunities in the United States.
To add labels to the layer, first we create a LabelClass and assign values for various properties, such as color and font. We also set backgroundColor and borderLineColor. See the Labeling guide page for more information and known limitations.
// autocasts as new LabelClass()
const labelClass = {
symbol: {
type: "text", // autocasts as new TextSymbol()
color: "green",
backgroundColor: [213, 184, 255, 0.75],
borderLineColor: "green",
borderLineSize: 1,
yoffset: 5,
font: {
family: "Playfair Display", // autocasts as new Font()
size: 12,
weight: "bold",
},
},
labelPlacement: "above-center",
labelExpressionInfo: {
expression: "$feature.MARKER_ACTIVITY",
},
};This sample loads a Portal from ArcGIS Online, then adds the label class to the labeling property.
const featureLayer = new FeatureLayer({
portalItem: {
id: "6012738cd1c74582a5f98ea30ae9876f", // autocasts as new PortalItem()
},
labelingInfo: [labelClass],
});