Clipped folium map outputs on localhost

🧩 Custom Components streamlit-folium
1

Hi

I am facing a recurring issue of having clipped maps/output from st_folium.

image
image3756×522 37.6 KB

The maps are working well and normal in Jupyter Notebook but not in my app. I am using localhost.

Here is my reproducible code

import pandas as pd
import folium
from folium.plugins import HeatMapWithTime
from streamlit_folium import st_folium

data = {
    'S/N': [1, 2, 3, 4, 5],
    'TEAM': ['ST5', 'ST5', 'ST5', 'ST4', 'ST4'],
    'OFFENCE DATE': ['1/1/2022', '1/1/2022', '1/1/2022', '1/2/2022', '1/2/2022'],
    'TIME CASE DETECTED': ['11:20 AM', '12:57 PM', '1:03 PM', '1:53 PM', '2:50 PM'],
    'POSTAL CODE': [409006, 387791, 387791, 639499, 639499],
    'latitude': [1.318136491, 1.314157697, 1.314157697, 1.321481664, 1.321481664],
    'longitude': [103.8931439, 103.8799338, 103.8799338, 103.6609528, 103.6609528]
}

df = pd.DataFrame(data)
df['OFFENCE DATE'] = pd.to_datetime(df['OFFENCE DATE'])

# df = pd.read_excel('data.xlsx')

df['date'] = df['OFFENCE DATE']
df['year'] = df['OFFENCE DATE'].dt.year
df['month'] = df['OFFENCE DATE'].dt.month_name()
df['week'] = df['OFFENCE DATE'].dt.isocalendar().week

year_list = list(df['OFFENCE DATE'].dt.year.unique())
month_list = list(df['OFFENCE DATE'].dt.month_name().unique())
week_list = list(df['week'].unique())


def gen_heatmapwtime(df, frequency='date'):
    # Prepare coordinates (list of lists of coordinates) to be plotted
    lat_long_list = []
    
    for i in df[frequency].unique():
        temp = []
        for index, instance in df[df[frequency] == i].iterrows():
            temp.append([instance['latitude'], instance['longitude']])
        lat_long_list.append(temp)
    
    # Prepare time index
    time_index = []
    
    for i in df[frequency].unique():
        time_index.append(i)
    
    # Formatting the time index
    if frequency == 'date':
        date_strings = [d.strftime("%A %d/%m/%Y %H:%M") for d in pd.DatetimeIndex(time_index)]
    elif frequency == 'week':
        date_strings = [f'Week {d}' for d in time_index]    
    else:
        date_strings = time_index
    
    # Ensure length of both lists tally
    print(f'Length of lat_long_list: {len(lat_long_list)}')
    print(f'Length of time_index: {len(time_index)}')
    
    # Instantiate heat map
    hmwt = folium.Map(location=[1.352083,103.819839],
                    zoom_start = 11,
                    tiles="https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png",
                    attr="Stadia.AlidadeSmoothDark")
    
    HeatMapWithTime(data=lat_long_list, index=date_strings).add_to(hmwt)
    
    return hmwt

st_folium(gen_heatmapwtime(df=df, frequency='month'), width=866, height=519, returned_objects=[])
2

Hey jordanhan,

I’m facing the same issue. Were you able to fix it?

Thanks

3

@3amou @jordanhan

Try using folium_static() instead of st_folium(), even though the devs recommend using the latter (as an updated way to do it) it still causes lots of issues including clipped maps to a short height, so instead try using folium_static.

I’ve been through similar problem so here’s a related GitHub issue for more details:

4

Hey IndigoWizard,

Fixed my issue. Thanks!