[Bug] PointLabelLayer does not render TextLayer visual backgrounds
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 14.6k
- Forks
- 2.3k
- Avg merge
- 2d 9h
- Merged PRs (30d)
- 42
Description
Description
PointLabelLayer is documented as inheriting all properties from TextLayer.
However, when background: true and the related background styling properties are specified, the visual background is not rendered.
The text itself is rendered correctly, but the following properties do not affect the normal screen output:
getBackgroundColorgetBorderColorgetBorderWidthbackgroundBorderRadiusbackgroundPadding
The same properties render correctly when applied to a regular TextLayer.
This is particularly problematic because PointLabelLayer has been recommended as an alternative for collision issues involving TextLayer and offset label placement, but switching to it removes the visual background supported by TextLayer.
Flavors
Script tag
Expected Behavior
When background: true is specified on a PointLabelLayer, it should render the same visual text background as TextLayer.
In the CodePen reproduction:
- Tokyo should have a white background with red text and a red border.
- Shinagawa should have a white background with blue text and a blue border.
- Ueno should have a white background with green text and a green border.
The collision geometry may need to use a different or expanded background internally, but the normal screen pass should still render a visual background using the documented TextLayer background properties.
Steps to Reproduce
CodePen:
https://codepen.io/editor/tsume-ha/pen/019fa36a-599d-7569-9c0c-bad6d17efa61
The reproduction displays two independent deck.gl instances side by side, both using the same station data and the same initial view state.
- Left:
TextLayer - Right:
PointLabelLayer
Both layers use the same station data and the same text, background, and border properties.
Steps:
- Open the CodePen.
- Compare the labels on the left and right maps.
- Observe that the
TextLayeron the left renders a white background and a colored border around each label. - Observe that the
PointLabelLayeron the right renders the label text, but not the background or border.
The issue is reproducible without enabling collision filtering. This indicates that the missing visual background is specific to PointLabelLayer and is not caused by collision visibility calculations.
Environment
- Framework version: deck.gl@9.3.7, @deck.gl/carto@9.3.7
- Browser: Chrome 150.0.7871.187
- OS: Windows 11
Logs
No relevant errors or warnings are reported in the browser console.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by comparing the PointLabelLayer and TextLayer implementations, using the linked CodePen to reproduce the missing background and border rendering. Verify that background, color, border, border width, radius, and padding properties produce the expected visual backgrounds for the three labels while collision filtering remains disabled.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 68/100