How to do multiline textsymbol or textsymbol with linebreaks?

4119
8
09-26-2012 07:57 PM
MichaelTakiti
New Contributor
I have a text symbol like the following:


            var textSymbol = new esri.symbol.TextSymbol(
              "Row 1 \n Row 2 \n Row 3",
              font, new dojo.Color([0, 0, 0])
            );
            var labelPointGraphic = new esri.Graphic(labelPoint,textSymbol);
            map.graphics.add(labelPointGraphic);

I want to be able to separate out the Row1, Row2, and Row3 into separate lines, but it appears that having "\n" does not work andstill shows up on the same line. If there is not a simple way to have a single textSymbol with multiple lines, then is there some way I can create two textSymbols such that the second is offset to be just below first text symbol? Something like:

            var textSymbol = new esri.symbol.TextSymbol(
              "Row 1",
              font, new dojo.Color([0, 0, 0])
            );
            var anothertextSymbol = new esri.symbol.TextSymbol(
              "Row 2",
              font, new dojo.Color([0, 0, 0])
            );

            var labelPointGraphic = new esri.Graphic(labelPoint,textSymbol);
            map.graphics.add(labelPointGraphic);
            var labelPointGraphic = new esri.Graphic(labelPoint,anothertextSymbol).offset("someamount", "someamount");
            map.graphics.add(labelPointGraphic);

Note that I have tried using offset, but it appears to space them out way more than I would like and the gaps appear to widen whenever I zoom in or out. Feels like this should be simple...

Please help.
0 Kudos
8 Replies
derekswingley1
Frequent Contributor II
We do not have a good way to do a multi-line text symbol as a graphic. We're working on improving this (moving away from gfx text to use DOM elements) but don't have it ready yet. In the meantime, the only approach I can recommend is multiple symbols and trial and error.
0 Kudos
GauravKumar3
New Contributor II
Hi Derek

I am facing similar issue while working on globe.
Did you find any workaround in globe as well........
0 Kudos
SimonUyttendaele
New Contributor III
Hello,

Using newlines "\n" can be supported using the following solution.

Please vote upon the following idea which is precisely about this.

Regards
0 Kudos
JamalWest2
Occasional Contributor

Can this be done in wbappbuilder?

0 Kudos
MattiasEkström
Regular Contributor

Did you ever figured it out @JamalWest2 ?
\n worked just fine for me in FireFox but recently I noticed that it doesn't work in Google Chrome.

0 Kudos
JamalWest2
Occasional Contributor

You can accomplish this using Arcade. 

var tempArcade2 = "$feature."+field1TextLB;//Website";

				var tempClass2 = new LabelClass({
				  labelExpressionInfo: {
					expression: tempArcade2
				  },
				  labelPlacement: placementLB,
				  minScale: MinScaleB,
				  maxScale: MaxScaleB
				});
				tempClass2.symbol = textSymB;
				tempClass2.PoS = "S";

this.sLayer.setLabelingInfo([tempClass,tempClass2]
0 Kudos
MattiasEkström
Regular Contributor

I'm working with labels as TextSymbols created for a GraphicsLayer, it doesn't seem to be a setLabelingInfo method for a Graphic layer. Your example is for a feature Layer right?

0 Kudos
JamalWest2
Occasional Contributor

I'll have to go look at some of my code, but I think I did something on a graphic layer by creating an empty layer and cloning graphics layer to it and labeling.  basically i had something similar but need to look at it to let you know.

 

0 Kudos