You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.

Unsupported browser

You are using a browser that is not supported. JavaScript API works on the latest versions of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. Use one of these browsers and provide your feedback through GeoNet, the Esri Community.

  • {i18n.unsupportedBrowser.chrome}
  • Firefox
  • Safari
  • undefined
Loading...

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

This sample demonstrates how to label features in MapImageLayer sublayers. Labels are applied when the labelsVisible property is set to true and the labelingInfo property contains at least one LabelClass, which defines the label expression, its placement, and symbol properties.

See the Labeling guide page for more information and known limitations.

var layer = new MapImageLayer({
  url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer",
  sublayers: [
    {
      id: 2,
      // labelingInfo autocasts to an array of LabelClass objects
      // this sublayer has two label classes. The first sets the
      // label as the state abbreviation at small scales. When the view
      // zooms to larger scales the whole state name is used instead
      labelingInfo: [
        {
          labelExpression: "[state_abbr]",
          labelPlacement: "always-horizontal",
          symbol: {
            type: "text", // autocasts as new TextSymbol()
            color: [255, 255, 255, 0.85],
            font: {
              size: 16,
              weight: "bolder"
            }
          },
          minScale: 18500000,
          maxScale: 9250000
        },
        {
          labelExpression: "[state_name]",
          labelPlacement: "always-horizontal",
          symbol: {
            type: "text", // autocasts as new TextSymbol()
            color: [255, 255, 255, 0.85],
            haloColor: "gray",
            haloSize: 1,
            font: {
              size: 14,
              weight: "bold"
            }
          },
          minScale: 9250000,
          maxScale: 2400000
        }
      ]
    }
  ]
});

Sample search results

TitleSample
Loading...