Add label to graphic icon in GraphicsLayer

Question

I am using the following code to create a GraphicsLayer:

 const labelClass= { 
      symbol: { type: "text", color: "green", font: { family: "Sans", size: 12, weight: "bold"  }},
            labelPlacement: "above-center"
            };
gl=new GraphicsLayer({ labelingInfo: [labelClass]})
app.map.add(app.gl);

And then adding icons to it using this code:

let graphic=new Graphic(
     geometry:{ type: "point", lat, lon },      
     symbol:{ type: "picture-marker", url:"popover.png", width:19, height:13 },
     });
gl.add(graphic);

How do I tell arcGIS what text to draw with each icon?

Answer 1

GraphicsLayer doesn't have labelingInfo property. For labeling you need to use FeatureLayer , in fact since the new library version it is recommended to use FeatureLayer , that is basically you need to use it for almost all cases that you could use GraphicsLayer in older library versions.

ArcGIS API - GraphicsLayer

It is generally preferred to construct a FeatureLayer with its source property when working with client-side graphics since the FeatureLayer has more capabilities than the GraphicsLayer, including rendering, querying, and labeling.

So, returning to the question, you could use labelExpressionInfo property to bind the label text you want to display to the value of an attribute of the features. Something like this,

labelExpressionInfo: {
 expression: "$feature.NAME"
}

Where NAME is the attribute you want to use as label.