nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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!

Find more posts tagged with

Accepted answers

All comments

CharlesGant

Just wanted to bump this back to the top as I'm still looking for a solution. Have tried to piece together some sample I found on the web with no luck.

CharlesGant

Just wanted to bump this back to the top.

CharlesGant

Jake & Vara,

Thank you so much for your help. I used Jake's code, tweaked it and got what I wanted. Almost. The last thing I wanted to do with these textSymbols was color them with a Class Breaks Renderer. However, looking at the sample on API Reference page, and the code I'm using, I could not see where to plug the new renderer in. What am I missing?

Charles

VivekPrasad

Hi,

How about creating a Custom Renderer and applying it to the layer. Here is a sample code to create a custom renderer. Please change the field name (here it is "Description")

define([
"dojo/_base/declare",
"esri/renderers/Renderer",
"esri/symbols/TextSymbol",
"esri/Color",
"esri/symbols/Font",
],
function (declare, Renderer, TextSymbol, Color, Font) {
    return declare([Renderer], {
        getSymbol: function (graphic) {
            return new TextSymbol().setColor(new Color([255, 0, 0, 0.6])).setAlign(TextSymbol.ALIGN_MIDDLE).setFont(new Font().setSize("8pt").setFamily("arial")).setText(graphic.attributes["DESCRIPTION"]);
        }
    });
});

Hope it helps.

Thanks & Regards,
Vara Prasad.

jskinner

I didn't have time to run through all of your code, but here is a sample I was able to get to work with your CSV file. You will just need to update the proxy URL and the CSV URL and it should work.

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
    <title>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
    </style>
    <script src="http://js.arcgis.com/3.9/"></script>
    <script>
      var map, csv, textLayer;

      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: "server1"
        });
        map = new Map("map", {
          basemap: "gray",
          center: [-81.874901, 35.824528],
          zoom: 8 
        });
               
        
        csv = new CSVLayer("http://server1/UserData/riverquery.csv");
        
        csv.on("update-end", function(results){
            textLayer = new GraphicsLayer();                    
            
            array.forEach(results.target.graphics, function(feature, index){
                var lid =  feature.attributes.lid;
                var value = feature.attributes.value;
                var pe = feature.attributes.pe;
                var ts = feature.attributes.ts; 
                
                var attr = {"Value":value,"PE":pe,"TS":ts};                                                                               

                var geom = feature.geometry;
                var displayText = feature.attributes.lid;
                
                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, attr));
            });                        
        
            var infoTemplate = new InfoTemplate("Attributes", "${*}");        
            textLayer.setInfoTemplate(infoTemplate);
            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);    
      });
    </script>
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>

CharlesGant

You can zip up the code and CSV file, and then upload the zip file.

Jake,

Should be there. Thanks for taking the time to look at it.

Charles

HydroViewer.zip

jskinner

You can zip up the code and CSV file, and then upload the zip file.

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
   }

jskinner

Hi Charles,

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

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
   }

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

jskinner

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

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.

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

Can anyone help me out?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.