Rendering Vertical Text on the Surface of a 3D Layer #9560

modantailleur · 2025-04-02T09:51:22Z

modantailleur
Apr 2, 2025

I've been trying to render text along the side of a 3D column layer, but I haven't found a satisfying solution yet. Specifically, I want to display text vertically on the circumference of a column layer, so it appears as if it's "stuck" to the side surface of the column. I tried using TextLayer, but it doesn't quite achieve what I need. The issue is that the only rotation available with TextLayer is around the z-axis via getAngle. While I could reactivate the billboard property, I want the text to remain fixed to the layer's surface — not rotating with the camera view. Below, I've included a minimal example demonstrating my best attempt so far. As you'll see, the primary issue is the lack of rotation control along the x and y axes.

Here's the CodePen to visualize it: CodePen Example

And here's the full code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Deck.GL Column in Paris</title>
  <!-- Load deck.gl (v9+) and MapLibre -->
  <script src="https://unpkg.com/deck.gl@^9.0.0/dist.min.js"></script>
  <script src="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.js"></script>
  <link
    href="https://unpkg.com/maplibre-gl@latest/dist/maplibre-gl.css"
    rel="stylesheet"
  />
  <style>
    body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      font-family: sans-serif;
    }
    #map {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <!-- This container is where deck.gl will render the map and layers -->
  <div id="map"></div>

  <script>
    // Center the view over Paris
    const INITIAL_VIEW_STATE = {
      latitude: 48.8566,
      longitude: 2.3522,
      zoom: 15,
      pitch: 45,
      bearing: 0
    };

    // Single data point representing the column in Paris
    const columnData = [
      { position: [2.3522, 48.8566], height: 300}
    ];

    // Calculate the offset position for the text
    const earthRadius = 6371000; // Earth's radius in meters
    const columnRadius = 200; // Column radius in meters
    const offsetLatitude = (columnRadius / earthRadius) * (180 / Math.PI);
    const textPosition = [2.3522, 48.8566 - offsetLatitude, 200]; // Offset by column radius in latitude

    // Data point for text label
    const textData = [
      { position: textPosition, text: 'MY TEXT' }
    ];

    // Define the ColumnLayer
    const columnLayer = new deck.ColumnLayer({
      id: 'column-layer',
      data: columnData,
      getPosition: d => d.position,
      getElevation: d => d.height,
      radius: columnRadius,
      getFillColor: [200, 200, 150],
      extruded: true,
      elevationScale: 1
    });

    // Define the TextLayer
    const textLayer = new deck.TextLayer({
      id: 'text-layer',
      data: textData,
      getPosition: d => d.position,
      getText: d => d.text,
      getColor: [0, 0, 0],
      getSize: 32,
      sizeUnits: 'meters',
      billboard: false,
      getTextAnchor: 'middle',
      getAlignmentBaseline: 'center',
      getAngle: 0
    });

    // Create the Deck instance
    const deckgl = new deck.DeckGL({
      container: 'map',
      mapLib: maplibregl,
      mapStyle: "https://basemaps.cartocdn.com/gl/positron-gl-style/style.json",
      initialViewState: INITIAL_VIEW_STATE,
      controller: true,
      layers: [columnLayer, textLayer]
    });
  </script>
</body>
</html>

I'm wondering if anyone has found a way to achieve this, perhaps using external libraries. I'd appreciate any guidance or suggestions!

charlieforward9 · 2025-04-06T22:30:39Z

charlieforward9
Apr 6, 2025

I had a similar issue trying to display text on the globe, like this.

Since the text layer renders flat, I had to make one text layer per character to get it to have that curved look to it.

As for the rotation to get the text to orient itself vertically relative to the deck surface, I cannot advise this but have subscribed to learn how do to the same thing.

1 reply

modantailleur Apr 7, 2025
Author

Thank your for your answer. The "one text layer per character" is also the best solution I have found so far for adapting to the curve of another polygon layer. I hope we will find a solution for vertical text !

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Rendering Vertical Text on the Surface of a 3D Layer #9560

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Rendering Vertical Text on the Surface of a 3D Layer #9560

Uh oh!

modantailleur Apr 2, 2025

Replies: 1 comment · 1 reply

Uh oh!

charlieforward9 Apr 6, 2025

Uh oh!

modantailleur Apr 7, 2025 Author

modantailleur
Apr 2, 2025

Replies: 1 comment 1 reply

charlieforward9
Apr 6, 2025

modantailleur Apr 7, 2025
Author