Can I add an image as part of a tooltip?

🎈 Using Streamlit
1

Hello, I would like to add an image to a pydeck scatter plot map.

My structure:
display.py
pictures
Picture1.jpg
Picture2.jpg
etc.
data
datafile1.csv

I read the data in datafile1, which includes the filename in the pictures folder, gps coordinates, etc…
What I have tried so far, the map renders fine, but the tooltips don’t work

    pathvar = os.path.join("pictures","GOPR1016.JPG")
    imgstr = '<img src=\"'+pathvar+'\">'
    view_state = pdk.ViewState(latitude=midpoint[0], longitude=midpoint[1], zoom=3, bearing=0, pitch=0)

    r = pdk.Deck(layers=[layer], initial_view_state=view_state, tooltip={"html": imgstr})
    st.pydeck_chart(r)

I tried to basically just add regular html to my code and see if I can show just 1 picture.

    components.html(imgstr)

Which doesn’t work.

I then use the streamlit image method, which does work:

    st.image(pathvar)

The html method gives me a broken url icon, but the st image works. However, when I inspect it, I see that streamlit has generated its own url: http://my.ip.add.ress:8501/media/9dc047a1bf0aacd9c7d7f0beaf566688f725d4a2b6cf5020ec9e7487.jpeg

It seems that when running the server, a new file structure is put in place rather than the internal structure… is this the source of my problems? Is what I want(images in tooltips) possible?

1 Like
2

@dorealex I achieved a result which I think is what you are after using folium. Code snippet below:

for i in range(0,len(df)):
    # Generate thumbnail
    _, img_array = get_image(df['S3_url'].iloc[i])
    array_to_jpg(img_array) # saves tmp.jpg

    # Get base64 encoded image bytes
    encoded = base64.b64encode(open('tmp.jpg', 'rb').read()).decode('UTF-8')
    svg = f"""<object data="data:image/jpg;base64,{encoded}" width="{width}" height="{height} type="image/svg+xml"></object>"""

    html = pd.DataFrame(df.iloc[i]).to_html(justify="left", escape=False,) # [["time", "latitude", "longitude", "data_url"]]

    iframe = IFrame(html+svg, width=width*fat_wh, height=height*fat_wh)
    popup  = folium.Popup(iframe, parse_html = True, max_width=2000)

    folium.Marker([df['latitude'].iloc[i], df['longitude'].iloc[i]], popup=popup).add_to(m)

html_file = 'my_output.html'
m.save(html_file)

Plotly also allows images in tooltips:

https://dash.plotly.com/dash-core-components/tooltip

1 Like
3

Hello robmarcole…your code is just a snippet. I tried but it was giving errors. I wanted to display an image in pycdeck chart or folium maps offline whenever any image is uploaded. Is it possible?