Adapt Container streamlit_keplergl

🧩 Custom Components
1

Hi!

I am developing an app that shows several population indicators. For the commuting maps, I am using Keplergl, a tool developed by Uber to map origins and destinations. Someone kindly developed a component for rendering kepler.gl maps in a streamlit app. The component doesn’t come with an option to adapt it to the container width.

Can someone help me find a way to make it adapt to a column width? I just develop some things in Python, so I don’t know much about web development, but if it is something with CSS, I can give it a try.

Thank you!

1 Like
2

Created Width does not update · Issue #3 · chrieke/streamlit-keplergl · GitHub

3

@augusgeog as a workaround I added a button to simply download the generated html file:

# Load data to geodataframe
df = gpd.read_file(infile)
map_1 = KeplerGl(height=400)
map_1.add_data(df, 'data_1')

# Save the html
MAP_FILE = 'map.html'
map_1.save_to_html(file_name=MAP_FILE, read_only=True)

# Download button
with open(MAP_FILE, "rb") as file:
        btn = st.download_button(
        label="Download HTML",
        data=file,
        file_name=MAP_FILE,
        mime='text/html'
    )