CODEWITHSUNDEEP
pythonhtmlimagedataframefolium
Abdelrahman
Abdelrahman

Reputation: 75

adding multiple images to multiple html iframes in a folium map markers?

I have some data frames from which I extracted some lists, and then I made a for_loop in order to loop through these lists and insert the information needed into a folium map markers . here is the code:

sa_df = pd.DataFrame({
    "name":["Al_riyad","Makkah","Aseer","Al_madinah","Eastern_region","Northern_borders","Al_bahah","Najran","Jazan","Al_qaseeem","Hail","Al_jawf","Tabuk"],
    "latitude":[23.05,21.389082,19.15,24.9,24.0,30.25,20.16667,18.41667,17.33333,27.08333,27.4,30.05,28.25],
    "longitude":[45.55,39.857910,42.95,39.5,49.75,42.41667,41.43333,46.91667,42.66667,43.46667,41.45,39.6,37.16667],
    "images":["alriyad.png","makkah.png","aseer.png","madina.png","eastern_region.png","northern_borders.png","albahah.png","najran.png","jazan.png","alqaseem.png","hail.png","aljawf.png","tabuk.png"],
    "population":["8,216,284","8,557,766","2,211,875","1,423,935","4,900,325","365,231","476,172","582,243","1,567,547","1,423,935","699,774","508,475","910,030"],
    "dfs_deaths":[alriyad["deaths"].sum(), makkah["deaths"].sum(), aseer["deaths"].sum(), madina["deaths"].sum(), eastern_region["deaths"].sum(), northern_borders["deaths"].sum(), albahah["deaths"].sum(), najran["deaths"].sum(), jazan["deaths"].sum(), alqaseem["deaths"].sum(), hail["deaths"].sum(), aljawf["deaths"].sum(), tabuk["deaths"].sum()],     
    "dfs_recovories":[alriyad["recovories"].sum(), makkah["recovories"].sum(), aseer["recovories"].sum(), madina["recovories"].sum(), eastern_region["recovories"].sum(), northern_borders["recovories"].sum(), albahah["recovories"].sum(), najran["recovories"].sum(), jazan["recovories"].sum(), alqaseem["recovories"].sum(), hail["recovories"].sum(), aljawf["recovories"].sum(), tabuk["recovories"].sum()],
    "dfs_cases":[alriyad["cases"].sum(), makkah["cases"].sum(), aseer["cases"].sum(), madina["cases"].sum(), eastern_region["cases"].sum(), northern_borders["cases"].sum(), albahah["cases"].sum(), najran["cases"].sum(), jazan["cases"].sum(), alqaseem["cases"].sum(), hail["cases"].sum(), aljawf["cases"].sum(), tabuk["cases"].sum()]
})

lat = list(sa_df["latitude"])
lon = list(sa_df["longitude"])
name = list(sa_df["name"])
image = list(sa_df["images"])
population = list(sa_df["population"])
deaths = list(sa_df["dfs_deaths"])
recovories = list(sa_df["dfs_recovories"])
cases = list(sa_df["dfs_cases"])

m = folium.Map(location=[23.8859,45.0792], zoom_start=4)
fg = folium.FeatureGroup(name="My Map").add_to(m)

for lt,ln,nm,img,ppl,dths,reco,case in zip(lat, lon, name, image, population, deaths, recovories, cases):
    html = f'''
        <p>region: {nm}<p/>
        <p>population: {ppl}<p/>
        <p style="color:blue">total_cases: {case}<p/>
        <p style="color:green">total_recovories: {reco}<p/>
        <p style="color:red">total_deaths: {dths}<p/>
        <p>date: feb_2021</p>
        <img src="{img}">'''
    iframe = folium.IFrame(html, width=300, height=400)
    popup = folium.Popup(iframe , max_width=400)
    marker = folium.Marker([lt,ln], popup=(popup), tooltip="click for covid-19 info").add_to(m)
    m.add_child(marker)
m

as you can see I have some images in the same directory of the python file, and I used a f_string in order to insert the variables into the HTML and loop through them. when I run the code everything is fine. the markers show up with the info needed but the images don't show up here is what it looks like: image. I saw this: Adding JPG Images to folium popup but I don't understand exactly how it works, besides the f-string would involve any curly brackets in the HTML string. How can I solve this issue? in other words, is there a way to decode multiple images, loop through them, and insert them in a folium popup without intercepting the f-string, or if there is another method rather than the f-string? windows 10 python 3.9.1 beginner.

Upvotes: 1

Views: 2831

Answers (1)

Abdelrahman
Abdelrahman

Reputation: 75

after some research on the format method and the f-string method I figured out I just needed to make the following :

for lt,ln,nm,img,ppl,dths,reco,case in zip(lat, lon, name, image, population, deaths, recovories, cases):
    encoded = base64.b64encode(open(img, 'rb').read()).decode()
    html = f'''
        <p>region: {nm}<p/>
        <p>population: {ppl}<p/>
        <p style="color:blue">total_cases: {case}<p/>
        <p style="color:green">total_recovories: {reco}<p/>
        <p style="color:red">total_deaths: {dths}<p/>
        <p>date: feb_2021</p>
        <img src="data:image/jpeg;base64,{encoded}">'''
    iframe = folium.IFrame(html, width=300, height=300)
    popup = folium.Popup(iframe , max_width=400)
    marker = folium.Marker([lt,ln], popup=(popup), tooltip="click for covid-19 info").add_to(m)
    m.add_child(marker)

Upvotes: 2

Related Questions