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

mohannainar1 · ‎11-08-2017

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

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 +"} " + this.mainField + " : ${"+ this.mainField +"} " + this.config.LAT_FIELD + " : ${"+ this.config.LAT_FIELD +"} "+ this.config.LONG_FIELD + " : ${"+ this.config.LONG_FIELD +"} "+ this.config.TIME_FIELD + " : ${"+ this.config.TIME_FIELD +"} ");
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);

mohannainar1 · ‎11-13-2017

Robert,

Its 2.2

RobertScheitlin__GISP · ‎11-14-2017

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.

mohannainar1 · ‎11-14-2017

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"
},

RobertScheitlin__GISP · ‎11-15-2017

Mohan,

OK here is your widget working with lots of changes and cleanup (i have changed many files so be sure to use the whole zip).

mohannainar1 · ‎11-15-2017

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 ?

RobertScheitlin__GISP · ‎11-16-2017

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);
      },
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

mohannainar1 · ‎11-16-2017

Hi Robert,

After including the parseFloat the label is working . Thanks for the Help.