OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to Override CSS and JS in Folium Map Implementation?

  • Thread starter Thread starter Kenjuring
  • Start date Start date
K

Kenjuring

Guest
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

Code:
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

Code:
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

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

"I want to override the CSS of my Folium map.
<p>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.</p>
<p>Views.py - Creating a Customized Folium Map</p>
<pre><code>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
</code></pre>
<p>Rendering the Map in Django Template</p>
<pre><code>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)

</code></pre>
<p>templates</p>
<pre><code><div class="map-container">{{ folium_map|safe }} </div>
</code></pre>
<p>"I want to override the CSS of my Folium map.</p>
 

Latest posts

I
Replies
0
Views
1
impact christian
I
Top