topic Format FeatureLayer label text in ArcGIS JavaScript Maps SDK Questions

Format FeatureLayer label text

FabricioBezerra — Fri, 02 Sep 2022 18:39:04 GMT

Using ArcGIS JS API 4.23.

I would like to dynamically format the labels of a FeatureLayer based on a set of rules. These rules would result in parts of the label text being italicized.

Rules for parts of the text that should not be italicized (just for example purposes):

Text between single quotes, brackets, or parentheses

Eg.: Abelia x grandiflora [Hopleys™] = 'Abghop'

I was able to create the logic to format the text correctly in Javascript and apply it to the react components but would like to apply it to the labels as well.

My idea was to use Arcade Expression to recreate the logic I have in Javascript to format the label text based on its results but I wasn't able to italicize partially the text of the FeatureLayer labels.

I did some research and saw that you are able to do that in ArcGIS PRO using XML tags. Is there a way to do that or to achieve the same result using the JS API?

Re: Format FeatureLayer label text

AshleyPeters — Tue, 08 Aug 2023 15:40:30 GMT

Fabricio,

Did you find a solution to this? I am using an Arcade Expression to generate a list of species (common name, scientific name, and protection status) in JavaScript, but have not yet been able to figure out how to italicize just the species name.

Any insight you may have would be appreciated.

Ashley

Re: Format FeatureLayer label text

FabricioBezerra — Tue, 08 Aug 2023 16:44:57 GMT

Hi Ashley,

I’ve found a workaround for the problem. Not sure if it will work for you but it did for me.
I basically overlapped two LabelClass instances. One italic and the other non-italic using a monospaced font.

Here are the steps I’ve followed to achieve the solution:

Set two different LabelClass instances to the labelingInfo property of the FeatureLayer.
- Use a monospaced font, which has every character (including the space) with the same width, for both LabelClass instances
- One instance will have italicized font
- The other instance will have the non-italicized font
Create the logic using Arcade Expression
- For the italicized label class instance, create the necessary logic to replace the non-italic parts of the label value with spaces
- For the non-italic label class instance, create the necessary logic to replace the italic parts of the label value with spaces
Set xoffset and yoffset properties to overlap both LabelClass instances

I've attached an image of the result.

I hope this helps.

Fabricio