topic Re: How to label the points of a graphic in ArcGIS JavaScript Maps SDK Questions

How to label the points of a graphic

DaveSouthern — Wed, 07 Sep 2016 18:01:36 GMT

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.

Re: How to label the points of a graphic

RobertScheitlin__GISP — Wed, 07 Sep 2016 18:11:03 GMT

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.

Re: How to label the points of a graphic

DaveSouthern — Wed, 07 Sep 2016 19:29:03 GMT

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.

Re: How to label the points of a graphic

RobertScheitlin__GISP — Wed, 07 Sep 2016 19:34:52 GMT

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.

Re: How to label the points of a graphic

DaveSouthern — Wed, 07 Sep 2016 19:44:03 GMT

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.

Re: How to label the points of a graphic

DaveSouthern — Sun, 12 Dec 2021 04:30:49 GMT

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.

Re: How to label the points of a graphic

thejuskambi — Thu, 15 Sep 2016 18:05:20 GMT

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

theLayer.add(gra);‍

Re: How to label the points of a graphic

RobertScheitlin__GISP — Thu, 15 Sep 2016 18:07:01 GMT

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

Re: How to label the points of a graphic

DaveSouthern — Sun, 12 Dec 2021 04:30:52 GMT

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?

Re: How to label the points of a graphic

RobertScheitlin__GISP — Sun, 12 Dec 2021 04:30:54 GMT

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

Re: How to label the points of a graphic

DaveSouthern — Thu, 15 Sep 2016 19:17:05 GMT

I appreciate you putting all that effort into it, Robert - it certainly looks better this way - but the layer still doesn't show.

Re: How to label the points of a graphic

RobertScheitlin__GISP — Thu, 15 Sep 2016 19:25:52 GMT

Dave,

Are you getting any console errors?

Re: How to label the points of a graphic

DaveSouthern — Thu, 15 Sep 2016 19:41:02 GMT

No errors - just information and warnings.

Re: How to label the points of a graphic

RobertScheitlin__GISP — Thu, 15 Sep 2016 20:00:44 GMT

Dave,

Can you par down your code share it?

Re: How to label the points of a graphic

DaveSouthern — Thu, 15 Sep 2016 20:11:10 GMT

Alas, no - there's a lot of code before this that loads the base map and all the various feature layers. If you're stumped, then probably what's happening is my dev lead has got something going on that we're not aware of. I think I'll punt this one over to him and see what he comes up with.

Thanks again, man - and I'll try to post the working version if we come up with one.

Re: How to label the points of a graphic

RobertScheitlin__GISP — Thu, 15 Sep 2016 20:20:05 GMT

Dave,

Try commenting out the lines (25-29) where you are setting the textsymbol properties (so that the text symbol just uses defaults) and see if that makes a difference. I am having to shoot in the dark here as I only have the code provided to go from.

Re: How to label the points of a graphic

DaveSouthern — Thu, 15 Sep 2016 20:31:52 GMT

Nice try. I already passed it up to my dev lead - we'll see what he comes up with.