Add labels to a FeatureLayer

This sample demonstrates how to add labels to a FeatureLayer in a MapView. You can display labels either by setting the labelInfo property of the FeatureLayer, or by loading a PortalItem with labels already defined.

The value of the MARKER_ACTIVITY field of the FeatureLayer 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 add a background and borderLine. See the Labeling guide page for more information and known limitations.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const labelClass = {
  // autocasts as new LabelClass()
  symbol: {
    type: "text", // autocasts as new TextSymbol()
    color: "green",
    backgroundColor: [213, 184, 255, 0.75],
    borderLineColor: "green",
    borderLineSize: 1,
    yoffset: 5,
    font: {
      // autocast as new Font()
      family: "Playfair Display",
      size: 12,
      weight: "bold"
    }
  },
  labelPlacement: "above-center",
  labelExpressionInfo: {
    expression: "$feature.MARKER_ACTIVITY"
  }
};

This sample loads a PortalItem from ArcGIS Online, then adds the label class to the labelingInfo property, and applies a renderer.

1
2
3
4
5
6
7
8
9
map.layers = [
  new FeatureLayer({
    portalItem: {
      // autocasts as new PortalItem
      id: "6012738cd1c74582a5f98ea30ae9876f"
    },
    labelingInfo: [labelClass]
  })
];

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

The developer dashboard has moved

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close