CODEWITHSUNDEEP
pythonfolium
Paiame Bagheri
Paiame Bagheri

Reputation: 11

Folium - add larger pop ups with data from XML file

I would like to create a table-like pop-up for my folium map but don't know how to do it (I'm a novice). My data comes from an XML file that contains the gps coordinates, name, sales, etc. of stores.

Right now I can display the name of the stores in the pop-up, but I would also like to display the sales and other information below the name. I reckon I should maybe use GeoJson but I don't know how to implement it in the code I already have (which contains clusterization) :

xml_data = 'Data Stores.xml'    
tree = ElementTree.parse(xml_data)
counter = tree.find('counter')
name = counter.find('Name')
counter.find('Latitude').text
name = []
latitude = []
longitude = []

for c in tree.findall('counter'):
    name.append(c.find('Name').text)
    latitude.append(c.find('Latitude').text)
    longitude.append(c.find('Longitude').text)

df_counters = pd.DataFrame(
    {'Name' : name,
     'Latitude' : latitude,
     'Longitude' : longitude,
    })
df_counters.head()
locations = df_counters[['Latitude', 'Longitude']]
locationlist = locations.values.tolist()
map3 = folium.Map(location=[31.1893,121.2781], tiles='CartoDB positron', zoom_start=6)
marker_cluster = folium.plugins.MarkerCluster().add_to(map3)
for point in range(0, len(locationlist)):
    popup=folium.Popup(df_counters['Name'][point], max_width=300,min_width=300)
    folium.Marker(locationlist[point], 
                  popup=popup,
                  icon=folium.Icon(color='blue', icon_color='white', 
                  icon='fa-shopping-bag', angle=0, prefix='fa')
                  ).add_to(marker_cluster)
map3.save("WorldMap.html")`

Right now I have 4 other columns in my XML file besides 'Name' that have the information that I want to appear in the popup as well, kinda like this : example popup

Thank you for your help

Edit :

I did some digging and changed my code a little bit by adding the folium.features.GeoJsonPopup instead of the simple folium.Popup that I had before :

for point in range(0, len(locationlist)):
    popup=folium.features.GeoJsonPopup(
        fields=[['Name'],['Opening']],
        aliases=['Name','Opening'])
    folium.Marker(locationlist[point], 
                  popup=popup,
                  icon=folium.Icon(color='blue', icon_color='white', 
                  icon='fa-shopping-bag', angle=0, prefix='fa')
                  ).add_to(marker_cluster)

I added the 'Opening' data, however I don't know how to transfer it into the pop up along with the 'Name' since it comes from a panda DataFrame. Right now my popups are empty.

Upvotes: 1

Views: 914

Answers (1)

flipSTAR
flipSTAR

Reputation: 613

I have done something similar, steps were:

  1. create an IFrame with the content you want to display (coded in HTML)
  2. use this IFrame in a popup
  3. connect this popup with your marker
htmlstr = ... #  Here you can add your table, use HTML

# 1. iframe
iframe = folium.IFrame(htmlstr,  # places your content in the iframe
                       width=200,
                       height=200  # adjust size to your needs
                       )

# 2. popup
fpop = folium.Popup(iframe)

# 3. marker
mrk = folium.Marker(location=latlng,
                    popup=fpop,
                    )
mrk.add_to( ... )

Upvotes: 1

Related Questions