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

Improve this question

2 Answers 2

Reset to default
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

Improve this answer
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. Commented Mar 1, 2024 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? Commented Mar 1, 2024 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 Commented Mar 1, 2024 at 21:19
1

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

Improve this answer
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. Commented Mar 1, 2024 at 21:15
  • Not a problem. First time really utilizing folium so I'm not aware of all the rules. Commented Mar 1, 2024 at 21:17

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.