Creation of folium maps within pn.Card within pn.Tab layout

Hi. I’m new to Panel, and really liking it so far. I encountered a problem with layout of a folium map when I tried to position it within a panel.Card. It seemed no matter what I did, the folio Map was getting a very minimal height of ~15px.

I reached out on the HoloViz Discord, and @ahuang11 provided the following solution:

import folium
import panel as pn
pn.extension()

m = folium.Map(location=[52.51, 13.39], zoom_start=12)

m_pane = pn.pane.plot.Folium(m, min_height=300, sizing_mode="stretch_both", name='folium map Success')

folium_pane = pn.Tabs(
    m_pane,
    pn.Card(m_pane.clone(), title='folium map', name='folium map Grr!', sizing_mode="stretch_both"),
    sizing_mode="stretch_both",
)

folium_pane.show()

This solution worked. It resulted in an appropriately-sized folumn Map within a panel Card.

The key appears to have been the addition of sizing_mode="stretch_both" on the folio Pane object, the Card object, and the Tab object.

Thanks @ahuang11,

Mike

1 Like

This is the final result, with the fixes implemented as suggested by @ahuang11: