Pydeck height

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=['thickness
size_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)

Hi @sponge :wave:

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) 

pydeck-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, :balloon:
Snehan

Thanks for the answer. It seems like to work for the height but it deactivate my basemap and the zoom feature.
with components :

with st.pydeck :

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

1 Like

Thanks for trying @snehankekre, I’ve done so :slightly_smiling_face: