topic Re: 4.8 Labeling of Polygons in ArcGIS JavaScript Maps SDK Questions

4.8 Labeling of Polygons

JamesS1 — Tue, 14 Aug 2018 11:42:08 GMT

With the 4.8 API, labeling is now available for points and polygons. I have 10.6.1 installed, webGL enabled, and am consuming a point and polygon feature class as feature layers. The point layer labels just fine, but the polygon layer does not. Am I missing something? I even manually added a labelClass for the polygon layer and it still doesn't work. I can't find any examples of polygons being labeled online with the 4.8 API. Any help is appreciated.

Re: 4.8 Labeling of Polygons

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:21:46 GMT

James,

Here is a sample that works labeling polygons from my AGOL.

<!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.8</title>

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

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

  <script>
    var dojoConfig = {
      has: {
        "esri-featurelayer-webgl": 1
      }
    }
  </script>

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


  <script>
    require([
      "esri/WebMap",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/widgets/Search",
      "dojo/domReady!"
    ], function(WebMap, 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.TVALUE"
        }
      };

      const view = new MapView({
        container: "viewDiv",
        map: new WebMap({
          portalItem: { // autocasts as new PortalItem
            id: "372b7caa8fe340b0a6300df93ef18a7e"
          },
          layers: [
            new FeatureLayer({
              portalItem: { // autocasts as new PortalItem
                id: "0624f5c5f5a04f0184f9f2b79576d5c6"
              },
              labelingInfo: [labelClass],
              renderer: {
                type: "simple", // autocasts as new SimpleRenderer()
                symbol: {
                  type: "simple-fill", // autocasts as new SimpleFillSymbol()
                  color: "rgba(0,100,0,0.6)",
                  outline: {
                    color: [0, 0, 0, 0.1],
                    width: 0.5
                  }
                }
              }
            })
          ]
        }),
        center: [-85.851, 33.755],
        zoom: 11
      });

      // 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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: 4.8 Labeling of Polygons

JamesS1 — Tue, 14 Aug 2018 14:24:09 GMT

Yes, I've seen it work with web maps, but I am not using WebMap - I am using Map with the MapView (and ArcGIS Server 10.6.1 for the map service with WebGL enabled). I'd post the code, but it is a complex application with numerous modules and function calls... I will say, however, that my code is very similar to what you have, the WebMap/Map difference aside. If there is some specific code that I could show that would shed some light, I'd be happy to do that.

Re: 4.8 Labeling of Polygons

RobertScheitlin__GISP — Sat, 11 Dec 2021 23:21:49 GMT

James,

OK here is the same sample using a Map and FeatureLayer from a url:

<!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.8</title>

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

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

  <script>
    var dojoConfig = {
      has: {
        "esri-featurelayer-webgl": 1
      }
    }
  </script>

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


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

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

      let fLayer = new FeatureLayer({
        url: "https://services3.arcgis.com/XItYIm6b3WFtPaRW/arcgis/rest/services/PolyEditTest/FeatureServer/0",
        outfields: ["*"],
        labelingInfo: [labelClass],
        renderer: {
          type: "simple", // autocasts as new SimpleRenderer()
          symbol: {
            type: "simple-fill", // autocasts as new SimpleFillSymbol()
            color: "rgba(0,100,0,0.6)",
            outline: {
              color: [0, 0, 0, 0.1],
              width: 0.5
            }
          }
        }
      });

      let map = new Map({
        basemap: "streets",
        layers:[fLayer]
      })

      const view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-85.851, 33.755],
        zoom: 11
      });

      // 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>
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: 4.8 Labeling of Polygons

JamesS1 — Tue, 14 Aug 2018 16:23:34 GMT

There are still differences. You are using a feature service while I am using a map service. My data is in a file geodatabase. Perhaps one of these differences is the reason why my labels aren't displaying for the polygons. Still, the points label fine, so I don't know.

Re: 4.8 Labeling of Polygons

RobertScheitlin__GISP — Tue, 14 Aug 2018 16:25:34 GMT

James,

Are your polygons the same WKID as your basemap?

Re: 4.8 Labeling of Polygons

JamesS1 — Tue, 14 Aug 2018 18:09:09 GMT

Yes they are: { wkid: 102100 }

Re: 4.8 Labeling of Polygons

RobertScheitlin__GISP — Tue, 14 Aug 2018 20:24:23 GMT

James,

I see what you mean. I tried adding a polygon layer from my 10.6.1 server and it would not label. You should report this to esri tech support.

Re: 4.8 Labeling of Polygons

JamesS1 — Wed, 15 Aug 2018 12:06:36 GMT

Will do. Thanks for the help.

Re: 4.8 Labeling of Polygons

BjornSvensson — Wed, 15 Aug 2018 16:14:42 GMT

Robert/James, does either one of you happen to have a public layer that it fails with?
For the 10.6.1 layer that it fails with, does it also fail when used in a webmap?

Re: 4.8 Labeling of Polygons

RobertScheitlin__GISP — Wed, 15 Aug 2018 16:30:37 GMT

Bjorn,

Sure you can use URL Removed. It does not fail when using a AGOL hosted feature service. I have not tested in a webmap.

Re: 4.8 Labeling of Polygons

BjornSvensson — Wed, 15 Aug 2018 18:51:14 GMT

This isn't supported at 4.8. The "Known limitation" doc for FeatureLayer WebGL is a bit unclear but when it says "Non-hosted enterprise feature services will be supported at the ArcGIS Server 10.6.1 release." it really means "only feature layers created from feature services (not from map services)".

Not sure why the point service works...

This limitation will go away at 4.9.

https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html#webgl-rendering