CODEWITHSUNDEEP
pythonpython-3.xleafletpopupfolium
Mehmud
Mehmud

Reputation: 189

Updating folium changed the Popup box width

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.

Before image

Current Image

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)

Upvotes: 6

Views: 13471

Answers (4)

kiran beethoju
kiran beethoju

Reputation: 158

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...

Upvotes: 0

JJordan
JJordan

Reputation: 125

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)

enter image description here

Upvotes: 10

Sohanur Rahman Shanto 16209570
Sohanur Rahman Shanto 16209570

Reputation: 67

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.

Upvotes: -1

sentence
sentence

Reputation: 8903

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:

enter image description here

Upvotes: 5

Related Questions