[BUG] Map height fixed at 24rem

[wx4stg]

When embedding lonboard in panel (and probably other similar toolkits), the map height is fixed to 24rem, regardless of the parent container's height.

This issue is new since 0.9.3, I believe this issue was first introduced in 44a45f8. Continuing discussion from #264

Environment

• OS: Fedora 41
• Browser: Chrome/Brave
• Lonboard Version: 0.10.3

Steps to reproduce the bug

import panel as pn
from lonboard import Map
from lonboard.basemap import CartoBasemap

pn.extension()

title = pn.pane.Markdown('# THIS IS A TITLE')
lonb_map = Map([], basemap_style=CartoBasemap.Positron)
lonb_map_panel_container = pn.pane.IPyWidget(lonb_map, sizing_mode='stretch_both', align='center')

pn.Column(title, lonb_map_panel_container).servable()

[kylebarron]

I'm not great at HTML/CSS, so I'm not sure exactly what caused this regression. Open to any PRs. Also cc @vgeorge

[wx4stg]

I would be happy to try to troubleshoot this myself, to do this I could just (1) clone the repo (2) make my modifications (3) follow the python/uv instructions for compiling/running? ...or do I also need to do the javascript/node steps?

Just to be completely clear, I'm finishing up my MS right now and will likely not be able to start on this until later this summer... This came up in a discussion I had this week so I'm commenting here so I don't forget...

[kylebarron]

Yes the develop docs should have everything you need.

You'll need to follow the JS steps as well if you want to test locally, since there's a JS build step needed for the Python package.

[danielsparing]

@wx4stg you can pass _height to Map() such as Map( ..., _height=1000).

But I am running into the same myself in two other, related cases:

• viz() doesn't accept a height parameter
• when exporting a HTML (or inserting into another container, as @wx4stg 's example), you might want to use "100%", which is not possible here, and was once already implemented in https://github.com/developmentseed/lonboard/pull/377
• the _height parameter carries the note "This API is not yet stabilized and may change in the future." so I guess we shouldn't rely on it too much :)

I agree that the current height seems to come from the 24rem height defined here, introduced in https://github.com/developmentseed/lonboard/commit/44a45f87e7f3d7b3656966b0b0c2b0089000fe4f as @wx4stg mentioned.

My first thought was to replace

style={{ height: mapHeight ? `${mapHeight}px` : "24rem" }}

with

style={{ height: mapHeight ? `${mapHeight}px` : "100%" }}

here, (it was more or less "100%" before https://github.com/developmentseed/lonboard/commit/44a45f87e7f3d7b3656966b0b0c2b0089000fe4f ) but this also leads to the widget in JupyterLab to become very thin, so this doesn't work anymore.

[kylebarron]

I think this should be closed by #835