I have one map that I need put popup that show a image (a map file saved in director) after a click in polygon from geojson.
I’ve achieve to put popup with map into it, however it not change when clicked in another one polygon.
Here is the example of popup with picture into it.
The complete code of project can be downloaded from: dash-estudo.zip - Google Drive
To reproduce the code and run server of dashboard is in index.py.
The code of map be in map_.py component. Above the code:
#Using base64 encoding and decoding
def b64_image(image_filename):
with open(image_filename, 'rb') as f:
image = f.read()
return 'data:image/png;base64,' + base64.b64encode(image).decode('utf-8')
map_ = dl.Map(
[dl.TileLayer(),
dl.GeoJSON(id="geojson-mapa")],
preferCanvas=True,
maxBounds=[[-8.5272, -46.6294], [-18.3484, -37.3338]],
id="leaflet-map",
style={"height": "92vh"}
)
img_path = src="/home/diogo.sousa/workspace/dash-estudo/dash_estudo/dataset/map_id_antes_depois/59983.png"
fig1 = html.Img(src=b64_image(img_path), style={"width": "500px", "height": "350px"}, id="map-fig")
map_ = dbc.Row([
map_
])
# Callback mapa
@callback(
Output("geojson-mapa", "children"),
Input("monitoramento-dissolve", "data"),
)
def update_output_mapa(gdf):
"""
Função para atualização dos dados do mapa.
"""
# print(json.loads(gdf)["features"])
map_geojson = dl.GeoJSON(
data=json.loads(gdf),
zoomToBounds=True,
zoomToBoundsOnClick=True,
options={"style":{"color":"red"}},
children=[dl.Popup(fig1, maxWidth = 500, minWidth=350)],
)
return map_geojson
Here is the path of stackoverflow that I post there: leaflet - Change popup figure by click on map with poligon geojson data - Stack Overflow