How to refresh html map with dropdown menu in dash app?

Question

I am new to python Dash. I am trying to create a dashboard with a dropdown menu and a map. By the selecting a value in the dropdown menu, the map will be updated with a new html map. Here is the code:

dropdown_list = [{'label': 'MSFT', 'value': 'MSFT'}, 
             {'label': 'IBM', 'value': 'IBM'}]


app.layout = html.Div(
    children=[
        html.Div(className='row',
                 children=[
                    html.Div(className='three columns div-user-controls',
                             children=[
                                 html.Div(
                                     children=[
                                         dcc.Dropdown(id='selector', options=dropdown_list,
                                                      multi=False, value=dropdown_list[0]['value'],
                                                      style={'backgroundColor': '#1E1E1E'}
                                                      ),
                                     ],
                                     style={'color': '#1E1E1E'})
                                ]
                             ),
                    html.Div(className='nine columns div-for-charts bg-grey',
                             children=[
                                 html.Iframe(id='map', style={'border': 'none'}, width='100%', height='750')
                            ])
        ])
])
                    
## Callback for timeseries price
@app.callback(Output('map', 'srcDoc'),
              [Input('selector', 'value')])
def update_map(dropdown_values):
    for vv in dropdown_values:
        if vv == 'MSFT':
            return open(html_file1, 'r').read()
        elif vv == 'IBM':
            return open(html_file2, 'r').read()
        else:
            return dash.no_update

The map, however, does not show up and is not updated. Can anyone give me some hints on this? Thank you in advance.

Answer 1

I have found the issue. In the dropdown menu, since multi=False, there will be only one value in the input of the callback function: dropdown_values. So there is no need to loop through a list and match the value. Below is the corrected callback function

@app.callback(Output('map', 'srcDoc'),
              [Input('selector', 'value')])
def update_map(dropdown_values):
        if dropdown_values == 'MSFT':
            return open(html_file1, 'r').read()
        elif dropdown_values == 'IBM':
            return open(html_file2, 'r').read()
        else:
            return dash.no_update