Home How to customise Folium html popups in a for loop in python using .format()?

Questions

How to customise Folium html popups in a for loop in python using .format()?

March 2, 2023

I am trying to change the standard popups provided with Folium and make these work with a for loop. I am using Django.

I succeeded on change the html, following a few tutorials.

However I am struggling to understand how to call the variables in the html.

Quite simply I have a map with a list of locations. If the user click on the locations the popup appear and would display logo, name and a few other things specific to the location.

what I tried
I tried different iteration including adding {{venue.name}} but clearly this doesnt work if I am not in the template.py.

The current one """.format(venue.name)+""" is an example I found on a tutorial. However I must be missing something as this is not working for me. (https://towardsdatascience.com/use-html-in-folium-maps-a-comprehensive-guide-for-data-scientists-3af10baf9190)

my question
I suppose my question would be to know how I can call a variable in the for loop of my views.py where I am also trying to render the HTML from. In my particular case, how can I call {{venue.name}} in a format views.py is going to understand

(I haven’t added the files, as I didn’t think it is necessary for this problem. I am obviously happy to provide the models or template if needed)

The code

views.py

def index(request):
    venue_markers = Venue.objects.all()
    m = folium.Map(location=center_location,zoom_start=center_zoom_start,tiles=tiles_style)
    
    for venue in venue_markers:
        
        html="""
        <!DOCTYPE html>
        <html>
        """.format(venue.name)+""" #<-- this is where I am stuck, as I cannot seem to call the variable within the for loop.
        
        </html>
        """

        iframe = branca.element.IFrame(html=html, width=150, height=75)
        popup=folium.Popup(iframe, max_width=2650)

        coordinates =(venue.latitude, venue.longitude)
        folium.Marker(coordinates,popup=popup,icon=folium.Icon(color='black',icon='utensils',prefix='fa',fill_opacity=1)).add_to(m)

    context = {'venue_markers':venue_markers,'map':m._repr_html_}
    
    return render(request,'main/index.html',context)

>Solution :

In order to use venue.name in the HTML string, you can use str.format() to insert the venue.name variable into the popup content, like so:

def index(request):
    venue_markers = Venue.objects.all()
    m = folium.Map(location=center_location,zoom_start=center_zoom_start,tiles=tiles_style)
    
    for venue in venue_markers:
        
        html = """
        <!DOCTYPE html>
        <html>
            <body>
            <h1>{}</h1>
            </body>
        </html>
        """.format(venue.name)

        iframe = branca.element.IFrame(html=html, width=150, height=75)
        popup=folium.Popup(iframe, max_width=2650)

        coordinates =(venue.latitude, venue.longitude)
        folium.Marker(coordinates,popup=popup,icon=folium.Icon(color='black',icon='utensils',prefix='fa',fill_opacity=1)).add_to(m)

    context = {'venue_markers':venue_markers,'map':m._repr_html_}
    
    return render(request,'main/index.html',context)