visgl / visgl/deck.gl

[Bug] PointLabelLayer does not render TextLayer visual backgrounds

Open
#10,486 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
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:

  • getBackgroundColor
  • getBorderColor
  • getBorderWidth
  • backgroundBorderRadius
  • backgroundPadding

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:

  1. Open the CodePen.
  2. Compare the labels on the left and right maps.
  3. Observe that the TextLayer on the left renders a white background and a colored border around each label.
  4. Observe that the PointLabelLayer on 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.