Using Feature Attribute Field as TextSymbol

[CharlesGant]

Hello,

I've been trying to figure this out for about two days now.  I have a CSVLayer that I'm plotting using a standard marker symbol.  I have to use a symbol because I need to be able to sample the points as a graphic layer for the popup widget.  Which all works fine.  However, I need to NOT plot a simple marker symbol, I need the symbol to be a TextSymbol that is one of the attribute fields of the CSVLayer.  I cannot find a good example online anywhere.  This doesn't seem like it should be this hard.  Does anyone have an example or can tell me where to find an applicable example? 

Thanks in advance!

[CharlesGant]

Can anyone help me out?

[CharlesGant]

So here is the code I currently have.  The issue is that I'm not pulling in the "value" attribute field.  With this code, it just plots a TextSymbol of the word "value".  I know this is the correct method for using a label layer, but as said above I cant use that since I need to be able to use the popup widget on the graphics layer.  Can anyone help me out?

   //Add Latest RiverStages CSV Layers
   var riverCSVtemplate = new InfoTemplate();
   riverCSVtemplate.setContent(getriverCSVTextContent);
          var LatestRiverStages = new CSVLayer("./data/riverquery.csv",{id:"LatestRiverStages",mode: FeatureLayer.MODE_SELECTION,outFields: ["*"],infoTemplate: riverCSVtemplate});
   
                        var Green = new Color([0, 255, 0, 1.0]);
   var labelField = "value";
   var symbol = new TextSymbol();
   symbol.setAlign = TextSymbol.ALIGN_MIDDLE;
   var font  = new Font();
   font.setSize("8pt");
   font.setWeight(Font.WEIGHT_BOLD);
   symbol.setFont(font)
   symbol.setText("${" + labelField + "}")
   symbol.setColor(new Color(Green));
   var renderer = new SimpleRenderer(symbol);
   LatestRiverStages.setRenderer(renderer);
   map.addLayer(LatestRiverStages);
   // LatestRiverStages.hide();

[CharlesGant]

Just wanted to bump this back to the top.  Still looking for an answer.

[CharlesGant]

Just wanted to bump this back to the top. Still looking for an answer.

[JakeSkinner]

Hi Charles,

Using the 'update-end' event for the CSVLayer class, I was able to obtain the feature's attributes, and then use this as a TextSymbol.  Here is the code I used:

var map, csv;

  require([
    "esri/map", 
    "esri/layers/CSVLayer",
    "esri/Color",
    "esri/graphic",
    "esri/layers/GraphicsLayer",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/renderers/SimpleRenderer",
    "esri/InfoTemplate",
    "esri/urlUtils",
    "esri/symbols/Font", 
    "esri/symbols/TextSymbol",
    "dojo/on",
    "dojo/_base/array",
    "dojo/domReady!"
  ], function(
    Map, CSVLayer, Color, 
    Graphic, GraphicsLayer,
    SimpleMarkerSymbol, SimpleRenderer, 
    InfoTemplate, urlUtils, Font, TextSymbol,
    on, array
  ) {
    urlUtils.addProxyRule({
      proxyUrl: "http://server1/proxy/proxy.ashx",
      urlPrefix: "skinner-lap"
    });

    map = new Map("map", {
      basemap: "gray",
      center: [ -60, -10 ],
      zoom: 4 
    });
    
    csv = new CSVLayer("http://server1/UserData/2.5_week.csv", {
      copyright: "USGS.gov"
    });
    
    csv.on("update-end", function(results){
        var textLayer = new GraphicsLayer();
        
        array.forEach(results.target.graphics, function(feature, index){
            var geom = feature.geometry;
            var displayText = feature.attributes.id;
            
            var font = new Font(
                "12pt",
                Font.STYLE_NORMAL, 
                Font.VARIANT_NORMAL,
                Font.WEIGHT_BOLD,
                "Helvetica"
            );
             
            var textSymbol = new TextSymbol(
                displayText,
                font,
                new Color("#DC143C")
            );
                                    
            textLayer.add(new Graphic(geom, textSymbol));
        });
        
        map.addLayer(textLayer);
    });                                
    
    var blank = new Color([0, 0, 0, 0]); // hex is #ff4500
    var marker = new SimpleMarkerSymbol("solid", 0, null, blank);
    var renderer = new SimpleRenderer(marker);
    csv.setRenderer(renderer);
    map.addLayer(csv);    
  });

[CharlesGant]

Thank you so much for the reply.  I tried to implement the code you provided but for some reason it does not seem to be entering the Arrayutils function.  I printed some text to console to see where it was failing and that seems to be the place.  I triple checked to make sure I had all the needed modules pulled in at the top.  Any ideas?

//Add Latest RiverStages CSV Layers
   var riverCSVtemplate = new InfoTemplate();
   riverCSVtemplate.setContent(getriverCSVTextContent);
      var LatestRiverStages = new CSVLayer("symGSPHydroViewer/data/riverquery.csv",{id:"LatestRiverStages",mode: FeatureLayer.MODE_SELECTION,outFields: ["*"],infoTemplate: riverCSVtemplate});
   
   console.log("HERE1");
   LatestRiverStages.on("update-end", function(results){
   var textLayer = new GraphicsLayer();
   console.log("HERE2");
   array.forEach(results.target.graphics, function(feature, index){
   console.log("HERE3");
            var geom = feature.geometry;
            var displayText = feature.attributes.value;
            var font = new Font(
                "12pt",
                Font.STYLE_NORMAL, 
                Font.VARIANT_NORMAL,
                Font.WEIGHT_BOLD,
                "Helvetica"
            );
             
            var textSymbol = new TextSymbol(
                displayText,
                font,
                new Color("#DC143C")
            );
                                    
            textLayer.add(new Graphic(geom, textSymbol));
   });
        
   map.addLayer(textLayer);
   });                                
    
   console.log("HERE4");
   var blank = new Color([0, 0, 0, 0]); // hex is #ff4500
   var marker = new SimpleMarkerSymbol("solid", 0, null, blank);
   var renderer = new SimpleRenderer(marker);
   LatestRiverStages.setRenderer(renderer);
   map.addLayer(LatestRiverStages);   
   console.log("HERE5");

Hi Charles,

Using the 'update-end' event for the CSVLayer class, I was able to obtain the feature's attributes, and then use this as a TextSymbol.  Here is the code I used:

var map, csv;

  require([
    "esri/map", 
    "esri/layers/CSVLayer",
    "esri/Color",
    "esri/graphic",
    "esri/layers/GraphicsLayer",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/renderers/SimpleRenderer",
    "esri/InfoTemplate",
    "esri/urlUtils",
    "esri/symbols/Font", 
    "esri/symbols/TextSymbol",
    "dojo/on",
    "dojo/_base/array",
    "dojo/domReady!"
  ], function(
    Map, CSVLayer, Color, 
    Graphic, GraphicsLayer,
    SimpleMarkerSymbol, SimpleRenderer, 
    InfoTemplate, urlUtils, Font, TextSymbol,
    on, array
  ) {
    urlUtils.addProxyRule({
      proxyUrl: "http://server1/proxy/proxy.ashx",
      urlPrefix: "skinner-lap"
    });

    map = new Map("map", {
      basemap: "gray",
      center: [ -60, -10 ],
      zoom: 4 
    });
    
    csv = new CSVLayer("http://server1/UserData/2.5_week.csv", {
      copyright: "USGS.gov"
    });
    
    csv.on("update-end", function(results){
        var textLayer = new GraphicsLayer();
        
        array.forEach(results.target.graphics, function(feature, index){
            var geom = feature.geometry;
            var displayText = feature.attributes.id;
            
            var font = new Font(
                "12pt",
                Font.STYLE_NORMAL, 
                Font.VARIANT_NORMAL,
                Font.WEIGHT_BOLD,
                "Helvetica"
            );
             
            var textSymbol = new TextSymbol(
                displayText,
                font,
                new Color("#DC143C")
            );
                                    
            textLayer.add(new Graphic(geom, textSymbol));
        });
        
        map.addLayer(textLayer);
    });                                
    
    var blank = new Color([0, 0, 0, 0]); // hex is #ff4500
    var marker = new SimpleMarkerSymbol("solid", 0, null, blank);
    var renderer = new SimpleRenderer(marker);
    csv.setRenderer(renderer);
    map.addLayer(csv);    
  });

[CharlesGant]

Jake,

So I noticed that I was using arrayUtils vs array, I so I switched the array call to arrayUtils and the values plotted.  However, using the below code, I was not able to sample the graphic.

   function getriverCSVTextContent (graphic) {
                        var attributes = graphic.attributes;
   var value = "Obs Value: " + attributes.value;
   var validtime = "Valid Time: " + attributes.validtime;
   return value + "</b><br />" + validtime
   }

[JakeSkinner]

Hi Charles,

When are you calling this function?  Can you post your code and possibly the CSV file you are using?

[CharlesGant]

Hi Charles,

When are you calling this function?  Can you post your code and possibly the CSV file you are using?

Hi Jake,

I cant post the code due to the length.  Is there another way I can get it to you and long with the CSV file?  Can I email it to you?  The majority of the data used is on a local intranet thus I cant post it on Jfiddle as the data will be inaccessible.  Below is a snippet.

   //Add Latest RiverStages CSV Layers
   var riverCSVtemplate = new InfoTemplate();
   riverCSVtemplate.setContent(getriverCSVTextContent);
      var LatestRiverStages = new CSVLayer("symGSPHydroViewer/data/riverquery.csv",{id:"LatestRiverStages",mode: FeatureLayer.MODE_SELECTION,outFields: ["*"],infoTemplate: riverCSVtemplate});
   
   console.log("HERE1");
   LatestRiverStages.on("update-end", function(results){
   var textLayer = new GraphicsLayer();
   console.log("HERE2");
   arrayUtils.forEach(results.target.graphics, function(feature, index){
   console.log("HERE3");
            var geom = feature.geometry;
            var displayText = feature.attributes.value;
            var font = new Font(
                "12pt",
                Font.STYLE_NORMAL, 
                Font.VARIANT_NORMAL,
                Font.WEIGHT_BOLD,
                "Helvetica"
            );
             
            var textSymbol = new TextSymbol(
                displayText,
                font,
                new Color("#DC143C")
            );
                                    
            textLayer.add(new Graphic(geom, textSymbol));
   });
        
   map.addLayer(textLayer);
   });                                
    
   console.log("HERE4");
   var blank = new Color([0, 0, 0, 0]); // hex is #ff4500
   var marker = new SimpleMarkerSymbol("solid", 0, null, blank);
   var renderer = new SimpleRenderer(marker);
   LatestRiverStages.setRenderer(renderer);
   map.addLayer(LatestRiverStages); 
   console.log("HERE5");
   
   
   function getriverCSVTextContent (graphic) {
   console.log("sample");
            var attributes = graphic.attributes;
   var value = "Obs Value: " + attributes.value;
   var validtime = "Valid Time: " + attributes.validtime;
   return value + "</b><br />" + validtime
   }