Select to view content in your preferred language

Multiple TextSymbol with background that overlap have unexpected render order

06-14-2023 09:34 AM
Occasional Contributor

A TextSymbol has the ability to include a background as part of the symbol. If two TextSymbols with backgrounds overlap, the text of both symbols will be drawn on top of both backgrounds. When applying background to text I was expecting it to be treated as a single symbol object and rendered together. My goal is to have the entire symbol (text/background) stack on top of the other if overlap: Render symbol1 with background; then render symbol2 with background (and if overlaps on symbol1, the background of symbol2 would be on top of symbol1).

Since applying a background to text, it would make sense that both the text/background would stack and render together.  @AnneFitz  I'm hoping you might be able to provide some insight with your previous help on TextSymbol questions. Assuming this is a bug as adding different types of symbols can all overlap text.

CodePen of issue:

Attached a few images of the examples as well.

Tags (2)
Esri javascript 4.27 test using text backgrounds. Overlapping text will raise all text above all text backgrounds...
2 Replies
Esri Regular Contributor

Hi @BryanMc - thanks for pointing this out! It does seem like a bug - we'll take a look for the upcoming release.

Occasional Contributor

Hi @AnneFitz  - thank you for the quick reply.

One new observation... If I add a text symbol, then an overlap text symbol: Issue appears; However, If I add a text symbol, then a random other graphic (line/point, etc), then the second overlap text symbol: They draw correctly. Seems like it only happens when the two textSymbol graphics are in the graphics array immediately adjacent. Wasn't an exhaustive test but wanted to mention.

0 Kudos