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'
    )
4

Thank you for the workaround. With the latest version streamlit - keplergl, I noticed that the map does not take the full space it is assigned to, unless resizing manually the browser window, or unless toggle with width mode from the streamlit top right drop down menu.

streamlit-keplergl==0.3.0
streamlit==1.44.0
keplergl==0.3.7
pandas>=2.2.3

The following code works, though the map is not re-sized correctly when running the page. To resize the component to the specified width and height (on chrome) the only thing that worked was to resize the window manually, or toggle the streamlit layout back to wide.

from copy import deepcopy
from keplergl import KeplerGl
import streamlit as st
import pandas as pd
import streamlit.components.v1 as components


st.set_page_config(
    layout="wide",
    initial_sidebar_state="auto",
    page_title="title",
)


if __name__ == "__main__":
    st.markdown("## KeplerGl map in streamlit")

    config = {
        "version": "v1",
        "config": {"mapState": {"latitude": 51.0, "longitude": 0.0, "zoom": 10}},
    }

    df_test = pd.DataFrame({"lon": [0.1, 0.15], "lat": [51.0, 51.123]})

    map_1 = KeplerGl(
        data=deepcopy({"commuters": df_test.head(1000)}),
        config=config,
        width=1900,
        height=1900,
    )

    components.html(
        map_1._repr_html_(read_only=False, center_map=False),
        height=800,
        width=1900,
    )

    st.write("end of map")

any help into having the map correctly sized out of the box is very appreciated.