topic Re: How to label point feature class (created dynamically ) in WAB ?. in ArcGIS JavaScript Maps SDK Questions

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

mohannainar1 — Wed, 08 Nov 2017 12:31:30 GMT

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);

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

RobertScheitlin__GISP — Wed, 08 Nov 2017 14:29:10 GMT

Mohan,

var feature = new Object();‍

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

var feature = new Graphic();‍

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

mohannainar1 — Thu, 09 Nov 2017 05:44:21 GMT

Hi Robert,

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

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

RobertScheitlin__GISP — Thu, 09 Nov 2017 17:22:39 GMT

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?

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

mohannainar1 — Fri, 10 Nov 2017 05:17:46 GMT

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.

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

RobertScheitlin__GISP — Fri, 10 Nov 2017 14:03:09 GMT

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?

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

mohannainar1 — Sat, 11 Nov 2017 04:13:32 GMT

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 ? .

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

RobertScheitlin__GISP — Mon, 13 Nov 2017 14:30:20 GMT

Mohan,

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

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

mohannainar1 — Mon, 13 Nov 2017 16:22:50 GMT

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.

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

RobertScheitlin__GISP — Mon, 13 Nov 2017 16:31:22 GMT

Mohan,

What version of WAB are you using?

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

mohannainar1 — Mon, 13 Nov 2017 17:03:04 GMT

Robert,

Its 2.2

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

RobertScheitlin__GISP — Tue, 14 Nov 2017 16:43:19 GMT

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.

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

mohannainar1 — Wed, 15 Nov 2017 04:51:04 GMT

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

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

RobertScheitlin__GISP — Wed, 15 Nov 2017 14:44:28 GMT

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).

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

mohannainar1 — Thu, 16 Nov 2017 07:04:47 GMT

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 ?

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

RobertScheitlin__GISP — Sun, 12 Dec 2021 02:59:47 GMT

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

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

mohannainar1 — Fri, 17 Nov 2017 05:05:55 GMT

Hi Robert,

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