Feature Layer Labels Custom Widget

[AnthonyGiles]

Hi All,

i am creating a custom widget that utilises a feature layer created either from a feature collection or a URL to an existing published feature service (I have tried both methods). I want to label the features but I have tried every possibility going with no luck.

if I create a sample HTML page using the 3.18 JS library out side of WAB I can get the labels to appear. I think the issue is setting the map.showLabels to true within the widget.

To experiment a little further I have tried turning the map attribution off within the widget using map.showAttribution = false but this does not work either. I see there is no getter or setter methods for changing these attributes to the map object.

has anyone else managed to get labels to work on a feature layer within a WAB widget? Or is this a limitation of WAB?

Regards

Anthony

[RobertScheitlin__GISP · Accepted solution]

Anthony,

   In the Apps jimu.js/MapManager.js find the _show2DWebMap function and make this addition (line 3):

        var mapOptions = this._processMapOptions(appConfig.map.mapOptions) || {};
        mapOptions.isZoomSlider = false;
        mapOptions.showLabels = true;‍‍‍

[AnthonyGiles]

Hi Robert

Your fix off changing the _show2DWebMap function in the jimu.js/MapManager.js file worked for adding labels when the feature class is created from a URL, but I am still having issues when creating the feature class from a feature collection within the client.

Below is a snippet of the JavaScript where I am setting up the label class and applying it to the feature layer. If the feature layer is created from an existing feature layer from a URL the labeling works (commented out below), if the layer is created from a feature collection it does show the labels. Is there anything else I need to enable to show the labels when using a feature collection?

Thanks for your help so far,

Regards

Anthony

// create a renderer for the grg layer to override default symbology
var gridColor = new Color("#000");
var gridLine = new SimpleLineSymbol("solid", gridColor, 1.5);
var gridSymbol = new SimpleFillSymbol("solid", gridLine, null);
var gridRenderer = new SimpleRenderer(gridSymbol);

var featureCollection = {
  "layerDefinition": {
    "geometryType": "esriGeometryPolygon",
    "fields": [{
    "name": "grid",
    "alias": "grid",
    "type": "esriFieldTypeString"
    }]
  }
};

// create a text symbol to define the style of labels
var GRGLabel = new TextSymbol().setColor(gridColor);
GRGLabel.font.setSize("12pt");
GRGLabel.font.setFamily("arial");

var json = {
  "labelExpressionInfo": {"value": "{grid}"}
};

var labelClass = new LabelClass(json);

labelClass.symbol = GRGLabel;

this._featureLayer = new FeatureLayer(featureCollection,{
  outFields: ["*"]
});

//this._featureLayer = new FeatureLayer("https://xxxx/ags/rest/services/GRG_Layer/FeatureServer/0",{
  //outFields: ["*"]
//});

this._featureLayer.setRenderer(gridRenderer);
this._featureLayer.setLabelingInfo([ labelClass ]);

this.map.addLayer(this._featureLayer);          
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Antony,

You need:

this._featureLayer = new FeatureLayer(featureCollection,{
  outFields: ["*"],
  showLabels: true
});‍‍‍‍

[AnthonyGiles]

Robert,

That property is set to true by default, I have tried setting it manually but no luck

Regards

Anthony

[RobertScheitlin__GISP]

Antony,

Hmm.

If true, any FeatureLayer added to the map will automatically label based on labelingInfo. Default is false. Added at v3.11

I have not tested with a FeatureLayer created from a FeatureCollection. Did you say that you tested this in JS API app and you can get  a FeatureCollection FeatureLayer to label?

[AnthonyGiles]

Hi Robert,

Yes when I label in a straight forward page outside of Web AppBuilder it works fine.

I have just sent you an email to your work account with the widget attached for you to look at

Regards

Anthony

[AnthonyGiles]

Hi Robert,

After a certain amount of head scratching and a lot of code chasing, I managed to figure out the issue of the features not labelling, it was nothing to do with the set up of my labels, it was how the geometry of the feature was created, if the ring of the polygon was created anti clockwise the feature would not label, ensuring all polygon rings are created clockwise sorted it out.

There is a function within the JavaScript API on polygon geometry that checks if the geometry is clockwise:

Polygon | API Reference | ArcGIS API for JavaScript 3.18 

Hope this stops other people from the headache,

Regards

Anthony

[AnthonyGiles]

By the way you can also set the map properties inside the main config.json

"mapOptions": {
"showAttribution": false,
"showLabels": true
},

Regards

Anthony

[AnthonyGiles]

Robert,

Thanks for the rapid response, I have logged off for the evening, so will give your response a try first thing in the morning and let you know how I get on.

its a shame you cannot change this parameter in the widget so you can distribute to existing apps without having to then go and change other external files to the widget.

thanks again,

Anthony