Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix CSS in static HTML export #248

Closed
kylebarron opened this issue Nov 13, 2023 · 3 comments · Fixed by #284
Closed

Fix CSS in static HTML export #248

kylebarron opened this issue Nov 13, 2023 · 3 comments · Fixed by #284

Comments

@kylebarron
Copy link
Member

kylebarron commented Nov 13, 2023 •
edited
Loading

Given default fonts, presumably css is not getting added to the static HTML page

image
@giswqs
Copy link
Contributor

giswqs commented Nov 13, 2023

This issue might be relevant: opengeos/leafmap#594 (comment)

@kylebarron
Copy link
Member Author

I don't think that's related. The standalone html export is working fine here; it's just missing our css.

@giswqs
Copy link
Contributor

giswqs commented Nov 13, 2023

Never mind. The exported html doesn't work with Streamlit. I will look into it later.

@jtmiclat jtmiclat mentioned this issue Dec 2, 2023
Merged
kylebarron pushed a commit that referenced this issue Dec 4, 2023
@jtmiclat
Add font to index.css (#284)
b7876c3 
## What I am changing
Add missing css to lonboard tooltip

## How I did it
The problem is that when inside a jupyter notebook, the tooltip (and
other html elements) inherit some css from jupyter lab/notebook compared
to running it in exported form. In this cases, it was the font.

Here is the css of the tooltip when in jupyter lab. The one declaring
the font is not related to the css of lonboard but the css of the body.
<img width="351" alt="Screenshot 2023-12-02 at 8 25 56 PM"
src="https://github.com/developmentseed/lonboard/assets/30991698/549ef00a-a978-42a0-abe6-dcca883c51a6">

vs css of the tooltip when exported
<img width="255" alt="Screenshot 2023-12-02 at 8 30 27 PM"
src="https://github.com/developmentseed/lonboard/assets/30991698/dff7f3aa-bd93-440e-80fd-8c0b9ca76126">

To fix this I added the missing font to the lonboard css. 

## How you can test it
Export map
```python
import geopandas as gpd
from lonboard import viz

gdf = gpd.read_parquet(...) # any file will do
map = viz(gdf)
map.to_html("test.html")
```


Before 
<img width="600" alt="Screenshot 2023-12-02 at 8 33 22 PM"
src="https://github.com/developmentseed/lonboard/assets/30991698/53af07e0-32e4-4fc6-81b7-5b905e29631b">

After
<img width="573" alt="Screenshot 2023-12-02 at 8 34 02 PM"
src="https://github.com/developmentseed/lonboard/assets/30991698/750042e2-feaa-4000-a424-3a94a62836a2">



## Related Issues
Closes #248
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add font to index.css jtmiclat/lonboard
2 participants
@giswqs @kylebarron