I am slicing a pandas dataframe based on user input. While the callback runs and I see that the dataframe is updated, the changes aren’t reflected on the map. I am passing a pandas series at lat and lon and the map should be updated with the DataFrame. Below is simplified version of my code:
import dash_bootstrap_components as dbc
import dash
from dash import dcc
import pandas as pd
import plotly.express as px
df = px.data.carshare()
layout = html.Div([
dcc.Graph(id="map"),
dbc.Input(id='input'),
dbc.Button("Apply", id="show", className="mr-1", n_clicks=0)
])
# Update map graph
@app.callback(Output("map", "figure"),
[
Input("Input", "value"),
Input("show", "n_clicks")
],
)
def update_map(input, btn_nclick):
# check for triggered inputs / states
ctx = dash.callback_context
data = []
if input:
df = df[df['peak_hour'] == 11]
data.append({
"type": "scattermapbox",
"lat": df['centroid_lat'],
"lon": df['centroid_lon'],
"mode": "markers",
"marker": {
"symbol": "circle",
"size": 9,
"opacity": 0.8,
}
}
)
layout = {
"autosize": True,
"datarevision": 0,
"hovermode": "closest",
"mapbox": {
"accesstoken": MAPBOX_KEY,
"bearing": 0,
"center": {
"lat": coords[0],
"lon": coords[1]
},
"pitch": 0,
"opacity": 0.2,
"zoom": zoom,
"style": "streets",
},
"margin": {
"r": 0,
"t": 0,
"l": 0,
"b": 0,
"pad": 0
}
}
return ({"data": data, "layout": layout})
Trying to wrap my head around why the map not being updated with change in pandas DataFrame?