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

3177
17
Jump to solution
02-01-2022 12:23 PM
Labels (1)
JayHodny
Occasional Contributor III

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?).

JayHodny_0-1643746462967.png

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.

JayHodny_1-1643746906637.png

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!

 

1 Solution

Accepted Solutions
KenBuja
MVP Esteemed Contributor

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;

 

View solution in original post

17 Replies
RussRoberts
Esri Notable Contributor

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

0 Kudos
JayHodny
Occasional Contributor III

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

JayHodny_0-1643822732905.png

 

 

KenBuja
MVP Esteemed Contributor

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
Occasional Contributor III

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

 

0 Kudos
JayHodny
Occasional Contributor III

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

0 Kudos
ZacharyUhlmann1
Occasional Contributor III

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!

0 Kudos
KenBuja
MVP Esteemed Contributor

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.

2022-11-03_12-18-19.png

0 Kudos
sajjady
New Contributor III

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
MVP Esteemed Contributor

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

0 Kudos