topic Re: Label Feature Layer created by Feature Collection in Web AppBuilder Custom Widgets Questions

Label Feature Layer created by Feature Collection

ZdeněkSoldán — Sun, 12 Dec 2021 10:57:43 GMT

Acording to this demonstration ArcGIS API for JavaScript Sandbox I try to set labels to Feature Layer. My Feature Layer is created by Feature Collection and when I have exactly the same code as in demonstration no labels are shown.

Can anyone help please?

Here is my code:

var map = this.map;
map.showLabels = true;
var devFeatureCollection = {
     "layerDefinition": null,
     "featureSet":{
          "features":[],
          "geometryType": "esriGeometryPoint"
     }
};
devFeatureCollection.layerDefinition = {
     "geometryType": "esriGeometryPoint",
     "objectIdField": "ObjectID",
     "spatialReference": {
           "wkid": 102067,
           "latestWkid": 102067
     },
     "drawingInfo": {
           "renderer": {
              "type": "simple",
              "symbol": {
                "type": "esriPMS",
                "url": "images/trafLight.png",
                "contentType": "image/png",
                "width": 10,
                "height": 20
              }
           }
     },
     "fields": [{
           "name": "ObjectID",
           "alias": "ObjectID",
           "type": "esriFieldTypeOID"
           }, {
           "name": "serialno",
           "alias": "ID zařízení",
           "type": "esriFieldTypeString"
           }, {
           "name": "street1",
           "alias": "Ulice_1",
           "type": "esriFieldTypeString"
           }, {
           "name": "street2",
           "alias": "Ulice_2",
           "type": "esriFieldTypeString"
          }]
};
devFeatureLayer = new FeatureLayer(devFeatureCollection, {
      id: 'devStates',
      infoTemplate: devPopupTemplate,
      outFields: ["*"]
});
// create a text symbol to define the style of labels
        var devLabel = new TextSymbol()
        devLabel.font.setSize("14pt");
        devLabel.font.setFamily("arial");

        //this is the very least of what should be set within the JSON  
        var json = {
          "labelExpressionInfo": {"value": "{serialno}"}
        };

        //create instance of LabelClass (note: multiple LabelClasses can be passed in as an array)
        var labelClass = new LabelClass(json);
        labelClass.symbol = devLabel; // symbol also can be set in LabelClass' json
        devFeatureLayer.setLabelingInfo(labelClass);‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Label Feature Layer created by Feature Collection

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:57:46 GMT

Zdeněk,

There is a big issue with label layers in WAB. You have to set the map to showLabels and this can only be done when the map is constructed. So the issue is you have to manually make a change to the main config.json that can not be made from a widgets code. In the main config.json find the map object and add "showLabels":true to the "mapOptions" object (line 11):

  "map": {
    "3D": false,
    "2D": true,
    "position": {
      "left": 0,
      "top": 40,
      "right": 0,
      "bottom": 0
    },
    "itemId": "blah blah",
    "mapOptions": {"showLabels":true},
    "id": "map",
    "portalUrl": "blah blah"
  },‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Also there is a mistake in your code on this line:

devFeatureLayer.setLabelingInfo(labelClass);‍

it should be:

devFeatureLayer.setLabelingInfo([labelClass]);‍

Re: Label Feature Layer created by Feature Collection

ZdeněkSoldán — Thu, 27 Apr 2017 13:13:36 GMT

Robert,

I added the mapOptions to the main config and fix the line in setLabelingInfo but it didn't help. Labels still don't show.

Re: Label Feature Layer created by Feature Collection

RobertScheitlin__GISP — Thu, 27 Apr 2017 13:33:02 GMT

Zdeněk,

I just tested this in a widget before I posted here so I know it works.

Also here a thread that I answered this before and Anthony got it to work too:

https://community.esri.com/thread/185052-feature-layer-labels-custom-widget

Re: Label Feature Layer created by Feature Collection

RobertScheitlin__GISP — Fri, 28 Apr 2017 12:51:54 GMT

Zdeněk,

You should post your widget so I can find your mistake.

Re: Label Feature Layer created by Feature Collection

ZdeněkSoldán — Fri, 28 Apr 2017 13:16:26 GMT

Robert,

In my widget I use web services to read data I need. You wouldn't have an access to this web services so I change my code and there is one point in one FL made from FeatureCollection.

Here you can download the widget.

https://uloz.to/!V3C2N0jtpa9h/position-rar

Re: Label Feature Layer created by Feature Collection

RobertScheitlin__GISP — Fri, 28 Apr 2017 16:09:50 GMT

Zdeněk,

It has to do with your WKID of the data being set to 102067. I need to do some more testing. Can you provide me a url to use as a basemap on a new web map so I can have my map in WKID 102067? When I set the geometry to use WKID 102100 the labels showed (one I projected the coords to 102100).

Re: Label Feature Layer created by Feature Collection

ZdeněkSoldán — Fri, 28 Apr 2017 17:02:31 GMT

Robert,

Sure. Here is an ortophoto map with SP 102067

ortofoto (MapServer)

Re: Label Feature Layer created by Feature Collection

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:57:48 GMT

Zdeněk,

Not real sure why but it turns out it was an issue in the way you were defining your graphic:

        //var geometry = new Point({"x":"-605982.51","y":"-1162677.18","spatialReference":{"wkid":102067}});
        var geometry = new Point(-605982.51,-1162677.18, new SpatialReference({"wkid":102067}));‍‍‍‍

Re: Label Feature Layer created by Feature Collection

ZdeněkSoldán — Sat, 29 Apr 2017 06:47:41 GMT

Robert,

Thank you very much. Now it works!

Re: Label Feature Layer created by Feature Collection

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:57:51 GMT

Zdeněk,

FYI, I thought I would pass along the reason that my code changed worked and your was not working, now that I have figured it out. The issue is the use of the x and y field values as STRINGS in the new Point. You need to pass your X and Y as a number and not a string for it to work.

//This is attempting to pass the X and Y as strings
/var geometry = new Point({"x":"-605982.51","y":"-1162677.18","spatialReference":{"wkid":102067}});

//This is passing them as numbers
var geometry = new Point(-605982.51,-1162677.18, new SpatialReference({"wkid":102067}));

//This would work as well
var geometry = new Point({"x":-605982.51,"y":-1162677.18,"spatialReference":{"wkid":102067}});‍‍‍‍‍‍‍‍