deck.gl icon indicating copy to clipboard operation
deck.gl copied to clipboard

[Bug] Text border not visible

Open rokamon1997 opened this issue 8 months ago • 2 comments

Description

Hello, I am having issues drawing borders to my text in the GeoJsonLayer with pointType="circle+text". They never appear and I don't know if I'm missing something or is it a bug.

    pointType: 'circle+text',
    getText: (f: Feature) => "Test", // Display feature name
    getTextColor: (f: Feature) => [255, 255, 255, 255],
    getTextAnchor: 'start',
    getTextAlignmentBaseline: 'bottom',
    getTextPixelOffset: [12, 0],
    textSizeUnits: 'meters',
    getTextSize: 12,
    textSizeMinPixels: 12,
    textSizeMaxPixels: 20,
    // textOutlineColor: [0, 0, 0, 255],
    // textOutlineWidth: 3,
    getTextBorderColor: [0, 0, 0, 255],
    getTextBorderWidth: 3,

This are the text-properties in my GeoJsonLayer. I tried both the border and outline properties but with no luck. The text displays fine but it has no border.

I am using openlayers for the base.

Image

Flavors

  • [ ] Script tag
  • [ ] React
  • [ ] Python/Jupyter notebook
  • [ ] MapboxOverlay
  • [ ] GoogleMapsOverlay
  • [ ] CARTO
  • [ ] ArcGIS

Expected Behavior

The text should have borders of the provided color and width.

Steps to Reproduce

Create a GeoJsonLayer with pointType='color+circle'. Add above text properties.

Environment

  • Framework version:
    • ol: "^10.4.0",
    • @deck.gl/core: "^9.1.4",
    • @deck.gl/layers: "^9.1.4",
  • Browser: Chrome 133.0.6943.128 (Official Build) (arm64)
  • OS: Mac OS 15.2

Logs

No response

rokamon1997 avatar Feb 28 '25 09:02 rokamon1997

textBackground must be set to true for background borders to render, see getBorderColor.

Pessimistress avatar Feb 28 '25 18:02 Pessimistress

Thanks. I actually noticed that I wanted the text outline effect, not border - which I managed to get working by setting SDF to true:

...
textOutlineColor: [0, 0, 0, 255],
textOutlineWidth: 10,
textFontSettings: {
      sdf: true,
},
...

However, now I get this two small little lines under the text. Increasing the buffer value in the textFontSettings resolves this issue but I am not sure if that is the right solution?

Image

rokamon1997 avatar Feb 28 '25 21:02 rokamon1997