AnsweredAssumed Answered

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

Question asked by esrimohan on Nov 8, 2017
Latest reply on Nov 16, 2017 by esrimohan

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[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 Object();
feature.attributes = attributeObj;
pt = new Point(this.fromExcel[i][this.config.LONG_FIELD],this.fromExcel[i][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);

Outcomes