2

I am working with creating a folium map within streamlit. I like the ControlLayer() functionality that folium provides, but I would like to be able to customize it a bit more. I found this comment that suggests appending css-classes to the folium default css list. I've tried overriding the classes that would effect the background color and label color, yet when I load the map, the default is still applied.

Would someone be able to explain what I am doing wrong? Could you please use my example to illustrate the correct way?

map_test.py

import folium
import pandas
import requests
from streamlit_folium import folium_static

state_geo = requests.get("https://raw.githubusercontent.com/python-visualization/folium-example-data/main/us_states.json").json()
state_data = pandas.read_csv("https://raw.githubusercontent.com/python-visualization/folium-example-data/main/us_unemployment_oct_2012.csv")

css_file = r"C:\Users\myname\leaflet_control_layer.css"

css_classes = [
    ('leaflet-control-layers', css_file),
    ('leaflet-control-layers-label', css_file)
]

# Append each class to Folium's default CSS
for label, css_file in css_classes:
    folium.folium._default_css.append((label, css_file))

m = folium.Map(location=[48, -102], zoom_start=3)

folium.Choropleth(
    geo_data=state_geo,
    name="choropleth",
    data=state_data,
    columns=["State", "Unemployment"],
    key_on="feature.id",
    fill_color="YlGn",
    fill_opacity=0.7,
    line_opacity=0.2,
    legend_name="Unemployment Rate (%)",
).add_to(m)

# Add layer control
folium.LayerControl(collapsed=False).add_to(m)

folium_static(m, width=800, height=800)

leaflet_control_layer.css

/* Change the background color of the control layer */
.leaflet-control-layers {
    background-color: #4b00ad; /* Change this to your desired color */
}

/* Change the text color of the control layer */
.leaflet-control-layers-label {
    color: #c70a9e; /* Change this to your desired color */
}

enter image description here

2 Answers 2

2

You are setting CSS of the wrong component, it should be .leaflet-control-layers-expanded.

So this style:

.leaflet-control-layers-expanded {
  background-color: #ff0;
  color: #f00;
}

gives this result:

enter image description here

3
  • Unfortunately that did not work. I think it's due to that I am using streamlit. However I did find the solution. I'll post in a moment.
    – Binx
    Commented Mar 1 at 20:49
  • And yes, I was using the wrong component. Thank you for pointing that out. I noticed there are three different components (control-layers, control-layers-expanded, and control-layers-label). How do you know that expanded was the one? Why would labels not be?
    – Binx
    Commented Mar 1 at 21:16
  • I used browse debugger elements inspector, which is standard method in such cases. I haven't noticed control-layers-label style being used anywhere
    – TomazicM
    Commented Mar 1 at 21:19
2

Utilizing ChatGPT, I learned that "For a Folium map that you intend to display within a Jupyter notebook or a web application, the CSS file needs to be accessible via a web address. This is because the Folium map is essentially a web page embedded within the notebook or web app, and it can only access resources that are available through HTTP or HTTPS protocols".

Given this, I used Github pages to host my css (pages needs a pro account fyi). I uploaded my file and updated my css_file location to `css_file_url = "https://quantumspatialinc.github.io/my-repo-name/leaflet_control_layer.css".

As TomazicM pointed out, I also was using the wrong css component.

.leaflet-control-layers-expanded {
    background-color: #4b00ad;
    color: #0ac733; /* Change this to your desired color */
}`

enter image description here

2
  • 1
    I admit I completely overlooked that you are trying to load CSS from local file. This is not allowed in web apps for security reasons.
    – TomazicM
    Commented Mar 1 at 21:15
  • Not a problem. First time really utilizing folium so I'm not aware of all the rules.
    – Binx
    Commented Mar 1 at 21:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.