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.
Robert,
Its 2.2
Mohan,
Because you are using WAB 2.2 you need to open the apps main config.json file and find the mapOptions object and add the "showLabels": true property.
Already I have set that property , see the below code attached. . Label is working for dynamic polygon layer (same code) . Its not working for the dynamic point layer.
"map": {
"3D": false,
"2D": true,
"position": {
"left": 0,
"top": 40,
"right": 0,
"bottom": 0
},
"itemId": "056a31fb8e614c06b69cf0c5ff9ca0d8",
"mapOptions": {"showLabels":true},
"id": "map",
"portalUrl": "https://servername:7443/arcgis"
},
Hi Robert,
The above code is working for me if I use esri base map . My scenario is my base map using geographic coordinate system(gcs)4326 . If i use the above code for gcs base map label is not displaying and only points are showing on the map.
I have created a map service(gcs) in arcgis server and using that service as a base map in my web app builder application . This is how I am consuming the base map , is that anything wrong in this approach ?
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);
},
Hi Robert,
After including the parseFloat the label is working . Thanks for the Help.