Как переопределить 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='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors © <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, потому что заголовок должен читать тег стиля. Если у вас есть более чистый подход, пожалуйста, ответьте в комментариях.