nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Add a label from the graphic layer.

Sai_AnandPeketi1

Hello everyone,

I want to add the label for the graphic layer.I have a graphic layer contain graphic,symbol and attributes. Now, I want to add a label from that graphic layer. Is it possible, if yes can anyone share the code because i see the sample of the 'esri/layers/LabelLayer' all are coming from the feature layer.

Thanks for the help.

Find more posts tagged with

Accepted answers

RobertScheitlin__GISP

Then you get the polygons extent using

<SPAN class="keyword token">var</SPAN> pnt <SPAN class="operator token">=</SPAN> geometry<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getExtent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">getCenter</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> txtSym <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> lblGra <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN>pnt<SPAN class="punctuation token">,</SPAN> txtSym<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
bufferGL<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>lblGra<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

All comments

hoogw

var text_symbol = new TextSymbol(result.address);

var graphic_item = new Graphic({
attributes: result.attributes,
geometry: result.location,

// in use, text symbol as graphic label
symbol: text_symbol,

/* not use, -- simple marker symbol --
symbol: {
// autocasts as new SimpleMarkerSymbol()
type: "simple-marker",
color: poi_color, //"yellow",
size: poi_size, // all works "31pt", "31px",
style: poi_style, // diamond, triangle, cross, x, circle, path, square
// autocasts as new SimpleLineSymbol()
outline: {
// simple marker builder, https://sagewall.github.io/symbol-builder/simple-marker-symbol/
color: poi_outlineColor, //"#efefef",
width: poi_outlineWidth
}
},
// -- end -- simple marker symbol --
*/

popupTemplate: {
title: "Name: {PlaceName}",

//not use lat, lng ... + result.location.x.toFixed(5) + "," + result.location.y.toFixed(5)
content:"Address: {Place_addr}" + "<br>Phone: {Phone}" + "<br>Type: {Type}" + "<br>URL: {URL}"
}

})// graphic

// defaultPopupTemplateEnabled ( default is false ) https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html#getEffectivePopupTemplate
graphic_item.getEffectivePopupTemplate(true)

view.graphics.add(graphic_item);

hp_211.png

RobertScheitlin__GISP

Then you get the polygons extent using

<SPAN class="keyword token">var</SPAN> pnt <SPAN class="operator token">=</SPAN> geometry<SPAN class="punctuation token">.</SPAN><SPAN class="token function">getExtent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="token function">getCenter</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> txtSym <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> lblGra <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN>pnt<SPAN class="punctuation token">,</SPAN> txtSym<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
bufferGL<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN>lblGra<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Sai_AnandPeketi1

Thank Robert.

Polygon type. Need to work on this code Draw polygon feature when ever use click on the map

RobertScheitlin__GISP

Sai,

What is the geometry type that you are trying to label?

Sai_AnandPeketi1

Thanks Robert.

Can you share the javascript code for above logic. I am not understand how we can set center of the graphics into the center of the graphics symbol.

RobertScheitlin__GISP

Sai,

Probably the easiest way to do this is to add another graphic (the center of the extent for polygons or polylines) using a TextSymbol as the graphics symbol.

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.