Labeling for Feature Layers in 2D

490
4
Jump to solution
10-04-2018 04:45 AM
MatthieuThery1
Occasional Contributor

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,

Tags (2)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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

4 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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
Occasional Contributor

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.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos
Noah-Sager
Esri Regular Contributor

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