TextSymbol Not Displaying on Graphics Layer

JordanHahn1 · ‎06-07-2020

I am attempting to add a TextSymbol to a map in Web AppBuilder; however, the text does not display on the map. When I inspect the <div> created for the text graphics layer, is shows 0 x 0. Additionally, when I inspect the this._textLayer in Chrome, it does not have anything listed under its graphics attribute.

Any help would be greatly appreciated!

define(['dojo/_base/declare',

'dijit/_WidgetsInTemplateMixin',

'esri/graphic',

'esri/Color',

'esri/geometry/Point',

'esri/layers/GraphicsLayer',

'esri.symbols/TextSymbol',

'esri/symbols/Font'

],

function(declare, _WidgetInTemplateMixin, Graphic, Color, Point,

GraphicsLayer, TextSymbol, Font) {

var clazz = declare([BaseWidget, _WidgetsInTemplateMixin], {

baseClass: 'please-help-solve',

_textGeometry: null,

_textSymbol: null,

_textGraphics: null,

_textLayer: null,

postCreate: function() {

this.inherited(arguments);

// Creates graphics layer for the text

this._textLayer = new GraphicsLayer({

id: 'text_lyr',

title: 'Labels'

})

this.map.addLayer(this._textLayer)

// Creates the font, color, and textSymbol

var myFont = new esri.symbol.Font()

myFont.setSize("12pt")

myFont.setWeight(Font.WEIGHT_BOLD)

var myColor = new Color([255,0,0])

this._textSymbol = new TextSymbol("TEST", myFont, myColor)

// Creates the geometry, graphic, and adds it to the layer

this._textGeometry = new Point(this.map.extent.getCenter().getLongitude(),

this.map.extent.getCenter().getLatitude())

this._textGraphics = new Graphic({

geometry: this._textGeometry,

symbol: this._textSymbol,

attributes: {}

})

this._textLayer.add(this._textGraphics)

}

})

}

)

RobertScheitlin__GISP · ‎06-08-2020

Jordan,

It may be as simple as you syntax issue in your require array:

'esri.symbols/TextSymbol',

Should be (you have a dot in between esri and symbols)

'esri/symbols/TextSymbol',

RobertScheitlin__GISP · ‎06-08-2020

But upon closer look at your code you have other issues as well.

        // Creates the geometry, graphic, and adds it to the layer
        this._textGeometry = new Point(this.map.extent.getCenter().x, this.map.extent.getCenter().x, this.map.spatialReference);
        this._textGraphics = new Graphic(this._textGeometry, this._textSymbol, {});
        this._textLayer.add(this._textGraphics);‍‍‍‍

Your code was creating the graphic using an object with properties (will this is correct for the 4.x API, it is not for 3.x WAB).

JordanHahn1 · ‎06-10-2020

Robert -

Thanks for the reply! First off, good catch on the declare statement. The sample code I uploaded was a simplified and stripped down version of the full file and clearly I messed up in translating the code over.

I updated the code to ensure it matched API 3.32. The this._textGeometry now includes the reference to this.map.SpatialReference and the this._textGraphics object now uses the non-JSON constructor. No joy....still no text on the screen.

When inspecting the layer within a Chrome browser, I see that the this._textLayer was created; however, it has a size of 0px x 0px. Also, when I console.log(this._textGraphic) and inspect the object (see info below) I see that the symbol was created, added to the graphic, and that the graphic was added to the layer.

Any other things I'm missing?

{_attrs: {�}, _url: null, url: null, spatialReference: {�}, initialExtent: {�},��}
1. arcgisProps:�undefined
2. attached:�true
3. attributionDataUrl:�""
4. className:�undefined
5. dataAttributes:�undefined
6. graphics:�Array(1)
  1. 0:
    1. attributes:�{}
    2. geometry:�{x:�-118.65141125565243,�y:�35.26778599032485,�spatialReference:�{�}}
    3. infoTemplate:�undefined
    4. symbol:
      1. align:�"middle"
      2. color:�b.Color�{r:�255,�g:�0,�b:�0,�a:�1}
      3. font:�{size:�64,�weight:�"bold"}
      4. horizontalAlignment:�"center"
      5. kerning:�true
      6. rotated:�false
      7. text:�"Test"
      8. type:�"textsymbol"
      9. x:�0
      10. xoffset:�0
      11. y:�0
      12. yoffset:�0
      13. __proto__:�Object
    5. _constructed:�true
    6. _extent:�{xmin:�-118.65141125565243,�ymin:�35.26778599032485,�xmax:�-118.65141125565243,�ymax:�35.26778599032485,�spatialReference:�{�},��}
    7. _graphicsLayer:�{_attrs:�{�},�_url:�null,�url:�null,�spatialReference:�{�},�initialExtent:�{�},��}
    8. _layer:�{_attrs:�{�},�_url:�null,�url:�null,�spatialReference:�{�},�initialExtent:�{�},��}
    9. _sanitizeNumericValue:��()
    10. _suspended:�false
    11. __proto__:�Object
  2. length:�1
  3. __proto__:�Array(0)
7. hasAttributionData:�false
8. id:�"text_lyr"
9. infoTemplate:�undefined
10. initialExtent:�{xmin:�-180,�ymin:�-90,�xmax:�180,�ymax:�90,�spatialReference:�{�},��}
11. loaded:�true
12. normalization:�true
13. parentLayer:�undefined
14. refresh:��()
15. refreshInterval:�0
16. spatialReference:�{wkid:�4326}
17. styling:�true
18. suspended:�false
19. url:�null
20. visibleAtMapScale:�true
21. webglEnabled:�true
22. _acquireSVGMarker:��()
23. _attrs:�{}
24. _bgGroup:�{rawNode:�g,�shape:�a,�matrix:�null,�fillStyle:�null,�strokeStyle:�null,��}
25. _div:�{rawNode:�g#text_lyr_layer,�shape:�a,�matrix:�null,�fillStyle:�null,�strokeStyle:�null,��}
26. _draw:��()
27. _errorHandler:��()
28. _evalSurfaceTimerHandle:�null
29. _evalSurfaceType:��()
30. _inherited:�{p:�3,�c:��}
31. _isRefLayer:�false
32. _lineMarkers:�{}
33. _lyrZEHandle:�{id:�8,�receiveArguments:�true,�previous:�{�},�remove:��,�advice:��,��}
34. _map:�{_plugins:�{�},�_internalLayerIds:�Array(1),�_layers:�Array(0),�_layerDivs:�Array(0),�_basemapPending:�false,��}
35. _mouseEvents:�true
36. _onExtentChangeHandler_connect:�{id:�11,�receiveArguments:�true,�previous:�{�},�remove:��,�advice:��,��}
37. _onPanEndHandler_connect:�{id:�6,�receiveArguments:�true,�previous:�{�},�remove:��,�advice:��,��}
38. _onPanHandler_connect:�{id:�8,�receiveArguments:�true,�previous:�{�},�remove:��,�advice:��,��}
39. _onPanStartHandler_connect:�null
40. _onZoomStartHandler_connect:�{id:�5,�receiveArguments:�true,�previous:�{�},�remove:��,�advice:��,��}
41. _onclick_connect:�{remove:��}
42. _ondblclick_connect:�{remove:��}
43. _onmousedown_connect:�{remove:��}
44. _onmousemove_connect:�{remove:��}
45. _onmouseout_connect:�{remove:��}
46. _onmouseover_connect:�{remove:��}
47. _onmouseup_connect:�{remove:��}
48. _panDx:�-10.39996337890625
49. _panDy:�-2.399993896484375
50. _params:�{displayOnPan:�true,�drawMode:�true,�styling:�true,�id:�"text_lyr",�title:�"Labels"}
51. _plugins:�{}
52. _processEvent:��()
53. _refresh:��()
54. _resized:�false
55. _resumedOnce:�true
56. _rndForScale:�undefined
57. _scheduledRefresh:��()
58. _setMap:��(b)
59. _setSurfaceType:��()
60. _srInfo:�{wkTemplate:�"PROJCS["WGS_1984_Web_Mercator_Auxiliary_Sphere",GE�R["Auxiliary_Sphere_Type",0.0],UNIT["Meter",1.0]]",�valid:�Array(2),�origin:�Array(2),�dx:�0.00001}
61. _svgFilters:�{}
62. _url:�null
63. _wakeTimer:�null
64. _webglChangeMapHandle:�{id:�5,�receiveArguments:�true,�previous:�{�},�remove:��,�advice:��,��}
65. _wrap:�true
66. __proto__:
  1. constructor:��()
  2. declaredClass:�"esri.layers.GraphicsLayer"
  3. disableMouseEvents:��()
  4. enableMouseEvents:��()
  5. getInherited:��k(a,b,c)
  6. inherited:��d(a,b,c,d)
  7. isInstanceOf:��h(a)
  8. onClick:��()
  9. onDblClick:��()
  10. onMouseDown:��()
  11. onMouseDrag:��()
  12. onMouseMove:��()
  13. onMouseOut:��()
  14. onMouseOver:��()
  15. onMouseUp:��()
  16. __inherited:��d(a,b,c,d)
  17. _initLayer:��()
  18. _onClickHandler:��(a)
  19. _onDblClickHandler:��(a)
  20. _onMouseDownHandler:��(a)
  21. _onMouseDragHandler:��(a)
  22. _onMouseMoveHandler:��(a)
  23. _onMouseOutHandler:��(a)
  24. _onMouseOverHandler:��(a)
  25. _onMouseUpHandler:��(a)
  26. _processEvent:��(a)
  27. _setMap:��()
  28. _unsetMap:��()
  29. __proto__:

RobertScheitlin__GISP · ‎06-10-2020

Jordan,

If you copied and paste'd the code I had above then the issue is I accidentally had the x twice instead of x,y

this._textGeometry = new Point(this.map.extent.getCenter().x, this.map.extent.getCenter().y, this.map.spatialReference);‍

JordanHahn1 · ‎06-10-2020

That did the trick! Much appreciated.