I am having a problem in updating a map graph based on 3 dropdowns.
I have 3 dropdowns: one for country, one for district and one for category.
When I select 1 dropdown at a time I can see the results on the map.
But what I really want is to zoom in. So when I select country then district, I want to see the results in that particular district only.
Now, if I select a country from the dropdown and then select a category from the other dropdown, I see on the map the results of the whole country. It does not narrow down the search to just the category selected.
dbc.Col([
html.Label("Select Country: ", style={'font-family': 'arial', 'font-weight': 'bold', 'font-size': 15, 'color': 'white'}),
dcc.Dropdown(className='scrollable-element div-for-dropdown Select-control VirtualizedSelectOption',
id='country_dropdown',
options=[{'label': str(c), 'value': c} for c in sorted(df['Country'].unique())],
multi=True,
placeholder="Select",
value=['United Kingdom'],
clearable=True,
style={'width': '100%', 'font-family': 'arial', 'font-weight': 'bold', 'font-size': 13, 'color': 'black', 'background-color': '#31302F', 'border': '0px solid black'}
),
html.Br(),
html.Label("Select District: ", style={'font-family': 'arial', 'font-weight': 'bold', 'font-size': 15, 'color': 'white'}),
dcc.Dropdown(className='scrollable-element div-for-dropdown Select-control VirtualizedSelectOption',
id='district_dropdown',
multi=True,
value=[],
clearable=True,
options=[{'label': str(d), 'value': d} for d in sorted(df['MainLocation'].unique())],
placeholder="Select",
style={'width': '100%', 'font-family': 'arial', 'font-weight': 'bold', 'font-size': 13, 'color': 'black', 'background-color': '#31302F', 'border': '0px solid black'}
),
html.Br(),
html.Label("Select Category: ", style={'font-family': 'arial', 'font-weight': 'bold', 'font-size': 15, 'color': 'white'}),
dcc.Dropdown(className='div-for-dropdown Select-control VirtualizedSelectOption',
id='category_dropdown',
multi=True,
value=[],
clearable=True,
options=[{'label': '(Select All)', 'value': 'all'}] + [{'label': str(cat), 'value': cat} for cat in sorted(df['Category'].unique())],
placeholder="Select",
style={'width': '100%', 'font-family': 'arial', 'font-weight': 'bold', 'font-size': 13, 'color': 'black', 'background-color': '#31302F', 'border': '0px solid black'}
)
`@app.callback(Output('map_graph', 'figure'),
[Input('country_dropdown', 'value'),
Input('category_dropdown', 'value'),
Input('district_dropdown', 'value')])
def update_map_graph(chosen_country, chosen_category, chosen_district):
df_sub = df[(df['Country'].isin(chosen_country)) |
(df['Category'].isin(chosen_category)) |
(df['MainLocation'].isin(chosen_district))]
# Create figure
locations = [go.Scattermapbox(
lon=df_sub['Long'],
lat=df_sub['Lat'],
mode='markers',
marker={'color': df_sub['Color'], 'size': 13, 'opacity': 0.5},
unselected={'marker': {'opacity': 1}},
selected={'marker': {'opacity': 0.5, 'size': 18}},
hoverinfo='text',
hovertext=df_sub['Hover']
)]
# Return figure
return {
'data': locations,
'layout': go.Layout(
autosize=True,
margin=dict(l=0,
r=0,
t=0,
b=0),
uirevision='foo',
clickmode='event+select',
hovermode='closest',
hoverdistance=2,
mapbox=dict(
accesstoken=mapbox_access_token,
bearing=0,
style='mapbox://styles/mapbox/navigation-night-v1',
center=dict(
lat=50.1109,
lon=8.6821
),
pitch=0,
zoom=5
),
)
}