Fixing the default height problem

[jtmiclat]

What I am changing

Fixing the default height problem

How I did it

Main factor here is setting the map's parent's div's display to flex.

The default display:block of the parent set's it values to based on children but since at initializing there is no contents/canvas/children for the parent this would be 0px when at 100%. While display:flex bypasses this.

Another common solution for web app is to set the height and width to 100vh and 100vw but this assumes that the map will cover the entire viewport/iframe/window which might not work for jupyter widgets.

How you can test it

Export a map using the following code:

import geopandas as gpd
from lonboard import viz
gdf = gpd.read_parquet(...) # any file would do
map = viz(gdf)
map.to_html("test.html")

Before:

After:

Let me know if you have other suggestions on how to test this!

Related Issues

Related to #247

[kylebarron]

Hmm I went to your branch and tried this...

But it still doesn't appear to fill the height

[jtmiclat]

Sorry, I think I screwed up and made a mistake with my assumption and tests. Closing for now until I can figure out how to address it!