Change popup figure by click on map with poligon geojson data

Question

I create a dashboard to show map that are saved in director that I want to show when click in polygon. I've done it however I didn't achieve to change map by attribute id, in order to appear which is the file with value that correspond to polygon id and the appear in popup.

How to add callback and figure change according to id attribute of data table before click map.

The completed code of project: https://drive.google.com/file/d/1bePG2tz4yFh3XBB1s-nm7zEhK_9x160F/view?usp=sharing

The code that that is created the map and popup in it is:

#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

The server of the project is in index.py.

Change popup figure by click on map with poligon geojson data

0 Answers0