HTML - Folium - Not able to display map properly on the app despite unsafe_allow_html=True

[Tam-plotwise]

I am creating an app using streamlit and folium. (I used unsafe_allow_html=True to make sure the map could be displayed in the app).

My dataset contains 2000 rows. My deseriable output is a map of 2000 points, and if I click on each point, a pop up appears with information about address.

• If I visualize everything with popup, the map does not appear on streamlit app.
• If I visualize only 500 rows with popup, the map appears on streamlit app.
• If I visualize everything without pop up, the map appears on streamlit app.

Note that if I use folium alone, I could still manage to create an HTML map file of 2000 points with popup. It is just I could not visualize it on streamlit app.

Could you have a check on this? Is it due to the size of my HTML?

[andfanilo]

Hello @Tam-plotwise,

Would you be able to provide a small code snippet so we can reproduce on our side ? Thanks a lot !

[Tam-plotwise]

Here it is. My data contains following columns

• planning_date
• longitude
• latitude
• address
• stop time
  -owner

import streamlit as st
import pandas as pd
import numpy as np
import folium
import datetime

st.title('Delivery')

#Import data
data_load_state = st.text('Loading data...')

data = pd.read_csv('../output_sim/d_sim_adjust.csv',sep=';')

data['planning_date'] = data['planning_date'].map(str)

data_load_state.text("Done! (using st.cache)")

if st.checkbox('Show raw data'):
    st.subheader('Raw data')
    st.write(data)


#Design criteria
st.sidebar.title("Choose your map!")
filtered_date = st.sidebar.multiselect(label='Choose a date', 
                                           options=data.planning_date.unique().tolist(),
                                           key='2010-04-17')
st.write("{} is/are selected dates".format(', '.join(filtered_date)))


#Show filtered data (if any)

filtered_data = data.loc[(data['planning_date'].isin(filtered_date))]
filtered_data = filtered_data.reset_index(drop=True)

if st.checkbox('Show filtered data'):
    st.subheader('Filtered data')
    st.write(filtered_data)


#Create map
if st.checkbox('Create map?'):
    if filtered_data.planning_date.unique().tolist() != []:
        center_lon = 5.051758
        center_lat = 51.701616
        map_vis = folium.Map(location=[center_lat, center_lon], tiles='OpenStreetMap', zoom_start=13)
        folium.Marker(location=[51.701616,5.051758],popup=folium.Popup('First_stop',sticky=True),icon=folium.Icon(icon='car',color='red', prefix="fa")).add_to(map_vis)
        st.text('Creating map....Start!')
        for i in range(filtered_data.shape[0]):
            row = filtered_data.iloc[i]
            loc = [row['latitude'],row['longitude']]
            popup = (
                "Address: {add}<br>"
                "Stop time: {stop_time} seconds<br>"
                "Landlord: {name}<br>"
               ).format(timeindow=row['window_hr'],
                stop_time= str(row['stop_time']),
                add = row['address'],
                name = row['owner']
)
            
            folium.Marker(location=loc,popup=folium.Popup(popup, max_width=300,min_width=150,sticky=True),icon=folium.Icon(icon='car',color='blue', prefix="fa")).add_to(map_vis)
        st.markdown(map_vis._repr_html_(),unsafe_allow_html=True)
        st.text('Creating map....Finish!')

[andfanilo]

Thanks for the snippet !

Streamlit doesn't currently allow Javascript to be rendered through st.markdown which I think popup relies on, there's an issue regarding rendering Folium maps here #601 so I'd mark this one as a duplicate.

You could wait a bit for custom components to integrate Folium into one, or integrate it directly into Streamlit.

[Tam-plotwise]

Thanks for the quick response. When do you expect the integration to finish?

[andfanilo]

From #241 (comment) custom components is expected by H1 2020, should be around pretty soon as it's entering beta-testing ;)

[jrhone]

Closing as dupe of #601