Using Feature Attribute Field as TextSymbol

2032
16
06-02-2014 01:31 AM
CharlesGant
New Contributor III
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!
0 Kudos
16 Replies
JakeSkinner
Esri Esteemed Contributor
You can zip up the code and CSV file, and then upload the zip file.
0 Kudos
CharlesGant
New Contributor III
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
0 Kudos
JakeSkinner
Esri Esteemed Contributor
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>
0 Kudos
VivekPrasad
Occasional Contributor
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.
0 Kudos
CharlesGant
New Contributor III
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
0 Kudos
CharlesGant
New Contributor III
Just wanted to bump this back to the top.
0 Kudos
CharlesGant
New Contributor III
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.
0 Kudos