How to Override CSS and JS in Folium Map Implementation?

Question

All I want is to override the CSS of my Folium map. When I override the styles in my template, they do not reflect on my Folium map. However, when I edit the CSS in the browser's developer tools, it works. I edited the CDN of my Folium map (leaflet.css). Note that I did not manually add the leaflet CDN to my header; Folium automatically includes it.

Views.py - Creating a Customized Folium Map

from django.views import View
import folium

def create_map():
    f = folium.Figure(width='100%', height='100%')

    m = folium.Map(
        location=[14.0000, 122.0000],
        tiles='https://{s}.basemaps.cartocdn.com/rastertiles/voyager_nolabels/{z}/{x}/{y}{r}.png',
        attr='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>',
        zoom_start=6,
        zoom_control=False,
        scrollWheelZoom=True,
        doubleClickZoom=False,
    )
    f.add_child(m)
    return m

Rendering the Map in Django Template

class RegionalMalnutritionView(View):
    template_name = "gis_app/malnutrition_view/regional_pages.html"

    def get(self, request, *args, **kwargs):
        context = {}

        # Assuming 'coodinate_locations' is your GeoJSON data source
        serializer = RegionalLevelGeoJSONSerializer(coodinate_locations, many=True)
        geo_data = {
            'type': 'FeatureCollection',
            'features': serializer.data
        }

        folium_map = create_map()

        for feature in geo_data['features']:
            html_popup = generate_html_popup_malnutrition(feature)
            folium.GeoJson(
                geo_data,
                highlight_function=highlight_function, 
                style_function=style_function,
                popup=folium.Popup(html=html_popup, max_width=500),
                tooltip=folium.features.GeoJsonTooltip(
                    fields=['name'], 
                    aliases=['Region Name: '],
                    labels=True,
                    localize=True,
                    sticky=False,
                    style="""
                        background-color: #F0EFEF;
                        border-radius: 3px;
                        box-shadow: 3px;
                        padding: 20px;
                    """
                ),
                name='Regional Levels',
            ).add_to(folium_map)

        context['folium_map'] = folium_map._repr_html_()

        return render(request, self.template_name, context)

templates

<div class="map-container">{{ folium_map|safe }} </div>

"I want to override the CSS of my Folium map.

Kenjuring · Accepted Answer · 2024-06-26 23:24:24Z

0

The answer is to use add_custom_css_to_folium_map(folium_map).

The folium_map variable stores the CSS:

folium_map = "<style> put your CSS here </style>"

You can use the function add_custom_css_to_folium_map(folium_map).

In my case, I use a function to make it reusable:

def add_custom_css_to_folium_map(folium_map):
    css_file_path = os.path.join(settings.STATIC_ROOT, 'leaflet', 
'leaflet_override.txt')

# Load the CSS file content
    with open(css_file_path, 'r') as css_file:
    css_content = css_file.read()

    folium_map.get_root().header.add_child(folium.Element(css_content))

I use a .txt extension because the header needs to read a style tag. If you have a cleaner approach, please answer in the comments.

answered Jun 26, 2024 at 23:24

Kenjuring

234 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to Override CSS and JS in Folium Map Implementation?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related