Labeling for Feature Layers in 2D

MatthieuThery1 · ‎10-04-2018

Hello,

I am using 4.8 and I can't seem to make the Labeling work for Feature Layers in 2D MapViews.

In the documentation it is written that Feature Layer 'supports label placement for Point and Polygon geometries in 2D MapViews', and there is no other mention of a limitation.

However in the 4.8 Realease Notes, it's stated that Labeling is only supported for WebGL enabled feature layers (We are using an older version of arc server, so that is not an option).

Is there a way to make it work, or is it a development that is planned in the future?

Thanks,

RobertScheitlin__GISP · ‎10-04-2018

Matthieu,

This works fine for me using 4.9.

<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Add labels to a FeatureLayer - 4.9</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/themes/light-green/main.css">

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      background-color: black;
    }
  </style>

  <script src="https://js.arcgis.com/4.9/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/widgets/Search"
    ], function(Map, MapView, FeatureLayer, Search) {

      const labelClass = { // autocasts as new LabelClass()
        symbol: {
          type: "text", // autocasts as new TextSymbol()
          color: "green",
          haloColor: "black",
          font: { // autocast as new Font()
            family: "playfair-display",
            size: 12,
            weight: "bold"
          }
        },
        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.DIST_NAME"
        }
      };

      var myMap = new Map({
        basemap: 'streets',
        layers: [
          new FeatureLayer({
            url: "https://myserver/arcgis/rest/services/myPolygonService/MapServer/5",
            labelingInfo: [labelClass],
            renderer: {
              type: "simple", // autocasts as new SimpleRenderer()
              symbol: {
                type: "simple-fill",
                color: "rgba(0,100,0,0.6)",
                style: "solid",
                outline: {
                  color: [0, 0, 0, 0.1],
                  width: 0.5
                }
              }
            }
          })
        ]
      });

      const view = new MapView({
        container: "viewDiv",
        map: myMap,
        center: [-116.9250, 34.2501],
        zoom: 4
      });

      // Adds the search widget to the top right corner of the view
      view.ui.add(new Search({
        view: view
      }), "top-right");

    });
  </script>

</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

RobertScheitlin__GISP · ‎10-04-2018

Matthieu,

This works fine for me using 4.9.

<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Add labels to a FeatureLayer - 4.9</title>

  <link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/themes/light-green/main.css">

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
      background-color: black;
    }
  </style>

  <script src="https://js.arcgis.com/4.9/"></script>

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/widgets/Search"
    ], function(Map, MapView, FeatureLayer, Search) {

      const labelClass = { // autocasts as new LabelClass()
        symbol: {
          type: "text", // autocasts as new TextSymbol()
          color: "green",
          haloColor: "black",
          font: { // autocast as new Font()
            family: "playfair-display",
            size: 12,
            weight: "bold"
          }
        },
        labelPlacement: "above-center",
        labelExpressionInfo: {
          expression: "$feature.DIST_NAME"
        }
      };

      var myMap = new Map({
        basemap: 'streets',
        layers: [
          new FeatureLayer({
            url: "https://myserver/arcgis/rest/services/myPolygonService/MapServer/5",
            labelingInfo: [labelClass],
            renderer: {
              type: "simple", // autocasts as new SimpleRenderer()
              symbol: {
                type: "simple-fill",
                color: "rgba(0,100,0,0.6)",
                style: "solid",
                outline: {
                  color: [0, 0, 0, 0.1],
                  width: 0.5
                }
              }
            }
          })
        ]
      });

      const view = new MapView({
        container: "viewDiv",
        map: myMap,
        center: [-116.9250, 34.2501],
        zoom: 4
      });

      // Adds the search widget to the top right corner of the view
      view.ui.add(new Search({
        view: view
      }), "top-right");

    });
  </script>

</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

MatthieuThery1 · ‎10-04-2018

I tested it, and it works for me using 4.9 but not 4.8. So I'll upgrade the API version in my app at some point. Thanks.

RobertScheitlin__GISP · ‎10-04-2018

Great. Don't forget to mark this as answered by clicking on the Mark as Correct for the reply that answered your question.

Noah-Sager · ‎10-04-2018

I think the reason that it works at 4.9 is that WebGL now supports all versions of Server and Online, so labeling will now work with your layers.

WebGL is now the default drawing mechanism for FeatureLayer, CSVLayer, and StreamLayer in MapView after having been in beta for a few releases. This includes support for all versions of ArcGIS Enterprise and ArcGIS Online as well as feature collections.

Release notes for 4.9 | ArcGIS API for JavaScript 4.9