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!
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',
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).
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?
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);
That did the trick! Much appreciated.