How to label point feature class (created dynamically ) in WAB ?.

1482
16
Jump to solution
11-08-2017 04:31 AM
mohannainar1
New Contributor III

The below labeling code is working for polygon layer (created dynamically) but not the point layer(created dynamically). 

var statesColor = new Color("#060606");
var statesLabel = new TextSymbol().setColor(statesColor);
statesLabel.font.setSize("12pt");
statesLabel.font.setFamily("arial");
var json = {
"labelExpressionInfo": {"value": "{ENTITY_FIELD}"},"labelPlacement":"above-right"
};
var labelClass = new LabelClass(json);
labelClass.symbol = statesLabel;
this.temporalLayer.setLabelingInfo([ labelClass ]);
this.map.addLayer(this.temporalLayer);

Complete code for point layer is below . The dynamic layer is geographic coordinate system . 



var pt = null;
var jsonFS = new Object();
jsonFS.geometryType = "esriGeometryPoint";
var features = [];

renderer = new SimpleRenderer(new SimpleMarkerSymbol());
renderer.symbol.setColor(selectedColor);

for (i = 0; i < this.fromExcel.length; i++) {

var attributeObj = new Object();
attributeObj.OBJECTID = i+1;
attributeObj.LATITUDE = this.fromExcel[this.config.LAT_FIELD];
attributeObj.LONGITUDE = this.fromExcel[this.config.LONG_FIELD];
attributeObj[this.mainField] = this.fromExcel[this.mainField];
attributeObj[this.config.TIME_FIELD]= this.fromExcel[this.config.TIME_FIELD];
attributeObj[this.config.SLIDER_FIELD]= this.fromExcel[this.config.SLIDER_FIELD];
attributeObj[this.config.ENTITY_FIELD]= this.fromExcel[this.config.ENTITY_FIELD];
var feature = new Object();
feature.attributes = attributeObj;
pt = new Point(this.fromExcel[this.config.LONG_FIELD],this.fromExcel[this.config.LAT_FIELD],this.map.spatialReference);
feature.geometry = pt;
features.push(feature);

}

jsonFS.features = features;
var featureSet = new FeatureSet(jsonFS);
var infoTemplate = new InfoTemplate(this.mainField + " : ${"+ this.mainField +"}", this.config.ENTITY_FIELD + " : ${"+ this.config.ENTITY_FIELD +"}<br>" + this.mainField + " : ${"+ this.mainField +"}<br>" + this.config.LAT_FIELD + " : ${"+ this.config.LAT_FIELD +"}<br>"+ this.config.LONG_FIELD + " : ${"+ this.config.LONG_FIELD +"}<br>"+ this.config.TIME_FIELD + " : ${"+ this.config.TIME_FIELD +"}<br>");
var featureCollection = {
layerDefinition:
{
"displayFieldName": this.mainField,
"geometryType": "esriGeometryPoint",
"spatialReference":
{
"latestWkid": 4326,
"wkid": 4326
},
"fields": [
{
"name": "OBJECTID",
"type": "esriFieldTypeOID",
"alias": "OBJECTID"
},
{
"name": this.config.LAT_FIELD,
"type": "esriFieldTypeString",
"alias": this.config.LAT_FIELD
},
{
"name": this.config.LONG_FIELD,
"type": "esriFieldTypeString",
"alias": this.config.LONG_FIELD
},
{
"name": this.mainField,
"type": "esriFieldTypeInteger",//"esriFieldTypeInteger",
"alias": this.mainField
},
{
"name": this.config.TIME_FIELD,
"type": "esriFieldTypeDate",//"esriFieldTypeInteger",
"alias": this.config.TIME_FIELD
},
{
"name": this.config.SLIDER_FIELD,
"type": "esriFieldTypeString",
"alias": this.config.SLIDER_FIELD
},
{
"name": this.config.ENTITY_FIELD,
"type": "esriFieldTypeString",
"alias": this.config.ENTITY_FIELD
},
{
"name": "shape",
"type": "esriFieldTypeGeometry",
"alias": "shape"
}
]
}, featureSet: featureSet,
"exceededTransferLimit": false
};


var featureLayerOptions = {
mode: FeatureLayer.MODE_SNAPSHOT,
outFields: ["*"],
infoTemplate: infoTemplate,
id: "ENTITY DATA"
};
this.temporalLayer = new FeatureLayer(featureCollection,featureLayerOptions);
var extent = graphicsUtils.graphicsExtent(featureSet.features);
this.map.setExtent(extent.expand(1.2));



this.temporalLayer.setRenderer(renderer);

var statesColor = new Color("#060606");
var statesLabel = new TextSymbol().setColor(statesColor);
statesLabel.font.setSize("12pt");
statesLabel.font.setFamily("arial");
var json = {
"labelExpressionInfo": {"value": "{ENTITY_FIELD}"},"labelPlacement":"above-right"
};
var labelClass = new LabelClass(json);
labelClass.symbol = statesLabel;
this.temporalLayer.setLabelingInfo([ labelClass ]);
this.map.addLayer(this.temporalLayer);

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Mohan,

   OK, the fix is to parse the lat and lon field values before attempting to create a Point from them (use this whole updated function):

      CreateFCTimeSlider: function() {
        //debugger;
        var pt = null;
        if(this.temporalLayer) {
          this.temporalLayer.clear();
          this.map.removeLayer(this.temporalLayer);
        }

        var jsonFS = new Object();
        jsonFS.geometryType = "esriGeometryPoint";
        var features = [];

        for(i = 0; i < this.fromExcel.length; i++) {
          var dataAttr = new Date(this.fromExcel[i][this.config.TIME_FIELD])
          if(dataAttr.toDateString() == this.dateValue.toDateString()) {
            var attributeObj = new Object();
            attributeObj.OBJECTID = i + 1;
            attributeObj.LATITUDE = this.fromExcel[i][this.config.LAT_FIELD];
            attributeObj.LONGITUDE = this.fromExcel[i][this.config.LONG_FIELD];
            attributeObj[this.mainField] = this.fromExcel[i][this.mainField];
            attributeObj[this.config.TIME_FIELD] = this.fromExcel[i][this.config.TIME_FIELD];
            attributeObj[this.config.SLIDER_FIELD] = this.fromExcel[i][this.config.SLIDER_FIELD];
            attributeObj[this.config.ENTITY_FIELD] = this.fromExcel[i][this.config.ENTITY_FIELD];
            var feature = new Graphic();
            feature.attributes = attributeObj;
            pt = new Point(parseFloat(this.fromExcel[i][this.config.LONG_FIELD]), parseFloat(this.fromExcel[i][this.config.LAT_FIELD]), new SpatialReference({"wkid":4326}));
            feature.geometry = pt;
            features.push(feature);
          }
        }

        jsonFS.features = features;
        var featureSet = new FeatureSet(jsonFS);
        var infoTemplate = new InfoTemplate(this.mainField + " : ${" + this.mainField + "}", this.config.ENTITY_FIELD + " : ${" + this.config.ENTITY_FIELD + "}<br>" + this.mainField + " : ${" + this.mainField + "}<br>" + this.config.LAT_FIELD + " : ${" + this.config.LAT_FIELD + "}<br>" + this.config.LONG_FIELD + " : ${" + this.config.LONG_FIELD + "}<br>" + this.config.TIME_FIELD + " : ${" + this.config.TIME_FIELD + "}<br>");
        var featureCollection = {
          layerDefinition: {
            "displayFieldName": this.mainField,
            "geometryType": "esriGeometryPoint",
            "spatialReference": {
              "latestWkid": 4326,
              "wkid": 4326
            },
            "fields": [{
                "name": "OBJECTID",
                "type": "esriFieldTypeOID",
                "alias": "OBJECTID"
              },
              {
                "name": this.config.LAT_FIELD,
                "type": "esriFieldTypeString",
                "alias": this.config.LAT_FIELD
              },
              {
                "name": this.config.LONG_FIELD,
                "type": "esriFieldTypeString",
                "alias": this.config.LONG_FIELD
              },
              {
                "name": this.mainField,
                "type": "esriFieldTypeInteger", //"esriFieldTypeInteger",
                "alias": this.mainField
              },
              {
                "name": this.config.TIME_FIELD,
                "type": "esriFieldTypeDate", //"esriFieldTypeInteger",
                "alias": this.config.TIME_FIELD
              },
              {
                "name": this.config.SLIDER_FIELD,
                "type": "esriFieldTypeString",
                "alias": this.config.SLIDER_FIELD
              },
              {
                "name": this.config.ENTITY_FIELD,
                "type": "esriFieldTypeString",
                "alias": this.config.ENTITY_FIELD
              },
              {
                "name": "shape",
                "type": "esriFieldTypeGeometry",
                "alias": "shape"
              }
            ]
          },
          featureSet: featureSet,
          "exceededTransferLimit": false
        };

        var featureLayerOptions = {
          mode: FeatureLayer.MODE_SNAPSHOT,
          outFields: ["*"],
          infoTemplate: infoTemplate,
          id: "ENTITY TEMPORAL DATA"
        };

        this.temporalLayer = new FeatureLayer(featureCollection, featureLayerOptions);
        var extent = graphicsUtils.graphicsExtent(featureSet.features);
        this.map.setExtent(extent.expand(1.2));

        var labelColor = new Color("#060606");
        var entityTextSymbol = new TextSymbol().setColor(labelColor);
        entityTextSymbol.font.setSize("12pt");
        entityTextSymbol.font.setFamily("arial");
        var json1 = {
          "labelExpressionInfo": {
            "value": "{" + this.mainField + "}"
          },
          "labelPlacement": "above-right"
        };
        var lblClass = new LabelClass(json1);
        lblClass.symbol = entityTextSymbol;
        this.temporalLayer.setLabelingInfo([lblClass]);
        this.map.addLayer(this.temporalLayer);

        var rendererField = this.mainField;
        var min;
        var max;
        var minMax = [];
        numRanges = 5;
        for(i = 0; i < this.temporalLayer.graphics.length; i++) {
          minMax.push(parseInt(this.temporalLayer.graphics[i].attributes[this.mainField]));
        }
        max = Math.max.apply(null, minMax);
        min = Math.min.apply(null, minMax);

        var breaks = (max - min) / numRanges;
        var outline = new SimpleLineSymbol().setWidth(1);
        var fillColor = selectedColor;
        var defaultSymbol = new SimpleMarkerSymbol().setSize(2).setOutline(outline);
        var classBreakRenderer = new ClassBreaksRenderer(defaultSymbol, rendererField);
        //add the breaks using the interval calculated above
        for(var i = 0; i < numRanges; i++) {
          classBreakRenderer.addBreak(parseInt(min + (i * breaks)), parseInt(min + ((i + 1) * breaks)), new SimpleMarkerSymbol().setSize((i + 1) * 6).setColor(fillColor).setOutline(outline));
        }
        this.temporalLayer.setRenderer(classBreakRenderer);
      },

View solution in original post

16 Replies
RobertScheitlin__GISP
MVP Emeritus

Mohan,

var feature = new Object();

The feature should not be an object it should be an esri Graphic:

var feature = new Graphic();
0 Kudos
mohannainar1
New Contributor III

Hi Robert,

I changed to Graphic , still i could not able to see the label information on the map.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Mohan,

  Are the points showing up and just the labels are not? Have you opened the LayerList widget and found your layer and clicked on the action menu and clicked on the show labels?

0 Kudos
mohannainar1
New Contributor III

Hi Robert,

Yes only points are showing up in the map. I am creating dynamic feature layer(point), so I guess show label option will not visible in layer list widget. Am attaching the screen shot of Layer list widget.

When I debug the code its not giving any error message . The same code(displaying label) is working for polygon dynamic layer. 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Mohan,

   I just tested adding labels to a feature layer that comes from a featureCollection yesterday (my eSearch widget creates a FeatureCollection client side) and it worked fine so I am having a hard time finding your issue. Would you be willing to share your whole widget for testing?

0 Kudos
mohannainar1
New Contributor III

Yes Robert I will share my widget . Here is holiday so I can share it on Monday(11/13) only . My email id is mohannainar@gmail.com . Is it ok if I can send the code through email ? .

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Mohan,

  Is there sensitive info in the widget code? I normally prefer to keep GeoNet help communication on GeoNet.

0 Kudos
mohannainar1
New Contributor III

Hi Robert,

No sensitive information.


This widget will read the excel file and display on the map. To read the excel file "jquery.min.js" and "xlsx.core.min.js" files needs to be added in the application. As you know we also need to modify the "main.js" file .Java script files( Reading excel) can be found in "ToReadExcelFile" folder. Also you can find the sample.xlsx file in “ToReadExcelFile" folder . Let me know if you need any further infomation is required.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Mohan,

   What version of WAB are you using?

0 Kudos