Render <class 'branca.element.Figure'> to allow resizing without white space

[GitHunter0]

Hey @randyzwitch , thank you for providing this component, it's been very useful.

The only issue so far is that reducing folium width/height produces white space on the borders:

import folium
m = folium.Map(width='70%', height='50%')
m

The solution is to use branca.element.Figure class:

from branca.element import Figure
fig = Figure(width='70%', height='50%')
m = folium.Map()
fig.add_child(m)

However, your component currently is not able to render it. Could you please enable that or suggest a workaround?

[randyzwitch]

@GitHunter0, my apologies for not getting back to you sooner. It appears that branca Figures work the same way as Folium, meaning you can do something like:

components.html(fig._repr_html_()) to immediately show a branca.element.Figure class.

This could be added to the package pretty quickly, the only thing would be accounting properly for people passing height/width as percentages as you did.

Best,
Randy

[GitHunter0]

Hey @randyzwitch , any addition to the package in this regard would be nice. Thank you

[randyzwitch]

@GitHunter0 Version 0.5.0 was released to PyPI (will go to conda-forge whenever it processes) right now with basic Branca support. Please test this out and if something doesn't work as expected, create a new issue.

Thanks for checking out streamlit-folium!

[GitHunter0]

Thanks for the update @randyzwitch !

I tested here and now streamlit-folium can render branca, which is very nice because it removes the white space from the maps.

However, it still keeps the map original frame size, so if you shrink the map, there will be unused space around it. Below there is a code and a video displaying this issue with folium + streamlit:

import streamlit as st
from streamlit_folium import folium_static
import folium

m1 = folium.Map(width=500, height=300)
m1
folium_static(m1)

st.write("branca element with folium_static")
from branca.element import Figure
fig = Figure(width='70%', height='50%')
m = folium.Map()
fig.add_child(m)
folium_static(fig)

m2 = folium.Map(width='100%', height='100%')
folium_static(m2)

m3 = folium.Map(width=400, height=300)
folium_static(m3)

m4 = folium.Map(width='40%', height='30%')
folium_static(m4)

https://user-images.githubusercontent.com/26294221/153388740-f0b9d5c8-42ef-4659-afcb-0c6fdbb2fb0d.mp4
PS: the video is not playing... I will add screenshots

[randyzwitch]

I think the re-size piece is an artifact of how static components currently work in Streamlit, I'm not sure this is something I can solve. I think that's what this other issue is meant to solve?

#7 (comment)

[GitHunter0]

It probably is, I hope Streamlit developers are aware of this issue, thank you @randyzwitch