Wrap/stack a text string label in an AGOL web map

[JayHodny]

Hello.  I have labels using an attribute text string that I would like to "wrap and stack" on my web map.  In Pro, I am able to do this using Labeling Properties (see screen shot).  I published the service but the labeling itself did not carry through to the service (maybe I missed a setting in the Share Web Layer?).

I read that classic map viewer does not support the idea but the new map viewer does (maybe)?  I opened my web map in the new map viewer and poked around on the Label features dialogue but was not successful.

I am an Arcade beginner, but was wondering if there is an arcade function or code snippet available to do this, for example, wrap and stack the text string at the first space in the string?  Thanks!

[RussRoberts]

Yup it is supported in New Map Viewer. Here is a sample web map

https://jsapi.maps.arcgis.com/apps/mapviewer/index.html?webmap=a4e63c4987b543d790cd1f28b801cc3f

And an article on how to create this

https://support.esri.com/en/technical-article/000025694

[JayHodny]

Hello.  Many thanks for your reply.   I had reviewed the article you refer too prior to my post.  If I am not mistaken, the workflow described therein is to stack values from multiple fields to create the feature labels using the new map viewer.  In my case, I have one field (screen shot) with text string choices that I want to split and stack or word-wrap and stack (I don't know of a better way to call this idea).  I will revisit the technical article in the case the answer does reside there.  Regards, Jay

[KenBuja · Accepted solution]

What you'd have to do is split the string and rebuild it with the line breaks

var array = split($feature.yourField, " ");
var string;
for (var k in array){
    string += array[k] + TextFormatting.NewLine
}
return string;

A more complex code will put line breaks at certain lengths (the variable maxlength)

var array = split($feature.yourfield, " ");
var string;
var line = "";
var maxlength = 10;
for (var k in array){
    console(count(array[k]))
    if (count(array[k]) <= maxlength) {
      if (count(line) <= maxlength) {
          line += array[k] + " ";
          if (count(line) > maxlength) {
            string += line + TextFormatting.NewLine;
            line = "";
          }
      } 
    } else {
        if (count(line) > 0) { 
          string += line + TextFormatting.NewLine + array[k] + TextFormatting.NewLine;
          line = "";        
        } else {
            string += array[k] + TextFormatting.NewLine;
        }
    }
}
if (count(line) != 0) string += line;
return string;

[JayHodny]

Hi Ken,  Many thanks!  I was heading down the string split path, but my inexperience at Arcade was getting in the way.  Thanks for the code.  I will give this a try.  Regards, Jay

[JayHodny]

That code worked great in the new map viewer, thank you!

[ZacharyUhlmann1]

Hi Ken - Hopefully you can save me some time on a hopefully simple question.  Where do I apply that code?  I use Python a lot, not yet Java or JS, but I can read it.  Do you have any resources for applying this code to the same situation as the original Q poster - @JayHodny ?  I want to split the lines of labels for one Feature using your based on maxLength parameter.  I appreciate your help!

[KenBuja]

In the Map Viewer, click the Label icon on the right menu, then click Label. Click on "</>" in the Label field to open the Arcade editor.

 

[sajjady]

Hi @KenBuja thanks for this expression. Could you please suggest for two or three different field expression in multiline.

Same like this type of expression

[KenBuja]

It would be helpful to start a new discussion and give more information on what you're trying to do.