Pydeck height

[sponge]

Hi,

After last updates of streamlit with upgrades on plotly renderings, everything was great except for px.scattermapbox weird handling with st.selectbox to select column for the marker color.

So I switched to pydeck, it works great but I cant find a way to make the map taller no matter the height I pick. What could I try to make it work ?

import pydeck as pdk
view_state = pdk.ViewState(latitude=df[‘lat’].mean(), longitude=df[‘lon’].mean(), zoom=13, pitch=0)

tooltip = {
“html”:
“Chimie: {color}
”
“Epaisseur: {thickness} m
”,
“style”: {
“backgroundColor”: “steelblue”,
“color”: “black”,
}
}

slayer = pdk.Layer(
type=‘ScatterplotLayer’,
data=df,
get_position=[“lon”, “lat”],
#get_color=[“200-(color-color_min)/(color_max-color_min)*200”, “255-(color-color_min)/(color_max-color_min)*1”, “200-(color-color_min)/(color_max-color_min)*200”],
get_color=[“90+(color-color_min)/(color_max-color_min)*255”, “31+(color-color_min)/(color_max-color_min)*175”,"255-(color-color_min)/(color_max-color_min)255"],
get_line_color=[0, 0, 0],
get_radius=['thicknesssize_correction’],
pickable=True,
onClick=True,
filled=True,
line_width_min_pixels=10,
opacity=2,
)

pp = pdk.Deck(
initial_view_state=view_state,
map_provider=‘mapbox’,
map_style=pdk.map_styles.SATELLITE,
layers=[slayer],
tooltip=tooltip,
height=1500
)

deckchart = st.pydeck_chart(pp)

[snehankekre]

Hi @sponge

In the pydeck documentation, the docstring for the height parameter reads:

• height (int , default 500) – Height of Jupyter notebook cell, in pixels.

The height parameter only works in Jupyter notebook cells. If you want it to work in Streamlit, I’d suggest submitting a feature request in the Streamlit repo.

In the interim, the workaround is to convert the Deck object to an HTML string, and render that string with the components API, like so:

import numpy as np
import pandas as pd
import pydeck as pdk

import streamlit as st

chart_data = pd.DataFrame(
    np.random.randn(1000, 2) / [50, 50] + [37.76, -122.4], columns=["lat", "lon"]
)


height = st.slider("Height", 100, 1000, 500)

chart = pdk.Deck(
    map_style=None,
    initial_view_state=pdk.ViewState(
        latitude=37.76,
        longitude=-122.4,
        zoom=11,
        pitch=50,
    ),
    layers=[
        pdk.Layer(
            "HexagonLayer",
            data=chart_data,
            get_position="[lon, lat]",
            radius=200,
            elevation_scale=4,
            elevation_range=[0, 1000],
            pickable=True,
            extruded=True,
        ),
        pdk.Layer(
            "ScatterplotLayer",
            data=chart_data,
            get_position="[lon, lat]",
            get_color="[200, 30, 0, 160]",
            get_radius=200,
        ),
    ],
    height=height, # Set the height of the map
)

# Pass the height to the frame
st.components.v1.html(chart.to_html(as_string=True), height=height) 

But this might not actually be a workaround. I suspect just the frame height is updated, not the underlying chart height which only increases in Jupyter cells. Your best bet is to submit a feature request.

Best,
Snehan

[snehankekre]

That’s unfortunate You’d have to submit a feature request in that case.

[sponge]

Thanks for trying @snehankekre, I’ve done so