Deck.gl: Text layer with background

[maps82]

Hi! Can you give me a short and rough recipe on how I can achieve to render texts with text layer, but with white rounded background boxes, that have the same width as the text? I think I have to create a custom layer.

Is there a best practices for this without copying too much internals and messing around with a custom FontAtlasManager?

Thank you very much!

[maps82]

I solved this by writing a custom background layer, based on the original text layer source, together with a custom fontAtlasManager to calculate the background width based on the text, and modified the canvas texture created by the fontAtlasManager.

I think this is currently the only way to achieve such a background box. I leave this open in case someone has better ideas. If not feel free to close this issue.

[Pessimistress]

@xintongxia I think we could easily expose a TextLayer prop to set the background color of the texture canvas?

[maps82]

Would be great. But additionally I need (and have now) some rounded corners on the left and right of the background.

To be precise it's even more complicated, as the background color should be different for a specific portion of the text on the left (so should the text color). So also the text text layer is a custom one in my case. I think it's too complicated to get this done in a generic way.

[maps82]

Thats what it looks like currently in my case, but there is more to come...

[vnugent]

@maps82 would you please share the code snippet?

[danmarshall]

@Pessimistress : Would a background color enhance picking? I am hoping to get less accurate picking of text - for example, I would like the inside of the o and space between characters to be pickable.

[Pessimistress]

@xintongxia The picking issue should be fixable even without supporting a secondary color , if we make the cuttoff configurable: https://github.com/uber/deck.gl/blob/master/modules/layers/src/icon-layer/icon-layer-fragment.glsl.js#L47

[mdsviola]

@maps82

I solved this by writing a custom background layer, based on the original text layer source, together with a custom fontAtlasManager to calculate the background width based on the text, and modified the canvas texture created by the fontAtlasManager.

I think this is currently the only way to achieve such a background box. I leave this open in case someone has better ideas. If not feel free to close this issue.

How does the fontAtlasManager work? I'm trying to do the same thing as you but with no success..

[xintongxia]

@miguel-viola

I'll enable text-layer to support customized background color this week.

[maps82]

How does the fontAtlasManager work? I'm trying to do the same thing as you but with no success...

It's quite hacky and tailored to my use case, so I would need some time to prepare a clean generic sample, without showing too much of my client's code here, which I can't do.

I hope the upcoming text layer background feature will serve you. The trick for the background is basically to copy the text layer/fontmanager and modify the canvas it creates to your needs. And then overlay it with the regular text layer.

[mdsviola]

Is there any documentation for the fontAtlasManager?

[mdsviola]

@xintongxia Did you manage to add custom background support?