FloatImage in Dash Leaflet
So I have been working with folium and dash-leaflet for a little bit and I have been seeing some differences in how you create maps between the two packages. One of the things that I have found in folium that is nice is an object called a FloatImage where you can have an image "float" on the screen so that it stays the same size in the same place whenever you pan or zoom in on the map. I would like to have something similar in dash-leaflet, however, I have not found anything with an example for this. I had looked at the documentation where there are many different examples with dash-leaflet, but none of them include a FloatImage like object. Does anyone know how to do this?
There is no direct equivalent of the FloatImage construct from Folium in dash-leaflet. However, you can achieve an image floating on top of the map with a few standard html elements. Here is a small example,
from dash import Dash, html
import dash_leaflet as dl
image_url = "https://www.researchgate.net/profile/Tao-Chen-87/publication/3935609/figure/fig1/AS:394647298953219@1471102656485/8-bit-256-x-256-Grayscale-Lena-Image.png"
app = Dash()
app.layout = html.Div([
dl.Map(dl.TileLayer(), style={'width': '100%', 'height': '100%'}),
html.Img(src=image_url, style={'position': 'absolute', 'top': 20, 'right': 20, 'zIndex': 1000})
], style={'width': '1000px', 'height': '500px', 'position': 'relative'})
if __name__ == '__main__':
app.run_server()
