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);
Solved! Go to Solution.
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);
},
Mohan,
var feature = new Object();
The feature should not be an object it should be an esri Graphic:
var feature = new Graphic();
Hi Robert,
I changed to Graphic , still i could not able to see the label information on the map.
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?
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.
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?
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 ? .
Mohan,
Is there sensitive info in the widget code? I normally prefer to keep GeoNet help communication on GeoNet.
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.
Mohan,
What version of WAB are you using?