topic Re: SVG symbol (or similar) in labels using Arcade in ArcGIS JavaScript Maps SDK Questions

SVG symbol (or similar) in labels using Arcade

julian_svcs — Wed, 22 Mar 2023 02:38:53 GMT

I have both positive and negative numbers and I would like to label my feature layer using either an up or down arrow. I am able to add this in the popup (see screenshot below) with an svg image, but this does not port over to the Arcade expression for labels.

Any idea if this is possible with labels?

Code snippet used for the popup:

const upArrow = '<svg width="16" height="16" ><polygon points="14.14 7.07 7.07 0 0 7.07 4.07 7.07 4.07 16 10.07 16 10.07 7.07 14.14 7.07" /></svg>'; const downArrow = '<svg width="16" height="16"><polygon points="0 8.93 7.07 16 14.14 8.93 10.07 8.93 10.07 0 4.07 0 4.07 8.93 0 8.93" /></svg>'; const diff = Math.round(feature.graphic.attributes[comparison_year_field]) - Math.round(feature.graphic.attributes[reference_year_field]); const arrow = diff > 0 ? upArrow : downArrow;

Re: SVG symbol (or similar) in labels using Arcade

Sage_Wall — Wed, 22 Mar 2023 11:22:42 GMT

The Esri icon font can be used in labels. You might need to create two label classes, one for the arrow icons and a second label class for the text or numbers using a standard font.

https://developers.arcgis.com/javascript/latest/esri-icon-font/#using-the-esri-icon-fonts-as-a-label

Re: SVG symbol (or similar) in labels using Arcade

julian_svcs — Wed, 22 Mar 2023 17:48:06 GMT

Thanks for the reply @Sage_Wall. I created two separate label classes as suggested and I am able to have the up/down arrow and the text but they do not align correctly. I think I created it correctly as you suggested. Below is an examle of the output and my code snippet used.

Code:

Thanks once again.

Re: SVG symbol (or similar) in labels using Arcade

Sage_Wall — Wed, 22 Mar 2023 20:01:23 GMT

Dang, in my head I had envisioned point features where you could set the labelPlacement property to different values for the two classes. With polyline feature layers it looks like there isn't as much control over the position of the labels, the only labelPlacement option available for 2D polylines is `center-along`.