Skip to content

[Bug] PointLabelLayer does not render TextLayer visual backgrounds #10486

Description

@tsume-ha

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions