上下文:
我有一个Dash应用程序,里面有一个下拉列表和一张地图。
地图显示3个ID为"01"、"02"one_answers"03"的标记。我可以点击一个标记并通过回调返回其ID。
下拉列表使我能够根据其ID选择标记。
我想做的是用地图上的选定标记更新下拉列表中的选定值。
示例:我想选择"02"。我可以在下拉列表中选择"02",也可以点击地图上的"02"。但如果我从地图中选择它,我希望从下拉列表中选择的值更新为'02'。
如何从回调返回的值更新Dropdown选择的值?
这里有一个代表:
# -*- coding: utf-8 -*-
import dash.dependencies
import dash_bootstrap_components as dbc
import pandas as pd
import dash_leaflet as dl
from dash import dcc, html, Input, Output
########################################################################################################################
# VARIABLES
df_sites = pd.DataFrame([['01', (48.805, 2.326)], ['02', (43.167, 0.969)], ['03', (48.812, 2.530)]],
columns=['id_tech', 'coordonnees'])
circlemarkers = [dl.CircleMarker(
dl.Tooltip(df_sites.iloc[i]['id_tech']),
center=pos,
radius=2,
id=df_sites.iloc[i]['id_tech'])
for i, pos in enumerate(df_sites['coordonnees'])]
########################################################################################################################
# APP
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = html.Div([
dbc.Col([
dbc.Row([
# Following dropdown selected value should be updated when clicking on the map
dcc.Dropdown(df_sites['id_tech'].tolist(), df_sites['id_tech'].tolist()[0],id="in_choix_site"),
html.Br(),
dl.Map([dl.TileLayer(),
dl.GestureHandling(),
dl.LayerGroup(id="container", children=circlemarkers)
],
center=[47.285549, 2.300576],
zoom=4,
style={'height': '200px', 'width':'90%', 'margin':'10px'}),
"Selected from dropdown",
html.Div(id='from_dropdown'),
html.Br(),
"Selected from map",
html.Div(id='from_map')
])
], md=4)
])
@app.callback(Output("from_dropdown", "children"),
Input("in_choix_site", "value"))
def selected_site(dropdown_value):
return(dropdown_value)
@app.callback(Output("from_map", "children"),
[Input(marker.id, "n_clicks") for marker in circlemarkers])
def marker_click(*args):
marker_id = dash.callback_context.triggered[0]["prop_id"].split(".")[0]
return marker_id
if __name__ == '__main__':
app.run_server(debug=True)
多亏了一位同事,我得到了答案!
这其实很明显,但由于我是Dash的新手,所以我没有马上弄清楚。我只需要添加我的Dropdown作为回调的输出。我把这个答案留在这里,以防其他人也有同样的问题。
@app.callback([Output("from_map", "children"),
Output("in_choix_site", "value")],
[Input(marker.id, "n_clicks") for marker in circlemarkers])
def update_dropdown(*args):
marker_id = dash.callback_context.triggered[0]["prop_id"].split(".")[0]
return marker_id, marker_id