PyDeck TextLayer in Panel?

Panel
1

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!

Chris

2

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

Serializer._encoders[String]=pydeck_string_encoder

TEXT_LAYER_DATA = "https://raw.githubusercontent.com/visgl/deck.gl-data/master/website/bart-stations.json"  # noqa
MAPBOX_KEY = "YOUR KEY HERE"

df = pd.read_json(TEXT_LAYER_DATA)



# Define a layer to display on a map
layer = pdk.Layer(
    "TextLayer",
    df,
    pickable=True,
    get_position="coordinates",
    get_text="name",
    get_size=160,
    get_color=[0, 0, 0],
    get_angle=0,
    # Note that string constants in pydeck are explicitly passed as strings
    # This distinguishes them from columns in a data set
    get_text_anchor=String("middle"),
    get_alignment_baseline=String("center"),
    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(
    layers=[layer],
    initial_view_state=view_state,
    tooltip={"text": "{name}\n{address}"},
    map_style=pdk.map_styles.ROAD,
)

import panel as pn

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

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…

Chris

4

Hi

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

Try

  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
5

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

6

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.

7

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
8

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
9

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
10

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

11

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

12

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