Feature Layer Labels Custom Widget

2102
12
Jump to solution
10-26-2016 12:15 PM
AnthonyGiles
Frequent Contributor II

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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;

View solution in original post

12 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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
Frequent Contributor II

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);          
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Antony,

You need:

this._featureLayer = new FeatureLayer(featureCollection,{
  outFields: ["*"],
  showLabels: true
});
0 Kudos
AnthonyGiles
Frequent Contributor II

Robert,

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

Regards

Anthony

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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?

0 Kudos
AnthonyGiles
Frequent Contributor II

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

0 Kudos
AnthonyGiles
Frequent Contributor II

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
Frequent Contributor II

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

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

Regards

Anthony

0 Kudos
AnthonyGiles
Frequent Contributor II

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

0 Kudos