Adding text to pydeck scatterplotLayer

🎈 Using Streamlit
7

Hey @yehren , I think I found a fix for your issue.

When i use a textLayer the text is above the circle when the maps’ Pitch is 0 degrees, but with 45deg pitch the text is partially hidden by the circle.

You just need to set get_alignment_baseline='"bottom"'

Here’s the full working code:

import streamlit as st
import pandas as pd
import pydeck as pdk

view_state = pdk.ViewState(latitude=32,
                           longitude=35,
                           zoom=7,
                           pitch=0)

d1 = {'lon': [35, 35.1], 'lat': [32.5, 32.6], 'name':['meA', 'meB'], 'prec':[100,300], 'temp':[10,30], 'elevationValue':[100,300]}
df_map1 = pd.DataFrame(data=d1)

tooltip = {
    "html":
        "<b>Name:</b> {name} <br/>"
        "<b>Rain:</b> {prec} mm<br/>",
    "style": {
        "backgroundColor": "steelblue",
        "color": "black",
    }
}

slayer = pdk.Layer(
    type='ScatterplotLayer',
    data=df_map1,
    get_position=["lon", "lat"],
    get_color=["255-temp*3", "31+temp*2", "31+temp*3"],
    get_line_color=[0, 0, 0],
    get_radius=1750,
    pickable=True,
    onClick=True,
    filled=True,
    line_width_min_pixels=10,
    opacity=2,
)

layert1 = pdk.Layer(
    type="TextLayer",
    data=df_map1,
    pickable=False,
    get_position=["lon", "lat"],
    get_text="name",
    get_size=3000,
    sizeUnits='meters',
    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
    getTextAnchor= '"middle"',
    get_alignment_baseline='"bottom"'
)

pp = pdk.Deck(
    initial_view_state=view_state,
    map_provider='mapbox',
    map_style=pdk.map_styles.SATELLITE,
    layers=[
        slayer,
        layert1,
    ],
    tooltip=tooltip
)

deckchart = st.pydeck_chart(pp)
2 Likes