Search code examples
pythonhtmlpython-3.xfolium

How to pass a Dynamic String value from Python to html in a folium based Map?

I am trying to create a map with dynamic information for all map markers. For example Map with markers for restaurants in an area that displays Name, Pic & other information relevant to that restaurant.

Problem: How do I pass a dynamic string value from Python to HTML for each marker in a map.

I am able to link pictures with each marker correctly but not able to link text fields like Names etc. It doesn't matter if I put html inside or out of for loop it always gives me wrong static value.

P.S - I am new to programming 

# creating map layout, center point & view
m_sat = folium.Map(location=[28.595793, 77.414752], zoom_start=13, tiles='https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', attr='Created by')   # added Esri_WorldImagery  

html = '''<img ALIGN="Right" src="data:image/png;base64,{}">\
<h1>Name: </h1>{{ var_pass }}<br />\
<h2>Location: </h2>Noida<br />'''.format

# creating for loop below for dynamic content
for plot_numb in range(address.shape[0]):

    picture = base64.b64encode(open(str(plot_numb+1)+'.png','rb').read()).decode()
    iframe = IFrame(html(picture), width=300+200, height=300+20)
    popup = folium.Popup(iframe, max_width=650)
    icon = folium.Icon(color="white", icon="cloud", icon_color='black')
    tooltip = 'Click to view more about: '+address.iloc[plot_numb,0]
    var_pass = address.iloc[plot_numb,0] 
    marker = folium.Marker(location=address.iloc[plot_numb,1], 
    popup=popup, tooltip=tooltip, icon=icon).add_to(m_sat)

m_sat

I should be able to display Relevant name information for each marker on the map.
Attaching an end result picture of issues: enter image description here

Example of "address" DataFrame: 

        Name           Location
    0   Farzi Cafe     [28.562, 77.387]
    1   Skylounge      [28.562, 77.387]
    2   Tamasha Cafe   [28.562, 77.387]
    3   Starbucks      [28.565, 77.449]
    4   Pizza Hut      [28.620, 77.425]
Solution

  • Try this: 

    var_name = 'restaurant_name'
var_loc = 'restaurant_location'
# var_picture =  <base64 image data>
html = f'''<img ALIGN="Right" src="data:image/png;base64,{var_picture}">\
<h1>Name: </h1>{var_name}<br />\
<h2>Location: </h2>{var_loc}<br />\
'''
html  
## '<img ALIGN="Right" src="data:image/png;base64,{}"><h1>Name: </h1>restaurant_name<br /><h2>Location: </h2>restaurant_location<br />'

    Now, loop over your data frame for all the names and locations.