Dash callback from filtered DataTable to mapbox

Dash Python
1

I’m new to Dash, so i wanted to play around with building an app to display Breweries in different cities. I was able to get the DataTable to function correctly (filters work the way they should) but the callback to the map isn’t updating when I filter the data in the table. Can anyone see where I went wrong?

Layout

layout_map = dict(
autosize=True,
height=600,
font=dict(color="#191A1A"),
titlefont=dict(color="#191A1A", size=‘14’),
margin=dict(
l=35,
r=35,
b=35,
t=45
),
hovermode=“closest”,
plot_bgcolor=’#fffcfc’,
paper_bgcolor=’#fffcfc’,
legend=dict(font=dict(size=10), orientation=‘h’),
title=‘Breweries’,
mapbox=dict(
accesstoken=mapbox_access_token,
style=“light”,
center=dict(
lon=-97.91251,
lat=37.7342
),
zoom=3,
)
)

Map function

def gen_map(MapDataFrame):
return {
“data”: [{
“type”: “scattermapbox”,
“lat”: list(MapDataFrame[‘Latitude’]),
“lon”: list(MapDataFrame[‘Longitude’]),
“hoverinfo”: “text”,
“hovertext”: [[“Company: {}
City: {}
State: {}”.format(i,j,k)]
for i,j,k in zip(MapDataFrame[‘Company’], MapDataFrame[‘City’],MapDataFrame[‘State’])],
“mode”: “markers”,
“name”: list(MapDataFrame[‘Company’]),
“color”: list(MapDataFrame[‘Group’]),
“marker”: {
“size”: 6,
“opacity”: 0.7
}
}],
“layout”: layout_map
}

Dash App

app.layout = html.Div(
html.Div([
html.Div(
[
html.H1(children=‘Brewery Data’,
className=‘nine columns’),
style={
‘height’: ‘16%’,
‘width’: ‘16%’,
‘float’: ‘right’,
‘position’: ‘relative’,
‘padding-top’: 12,
‘padding-right’: 0
},
),

        ], className="row"
    ),

Map + table

    html.Div(
        [
            html.Div(
                [
                    dcc.Graph(id='map-graph',
                    animate = True
                    )
                ],
                className = "six columns"
            ),
            html.Div(
                [
                    dt.DataTable(
                        data=MapNewBreweries.to_dict('records'),
                        columns=[{"name": i, "id": i, "deletable":True, 'selectable':True} for i in MapNewBreweries.columns],
                        editable=True,
                        filter_action="native",
                        sort_action="native",
                        sort_mode="multi",
                        row_selectable="multi",
                        row_deletable=True,
                        hidden_columns=['Latitude', 'Longitude'],
                        page_action="native",
                        page_current= 0,
                        page_size= 15,
                        id='datatable'),
                ],
                style= layout_table,
                className="six columns"
            ),

    ], className="row"
    )
])

)

Callback to update Map

@app.callback(
Output(‘map-graph’, ‘figure’),
[Input(‘datatable’, ‘derived_virtual_selected_rows’),
Input(‘datatable’, ‘data’)]
)

def map_selection(derived_virtual_selected_rows, rows):
aux = pd.DataFrame(rows)
temp_df = aux.ix[derived_virtual_selected_rows, :]
if len(derived_virtual_selected_rows) == 0:
return gen_map(aux)
return gen_map(temp_df)

Main

if name == “main”:
app.run_server(debug=True)