Updating folium changed the Popup box width

Question

Recently I updated folium from 0.5.0 to 0.11.0 and thereafter I am experiencing a problem with the popup box. With the update the popup box seem to have shrinked in width and the text is coming in separate lines, which happened to appear in the same line with the previous version of folium. No changes been made with the code.

How can I change the popup box look like the previous one, i.e., text does not break the line?

Popup box code:

fgc.add_child(folium.Marker(location=[lt, ln], popup= "<h4> <b>Thana :&nbsp" + di +"</h4></b>"+ "<br><b>Cases Total: &nbsp: </b>"+str(ca)+ " person "+ "<br>" + "<b>Cases 24 hours : </b>"+ str(da)+ " person "+"<br>"+"<b>Cases 7 days: </b>"+str(we)+ " person "+"<br><b>Neighbouhood affected :  </b>"+str(ne)

Answer 1

How I handled this was to create a IFrame to handle the dataframe variables and then just passed the that to the popup class, this should work for database or dataframe.

for (index, row) in df.iterrows():
if row.loc['BRANCH'] == 1:
    iframe = folium.IFrame('Account#:' + str(row.loc['ACCT']) + '<br>' + 'Name: ' + row.loc['NAME'] + '<br>' + 'Terr#: ' + str(row.loc['TERR']))
    popup = folium.Popup(iframe, min_width=300, max_width=300)
    folium.Marker(location=[row.loc['LAT'], row.loc['LON']], icon=folium.Icon(color=row.loc['COLOR'], icon='map-marker', prefix='fa'), popup=popup).add_to(map1)

Answer 2

Without reproducible code it is not possible to give you a tailored solution. As a general suggestion, you could use folium.Popup() with the combo of min_width and max_width parameters to force the width of a popup.

For example:

import folium

m = folium.Map(location=[43.775, 11.254],
               zoom_start=5)

html = '''1 aaaaaaaaaaaaaaaaaa aaaa aaa aa aaaaa aaa aaaa a a a a<br>2 aaaaaaaaaa aaa aaaaa aaaaa<br>3 aaaaa aaaaaa aaaaa aaa aaaaa<br>4 aaa aaa aaaaaaaa
'''

iframe = folium.IFrame(html)
popup = folium.Popup(iframe,
                     min_width=500,
                     max_width=500)


marker = folium.Marker([43.775, 11.254],
                       popup=popup).add_to(m)
m

and you get:

Answer 3

def color(elev):
    if elev == "STARTED":
        col = 'orange.png'
    elif elev=="COMPLETED":
        col = 'vehicle3_w30.png'
    elif elev =="DELIVERED":
        col = 'vehicle3_w30.png'
    else:
        col='grey.png'
    return col
icon_url = "grey.png"
icon = folium.features.CustomIcon(icon_url,
                                  icon_size=(12, 12))
for lat,lan,name,event_name,officer,update_at in zip(df['fSourceLatitude'],df['fSourceLongitude'],df['officer_name'],df['event_name'],df["user_name"],df["update_at"]):    
    bikeColor = color(event_name)
    biker = folium.features.CustomIcon(bikeColor, icon_size=(20,40))


    popContent = ("Updated At: " + str(update_at) + '<br>' +\
                                              "Officer ID : " + str(officer) + '<br>'+\
                                              "Status: {}".format(event_name))
    iframe = folium.IFrame(popContent)
    popup1 = folium.Popup(iframe,
                         min_width=500,
                         max_width=500)   
    
    folium.Marker(location=[lat,lan],popup = popup1,icon= biker).add_to(map5)
    

It worked for me, you need to initiate marker with custom icon in each iteration as shown in this code, It will work perfectly...

Answer 4

He is trying to fetch the data from database that's why it is breaking, If he did write the data using html tag then there will be no problem. But the main fact inside of html tag you have to use fetch data.