# Dash callback from filtered DataTable to mapbox

**URL:** <https://community.plotly.com/t/dash-callback-from-filtered-datatable-to-mapbox/30479>\
**Category:** Dash Python\
**Created:** [October 25, 2019, 5:46pm UTC](https://community.plotly.com/t/dash-callback-from-filtered-datatable-to-mapbox/30479 "2019-10-25T17:46:32Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![Junich](https://avatars.discourse-cdn.com/v4/letter/j/a88e57/32.png) [@Junich](https://community.plotly.com/u/Junich)\
**Post date:** [October 25, 2019, 5:46pm UTC](https://community.plotly.com/t/dash-callback-from-filtered-datatable-to-mapbox/30479/1 "2019-10-25T17:46:32Z")

</div>

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)