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

Very small font-size in maps #204

Closed
JonDHo opened this issue Jul 22, 2024 · 1 comment
Closed

Very small font-size in maps #204

JonDHo opened this issue Jul 22, 2024 · 1 comment

Comments

@JonDHo
Copy link
Contributor

JonDHo commented Jul 22, 2024 •
edited
Loading

It seems that since a change in Leaflet v1.8.0, which included this PR: Leaflet/Leaflet#7800, the font size for various map elements in streamlit-folium has shrunk to 7.5px. This effects the atribution, a scalebar, any popup text and probalby other elements. This is most easily seen in the live examples at https://folium.streamlit.app/ where all of these are very small.

This seems to be caused by the relative font-size setting which was introduced in the PR above, but it is also interacting with a font-size setting which is being inherited from the bootstrap-glyphicons.css file which is dynamically added. This adds a font-size: 62.5% attribute to the <html> element of the streamlit-folium iframe, causing the reference font size for the iframe to drop from 16px to 10px. This the reduces further due to Leaflet's font-size: 0.75rem setting, dropping it to 7.5px.

Direct Folium users don't have this issue because they don't inherit font-size from the glyphicons-bootstrap.css file or as per the PR above, they can set the font-size of the leaflet-container element.

It can be resolved by removing the glyphicon-boostrap.css from the map object, but this might affect some other situations if people are using glyphicons:

leaflet_css = m.default_css
for i in range(0, len(leaflet_css)):
    if "glyphicons_css" in leaflet_css[i]:
        leaflet_css.pop(i)
        break

A better solution might be to force a font-size: 1rem attribute in the <html> tag in the relevant template in streamlit-folium:

streamlit-folium/streamlit_folium/frontend/public/index.html

Line 2 in 58b14d7

<html lang="en">

I think this issue will disappear in future Leaflet updates, because I don't think this css is used in more recent versions of Bootstrap.
@randyzwitch
Copy link
Owner

Weird interaction, thanks for reporting @JonDHo! Since you've identified the line in the code, would you be able to open a PR for this change also?

@JonDHo JonDHo mentioned this issue Jul 23, 2024
Merged
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

No branches or pull requests
2 participants
@randyzwitch @JonDHo