PyDeck TextLayer in Panel?

Hi All,

Has anyone successfully used a PyDeck TextLayer in a Panel application? I just ran into a serialization issue that I’ve reported here on GitHub. I need to be able to instantiate text layers within a Panel application I’m developing. So if someone has a workaround, I’m all ears!


Hi @diehl

Navigating through the stacktrace I find a Bokeh Serializer that serializes to json. It seems you can add custom encoders.

Could you try the below? I don’t see the serialization issue any more. But it seems it won’t accept my MAPBOX API KEY. So I don’t know fully if it works.

import pandas as pd
import pydeck as pdk

from bokeh.core.serialization import Serializer
from pydeck.types import String

def pydeck_string_encoder(obj, serializer):
    return obj.value


TEXT_LAYER_DATA = ""  # noqa

df = pd.read_json(TEXT_LAYER_DATA)

# Define a layer to display on a map
layer = pdk.Layer(
    get_color=[0, 0, 0],
    # Note that string constants in pydeck are explicitly passed as strings
    # This distinguishes them from columns in a data set
    size_units = String("meters")   # <--- The key addition to switch to meters as the units.

# Set the viewport location
view_state = pdk.ViewState(latitude=37.7749295, longitude=-122.4194155, zoom=11, bearing=0, pitch=0)

# Render
r = pdk.Deck(
    tooltip={"text": "{name}\n{address}"},

import panel as pn

pn.pane.DeckGL(r, api_keys={'mapbox': MAPBOX_KEY}, sizing_mode='stretch_both').servable()
1 Like

Hi Marc,

It looks like it is no longer crashing but it also appears that the PyDeck layer is no longer rendered.

Try this notebook on your end. There’s no need for a Mapbox key. I added the serialization code you shared. Maybe I missed something here…



I won’t have access to my laptop the next week.


  1. try “inspecting” the JavaScript console. I see a CORB issue. When I click the link then it’s shows a message from mapbox - not authorized

  2. try inspecting the python DeckGL code. Somewhere it will convert pydeck and the parameters to a dictionary. If you can try inspecting and using the dictionary my hypothesis is that you can find the problem there.

1 Like

Roger that @Marc - I’ll see what I can find. Thanks!

Curiously enough, I’m not seeing any Mapbox authorization issues or CORB issues. When I run the notebook I sent you, I am seeing this message in the Javascript console.

util.js:516 This page appears to be missing CSS declarations for Mapbox GL JS, which may cause the map to display incorrectly. Please ensure your page includes mapbox-gl.css, as described in API Reference | Mapbox GL JS | Mapbox.

Took a look at the DeckGL code on Github and am struggling to make sense of what is there in my first attempt.

FYI I just tried realizing a TextLayer with a JSON spec fed directly to Panel and that seems to work. This provides an interim workaround.

1 Like

Hi Marc,

I wanted to circle back with you on this as I could still use a solution that overcomes this serialization error. I think I can achieve what I need through a JSON specification, bypassing PyDeck and using Panel directly but it is cumbersome when dynamically updating the visualization based on user interaction. I struggled to make sense of the code to better understand why it’s failing. If you’ve got any additional thoughts on how to overcome this issue, I’d love to hear them.

1 Like

Could you provide an example of a PyDeck and a Json specification with the TextLayer that is expected to produce the same result? Then I believe it should be possible to setup Panel to do the right transformation from PyDeck to Json.

1 Like

My pleasure. Here’s a notebook that I believe gives you what you need. Please let me know if you need anything else!

The issues have been identified and a workaround found in Serialization Error When Visualizing PyDeck TextLayer · Issue #5346 · holoviz/panel · GitHub

Yes indeed. Thank so much @Marc for running this to ground!! Being able to use TextLayers in DeckGL visualizations in Panel is a big deal.

1 Like