Can anybody find anything wrong with this? I want to check myself.
var text = new TextSymbol("Hello World"); var pt = new Point(-118.5, 34.5, map.spatialReference); var graphic = new Graphic(pt, text);map.graphic.show();
Thank you
Brandon,
Not sure what you are missing but here is a working sample:
<SPAN class="operator token"><</SPAN><SPAN class="operator token">!</SPAN>DOCTYPE html<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>html<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>head<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>meta http<SPAN class="operator token">-</SPAN>equiv<SPAN class="operator token">=</SPAN><SPAN class="string token">"Content-Type"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"text/html; charset=utf-8"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>meta name<SPAN class="operator token">=</SPAN><SPAN class="string token">"viewport"</SPAN> content<SPAN class="operator token">=</SPAN><SPAN class="string token">"initial-scale=1, maximum-scale=1, user-scalable=no"</SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>title<SPAN class="operator token">></SPAN>Labeling features client<SPAN class="operator token">-</SPAN>side<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>title<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>link rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> href<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F3.24%2Fesri%2Fcss%2Fesri.css" target="_blank">https://js.arcgis.com/3.24/esri/css/esri.css</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>style<SPAN class="operator token">></SPAN> html<SPAN class="punctuation token">,</SPAN> body<SPAN class="punctuation token">,</SPAN> #map <SPAN class="punctuation token">{</SPAN> height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN> width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="operator token">%</SPAN><SPAN class="punctuation token">;</SPAN> margin<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> padding<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>style<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fjs.arcgis.com%2F3.24%2F" target="_blank">https://js.arcgis.com/3.24/</A><SPAN>"</SPAN></SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="keyword token">var</SPAN> map<SPAN class="punctuation token">;</SPAN> <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN> <SPAN class="string token">"esri/map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/geometry/Extent"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/geometry/Point"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/symbols/SimpleLineSymbol"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/symbols/SimpleFillSymbol"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/symbols/TextSymbol"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/renderers/SimpleRenderer"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/layers/LabelClass"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/Color"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/graphic"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/domReady!"</SPAN> <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>Map<SPAN class="punctuation token">,</SPAN> Extent<SPAN class="punctuation token">,</SPAN> Point<SPAN class="punctuation token">,</SPAN> FeatureLayer<SPAN class="punctuation token">,</SPAN> SimpleLineSymbol<SPAN class="punctuation token">,</SPAN> SimpleFillSymbol<SPAN class="punctuation token">,</SPAN> TextSymbol<SPAN class="punctuation token">,</SPAN> SimpleRenderer<SPAN class="punctuation token">,</SPAN> LabelClass<SPAN class="punctuation token">,</SPAN> Color<SPAN class="punctuation token">,</SPAN> Graphic<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// load the map centered on the United States</SPAN> <SPAN class="keyword token">var</SPAN> bbox <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Extent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN><SPAN class="string token">"xmin"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">1940058</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"ymin"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">814715</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"xmax"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1683105</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"ymax"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">1446096</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"spatialReference"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="string token">"wkid"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="number token">102003</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//create the map and set the extent, making sure to "showLabels"</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> extent<SPAN class="punctuation token">:</SPAN> bbox<SPAN class="punctuation token">,</SPAN> showLabels <SPAN class="punctuation token">:</SPAN> <SPAN class="keyword token">true</SPAN> <SPAN class="comment token">//very important that this must be set to true! </SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> text <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">TextSymbol</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"Hello World"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> pt <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Point</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">118.5</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">34.5</SPAN><SPAN class="punctuation token">,</SPAN> map<SPAN class="punctuation token">.</SPAN>spatialReference<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> graphic <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN>pt<SPAN class="punctuation token">,</SPAN> text<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// create a renderer for the states layer to override default symbology</SPAN> <SPAN class="keyword token">var</SPAN> statesColor <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Color</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"#666"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> statesLine <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleLineSymbol</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"solid"</SPAN><SPAN class="punctuation token">,</SPAN> statesColor<SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1.5</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> statesSymbol <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleFillSymbol</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"solid"</SPAN><SPAN class="punctuation token">,</SPAN> statesLine<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">null</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> statesRenderer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleRenderer</SPAN><SPAN class="punctuation token">(</SPAN>statesSymbol<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// create the feature layer to render and label</SPAN> <SPAN class="keyword token">var</SPAN> statesUrl <SPAN class="operator token">=</SPAN> <SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=https%3A%2F%2Fsampleserver6.arcgisonline.com%2Farcgis%2Frest%2Fservices%2FCensus%2FMapServer%2F3" target="_blank">https://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3</A><SPAN>"</SPAN></SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">var</SPAN> states <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN>statesUrl<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> id<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"states"</SPAN><SPAN class="punctuation token">,</SPAN> outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> states<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setRenderer</SPAN><SPAN class="punctuation token">(</SPAN>statesRenderer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// create a text symbol to define the style of labels</SPAN> <SPAN class="keyword token">var</SPAN> statesLabel <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">TextSymbol</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">setColor</SPAN><SPAN class="punctuation token">(</SPAN>statesColor<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> statesLabel<SPAN class="punctuation token">.</SPAN>font<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setSize</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"14pt"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> statesLabel<SPAN class="punctuation token">.</SPAN>font<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setFamily</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"arial"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//this is the very least of what should be set within the JSON </SPAN> <SPAN class="keyword token">var</SPAN> json <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="string token">"labelExpressionInfo"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN><SPAN class="string token">"value"</SPAN><SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"{STATE_NAME}"</SPAN><SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">//create instance of LabelClass (note: multiple LabelClasses can be passed in as an array)</SPAN> <SPAN class="keyword token">var</SPAN> labelClass <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">LabelClass</SPAN><SPAN class="punctuation token">(</SPAN>json<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> labelClass<SPAN class="punctuation token">.</SPAN>symbol <SPAN class="operator token">=</SPAN> statesLabel<SPAN class="punctuation token">;</SPAN> <SPAN class="comment token">// symbol also can be set in LabelClass' json</SPAN> states<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setLabelingInfo</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN> labelClass <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addLayer</SPAN><SPAN class="punctuation token">(</SPAN>states<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"load"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> map<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>graphic<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>head<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>body<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"map"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>body<SPAN class="operator token">></SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>html<SPAN class="operator token">></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
You are right. I will test it out.
But still if you do not add the graphic to the map them how is it going to show in the map?
I was testing this in the sandbox first. I haven't added this to my file yet. I was going to add this right after I my creation of the dynamic layers in my map.
Are you adding the graphics to the map elsewhere in your code that you are not showing here?..
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
