LeonvanKouwen / elvis

Combining holoviz panel and golden-layout in pure python.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

widgets and layout - autoresize height of an ipyleaflet map

epifanio opened this issue · comments

Hi,

I am trying to embed an ipyleaflet widget into a panel+elvis based app.
Once I add a map widget into an elvis.GoldenPanel - as I drag the widget borders, the width of the map view resizes according to it, but the height seems to be fixed.

It seems to me the height is not occupied entirely by the map widget, I can manually set the height with: m.layout.height = '900px' but I was actually looking for a way to resize the map like any other widget in the app.

I tried to use `m.layout.height = '100%' but then the map widget loses all the layout and gets rendered as a tiny line ..

A small snippet of code to reproduce the issue:

import panel as pn
import elvis
import param
from ipyleaflet import Map

elvis.HoloviewsBokeh.set_theme(elvis.LayoutTheme.DARK)


class MapViewer(param.Parameterized):
    zoom = param.Integer(default=8, bounds=(5, 18))

    def __init__(self, **kwargs):
        self.m = self.get_map()
        super().__init__(**kwargs)

    def get_map(self):
        center = (52.204793, 360.121558)
        m = Map(center=center, zoom=15)
        m.zoom = self.zoom
        m.layout.height = '900px'
        # m.layout.height = '100%'
        return m

    @param.depends('zoom')
    def view(self):
        m = self.get_map()
        return m


model = MapViewer()

panel_1 = pn.Column(pn.panel(model.param, show_name=False))
panel_2 = model.view

gpanel = elvis.GoldenPanel(theme=elvis.themes.LayoutTheme.DARK)
gpanel.compose(
    gpanel.column(
        gpanel.row(
            gpanel.view(panel_1, 'Controls', scrollable=False),
            gpanel.view(panel_2, 'Map'),
        )))
print(dir(gpanel.view))
gpanel.serve(title="Map Viewer", show=False, port=5051)

Do you have any idea on what I am doing wrong? I may miss some important parameter when constructing the map view.