如何在 Folium 地图实现中覆盖 CSS 和 JS？

Question

我想要的只是覆盖我的 Folium 地图的 CSS。当我覆盖模板中的样式时，它们不会反映在我的 Folium 地图上。但是，当我在浏览器的开发人员工具中编辑 CSS 时，它可以工作。我编辑了 Folium 地图 (leaflet.css) 的 CDN。请注意，我没有手动将传单 CDN 添加到我的标头中； Ffolium 自动包含它。

Views.py - 创建定制的 Folium 地图

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

在 Django 模板中渲染地图

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)

模板

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

“我想覆盖我的 Folium 地图的 CSS。

Answer 1

答案是使用add_custom_css_to_folium_map(folium_map)。

folium_map 变量存储 CSS：

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

您可以使用函数add_custom_css_to_folium_map(folium_map)。

就我而言，我使用一个函数来使其可重用：

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))

我使用 .txt 扩展名，因为标头需要读取样式标签。如果您有更干净的方法，请在评论中回答。