How to label feature layer

895
8
07-03-2018 10:15 AM
scottmiller10
New Contributor II

In my app, I construct a FeatureLayer with data from a query, and I want to add a label to the polylines that display the data value. I've tried a couple things, including the code below, but nothing has worked. 

layer.hasLabels = true;
var labelSymbol = new esri.symbol.TextSymbol('');

var json = {
   "labelExpressionInfo": {"value": "{thecolor}"},
   "useCodedValues": false,
   "labelPlacement":"above-start",
   "fieldInfos": [{fieldName: "thecolor"}]
};
this.map.showLabels = true;
//create instance of LabelClass
var lc = new LabelClass(json);
lc.symbol = labelSymbol; // symbol also can be set in LabelClass' json
layer.setLabelingInfo([ lc ]);

Tags (1)
0 Kudos
8 Replies
RobertScheitlin__GISP
MVP Emeritus

Scott,

   Your define array is out of sequence.

define([
    'dojo/_base/declare',
    "dijit/_WidgetsInTemplateMixin",
    "jimu/BaseWidget",
    "jimu/dijit/TabContainer",
    'dojo/dom-attr',
    'dijit/form/CheckBox',
    "dijit/layout/ContentPane",
    'dijit/form/FilteringSelect',
    'jimu/dijit/Message', //tyler
    'jimu/MapManager', //tyler
    'jimu/filterUtils', //tyler
...

],
  function(declare, _WidgetsInTemplateMixin, BaseWidget, TabContainer, domAttr, CheckBox, ContentPane,
    FilteringSelect, Message, jimuUtils, MapManager, utils, esriConfig, urlUtils, Query, QueryTask, LabelClass, TextSymbol, Font, StatisticDefinition, Geoprocessor, FeatureSet,

It's all fine until you get to "Message" then you have "jimuUtils" in the function vars list but there is not a matching "jimu/utils" in the define array. So what that means is that the var "jimuUtils" is now associated with "MapManager" and "MapManager" is linked to "filterUtils" etc, etc.

scottmiller10
New Contributor II

Robert,

I went through the define and imports and cleaned them up, but the labels still won't show up. Do I have to change the code somehow? I'm trying to get the labels to accompany polylines painted with a classbreaksrenderer.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Scott,

   This is what your define array looks like cleaned up (i.e removing the unused classes and proper ordering):

define([
    'dojo/_base/declare',
    "dijit/_WidgetsInTemplateMixin",
    "jimu/BaseWidget",
    "esri/tasks/query",
    "esri/tasks/QueryTask",
    "esri/layers/LabelClass",
    "esri/symbols/TextSymbol",
    "esri/symbols/Font",
    "esri/tasks/StatisticDefinition",
    "esri/symbols/SimpleLineSymbol",
    "esri/Color",
    "esri/renderers/ClassBreaksRenderer",
    "dojo/_base/lang",
    "dojo/on",
    "dojo/dom",
    "dojo/_base/array",
    "dojo/_base/html",
    "esri/layers/FeatureLayer",
    "esri/domUtils",
    
//classes used in the html template but not directly in code
    'jimu/dijit/FeatureSetChooserForMultipleLayers',
    "jimu/dijit/TabContainer",
    'dijit/form/CheckBox',
    "dijit/layout/ContentPane",
    'dijit/form/FilteringSelect',
    "dijit/Dialog",
    "dijit/ProgressBar",
    "dijit/form/NumberSpinner",
    "dijit/form/Select",
    "dijit/form/TextBox",
    'jimu/dijit/ViewStack',

    "dojo/domReady!"

  ],
  function(
    declare, _WidgetsInTemplateMixin, BaseWidget, Query, QueryTask, LabelClass, 
    TextSymbol, Font, StatisticDefinition,
    SimpleLineSymbol, Color, ClassBreaksRenderer,
    lang, on, dom, array, html, FeatureLayer, esriUtils
  ) {‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

The other thing I see is that I never specify a empty string for my TextSymbol.

var labelSymbol = new TextSymbol();

and you can have a simpler json:

        var json = {
          "labelExpressionInfo": {
            "value": "{thecolor}"
          }
        };
scottmiller10
New Contributor II

Robert,

When i added those changes, for some reason the polylines don't paint anymore, almost like adding the labels (which also aren't showing up) erases the symbol in the graphics.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Scott,

  Are there any errors in the browsers web console?

0 Kudos
scottmiller10
New Contributor II

Robert,

No, no errors in the console. I'm console.logging the layer, and i see it has an attribute 'hashtmlpopup'. Is there something I could do like adding html labels above the polylines?

0 Kudos
scottmiller10
New Contributor II

Or is there a way I can iterate through the graphics in the feature layer and add the text symbols to the graphics?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Yes, you could add TextSymbol graphics to the map but that should not be necessary. You should strip down and simplify your widget to test more.