pythonfoliumcolorbar

How to customize the caption text in Folium colorbar? I want to increase the font size of the colormap caption text

I am trying to use colorbar for an output variable circle plot in Folium

colormap = cm.LinearColormap(colors=['green','red'], index=[min(df['output']), max(df['output'])], vmin=min(df['output']),vmax=max(df['output']), caption='output in units')

folium.Circle(location=[row['Latitude'], row['Longitude']], 
                        radius=800*row["output"],
                        fill=True,
                        # opacity=0.8,
                        # fill_opacity=1,
                        color=colormap(row["output"])).add_to(m)

When I use this code, the caption text "output in units" is appearing very small. How to increase its font size?

Solution

  • AFAIK, there is no direct way to do it but, you can inject CSS using the font-size property.

    By inspecting the html's folium Map (with CTRL+SHIFT+I) on Chrome, the caption's text seems to be at #legend > g > text :

    enter image description here

    import folium
import pandas as pd
import branca.colormap as cm

df = pd.DataFrame({"output": range(10, 110, 10)})
agg = df["output"].agg(vmin="min", vmax="max")

m = folium.Map([39.5, -98.35], zoom_start=4)

colormap = cm.LinearColormap(
    colors=["green", "red"],
    index=agg.to_list(),
    caption="output in units",
    **agg.to_dict(),
)

CSS = "font-size: 16px;" # add more props if needed

m.get_root().header.add_child(
    folium.Element(f"<style>#legend > g > text.caption {{{CSS}}}</style>")
)

colormap.add_to(m)

    enter image description here