Как переопределить CSS и JS в реализации карт Folium?

Все, что я хочу, это переопределить CSS моей карты Folium. Когда я переопределяю стили в своем шаблоне, они не отражаются на моей карте Folium. Однако, когда я редактирую CSS в инструментах разработчика браузера, он работает. Я отредактировал CDN моей карты Folium (leaflet.css). Обратите внимание, что я не добавлял CDN leaflet в заголовок вручную; Folium автоматически включает его.

Views.py - Создание индивидуальной карты фолиума

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)

templates

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

"Я хочу переопределить CSS моей карты Folium.

".

Ответ - использовать 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, потому что заголовок должен читать тег стиля. Если у вас есть более чистый подход, пожалуйста, ответьте в комментариях.

Вернуться на верх