Adding text to ArcGIS Javascript layer

Question

I am using the ArcGIS Javascript API (v3.15) for a basic use case of placing some markers with text on a map. I am able to add the marker, but I am running into issues inserting text on that marker.

Here is my code:

require([
 "esri/map",
 "esri/dijit/BasemapToggle",
 "esri/dijit/LocateButton",
 "esri/geometry/Point",
 "esri/symbols/SimpleMarkerSymbol", 
 "esri/symbols/SimpleLineSymbol", 
 "esri/symbols/Font",
 "esri/symbols/TextSymbol", 
 "esri/Color",
 "esri/graphic", 
 "esri/layers/GraphicsLayer",
 "dojo/domReady!"
], function(
 Map, BasemapToggle, LocateButton, Point, SimpleMarkerSymbol, Font, TextSymbol, SimpleLineSymbol, Color, Graphic, GraphicsLayer
) {
 map = new Map("map", {
 center: [mapval[0][2],mapval[0][1]],
 zoom: 18,
 basemap: "streets"
 });
 map.on("load", function() {
 var gl = new GraphicsLayer();
 var font = new Font("20px", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLDER);
 for (var i = 0; i < mapval.length; i++){
 var p = new Point(mapval[i][2], mapval[i][1]);
 var s = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 20,
 new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
 new Color([255,0,0]), 1),
 new Color([0,255,0,0.25]));
 var g = new Graphic(p, s);
 g.setAttributes({
 name: mapval[i][0]
 });
 gl.add(g);
 var t = new TextSymbol(mapval[i][0], font, new Color([0, 0, 0]));
 var g2 = new Graphic(p, t);
 gl.add(g2);
 }
 map.addLayer(gl); 
 });
 var toggle = new BasemapToggle({
 map: map,
 visible: true,
 basemap: "satellite"
 }, "BasemapToggle");
 toggle.startup();
 var geoLocate = new LocateButton({
 map: map
 }, "LocateButton");
 geoLocate.startup();
});

• raykendo: In your require statement, the SimpleLineSymbol variable is in the wrong place. Try moving it between SimpleMarkerSymbol and Font.

Answer 1

As raykendo pointed out, the require functions were not in the correct order. Once that was corrected the label was displayed.