TextSymbol Not Displaying on Graphics Layer

164
5
06-07-2020 08:18 AM
JordanHahn1
New Contributor

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_WidgetInTemplateMixinGraphicColorPoint,
        GraphicsLayerTextSymbolFont) {
        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"myFontmyColor)
                
                // 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)
            }
        })
    }
)
0 Kudos
5 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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',

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos
JordanHahn1
New Contributor

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?

  1. {_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__:
0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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);
0 Kudos
JordanHahn1
New Contributor

That did the trick!  Much appreciated.

0 Kudos