How to label the points of a graphic

[DaveSouthern]

Got a request from the user that has me stumped.  The user wants to display an individual graphic on a map with the points of that graphic numbered.  So as the points go along the polygon or polyline they need to display a number from 1 to n.  The purpose is to have those numbers correspond to a table that lists the actual coordinates of each point, so the user can see the coordinate that corresponds to each point on the graphic. 

Any ideas how to accomplish this?  The table that displays the points I can handle.  It's the numbering of the points on the graphic that has me wondering where to start.

[RobertScheitlin__GISP]

Dave,

   Use two graphics layers on the map both with graphics added as point geometry type, the first with SimpleMarkerSymbol and the second with TextSymbol as your loop through the table adding the graphics you increment a numeric var that will be the text of the TextSymbol. This should be pretty simple.

[DaveSouthern]

OK.  So then if I want to show the feature itself also, I should have these two layers overlap the feature layer so I can show the feature, the points, and the text.  Sounds fairly simple in theory... practice always seems more complicated - especially with esri javascript stuff. 

[RobertScheitlin__GISP · Accepted solution]

Dave,

   If you are already going to have the feature showing in the map then there may be not need for the point graphics layer at all then, just the TextSymbol graphics layer.

[DaveSouthern]

I think I'll try that approach first - sounds simpler. 

I'm gonna go ahead and mark you last response as correct.  If I have issues I'll come back later.

[DaveSouthern]

OK.  Something going wrong here.  I grabbed some code from a couple of different places on the esri website, but something's still not right.

    //create the font for use with the labeling.
    var font = new esri.symbol.Font();
    font.setSize("12pt");
    font.setWeight(esri.symbol.Font.WEIGHT_BOLD);

    //fetch the graphics layer.
    var theLayer;

    require(["esri/layers/GraphicsLayer"], function(GraphicsLayer) {
        theLayer = new GraphicsLayer();
      });

    for (i = 0; i < shape.rings[0].length; i++) {

        var x = shape.rings[0][i][0]
        var y = shape.rings[0][i][1]

        var theText = (i + 1).toString();

        var textSymbol = new esri.symbol.TextSymbol(theText);
        textSymbol.setColor(new dojo.Color([128, 0, 0]));
        textSymbol.setAlign(esri.symbol.TextSymbol.ALIGN_START);
        textSymbol.setAngle(15);

        textSymbol.setFont(font);

        var pt = new esri.geometry.Point(x, y, map.spatialReference)
        var gra = new esri.Graphic(pt, textSymbol);
        theLayer.graphics.add(gra);
        
    }

    map.addLayer(theLayer);
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Line 29 says that 'graphics' (the graphics layer) does not support the 'add' method, but the documentation says it does.  So something's awry.

[thejuskambi]

The GraphicsLayer has add method, whereas, the graphicslayer.graphics is just an array. User GraphicsLayer.add

theLayer.add(gra);‍

[RobertScheitlin__GISP]

Dave,

   You have a require "esri/layers/GraphicsLayer" in the middle of your code and the "theLayer" is now in a different scope then the rest of the code. You need to add the "esri/layers/GraphicsLayer" at a higher level or put all your code dealing with the GL inside the requires function (so that it is in the same scope).

[DaveSouthern]

OK.  So it sounds like I had two bugs.  I fixed those two issues and here's where I currently am:

    require(["esri/layers/GraphicsLayer"], function (GraphicsLayer) {

        //create the new graphics layer
        var theLayer = new GraphicsLayer();
      
        for (i = 0; i < shape.rings[0].length; i++) {

            var x = shape.rings[0][0]
            var y = shape.rings[0][1]

            var theText = (i + 1).toString();

            var textSymbol = new esri.symbol.TextSymbol(theText);
            textSymbol.setColor(new dojo.Color([128, 0, 0]));
            textSymbol.setAlign(esri.symbol.TextSymbol.ALIGN_START);
            textSymbol.setAngle(15);

            textSymbol.setFont(font);

            var pt = new esri.geometry.Point(x, y, map.spatialReference)
            var gra = new esri.Graphic(pt, textSymbol);
            theLayer.add(gra);
        
        }

        map.addLayer(theLayer);
        
    });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

However, the graphics still don't show on the map.  Should I do a refresh or some such thing?

[RobertScheitlin__GISP]

Dave,

   I would say clear of the poor practice of mixing Legacy and AMD coding styles. Here is the code in all AMD:

See if this works any better.

    require([
        "esri/layers/GraphicsLayer",
        "esri/symbols/Font",
        "esri/symbols/TextSymbol",
        "esri/Color",
        "esri/geometry/Point",
        "esri/graphic"
    ], function (
        GraphicsLayer, Font, TextSymbol, Color, Point, Graphic
    ) {
     //create the font for use with the labeling.
         var font = new Font();
         font.setSize("12pt");
         font.setWeight(Font.WEIGHT_BOLD);

        //create the new graphics layer
        var theLayer = new GraphicsLayer();
      
        for (i = 0; i < shape.rings[0].length; i++) {
            var x = shape.rings[0][i][0]
            var y = shape.rings[0][i][1]

            var theText = (i + 1).toString();

            var textSymbol = new TextSymbol(theText);
            textSymbol.setColor(new Color([128, 0, 0]));
            textSymbol.setAlign(TextSymbol.ALIGN_START);
            textSymbol.setAngle(15);

            textSymbol.setFont(font);

            var pt = new Point(x, y, map.spatialReference)
            var gra = new Graphic(pt, textSymbol);
            theLayer.add(gra);
        }
        map.addLayer(theLayer);
    });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍