Hello!
I am creating a Dash app that includes a map made using the following code:
def map(df):
fig = px.scatter_mapbox(df, lat="Latitude", lon="Longitude", size="Log(TotalRevenue)",
color = "Log(TotalRevenue)", color_continuous_scale=px.colors.sequential.YlOrRd,
zoom=2, size_max=10, hover_name='Location', animation_frame='Year',
category_orders={'Year':[2010, 2011, 2012, 2013, 2014, 2015, 2016]})
fig.update_layout(margin=dict(l=15, r=15, t=10, b=10),
autosize=True)
return fig
@app.callback(
Output('map-container', "children"),
[Input('datatable-interactivity', "derived_virtual_data"),
Input('datatable-interactivity', "derived_virtual_selected_rows")])
def update_graphs(rows, derived_virtual_selected_rows):
if derived_virtual_selected_rows is None:
derived_virtual_selected_rows = []
dff = merged_df if rows is None else pd.DataFrame(rows)
grouped = dff.groupby(['ZipCode', 'OrderDate', 'Latitude', 'Longitude', 'Location', 'City', 'State', 'Year'])['TotalAmount'].sum().reset_index()
grouped = grouped[grouped['TotalAmount'] > 0]
grouped['Log(TotalRevenue)'] = np.log(grouped['TotalAmount'])
return [
dcc.Graph(
figure=map(grouped),
style={'width':'55vw', 'height':'inherit'}
)
]
dbc.Col(dbc.Card([
dbc.CardHeader("Geographic distribution of sales territories",
style={'backgroundColor':'#F3AE4E', 'color':'white', 'fontWeight':'bold'}),
dbc.CardBody(
id='map-container'
),
], className='h-100', color="light", outline=True), width=7)
The strange thing is that on start-up of the app, the map almost always shows up in a smaller size.
When I click on the animation button, the map then pops into the right size.
This app single-page, but with multiple tabs. Curiously, if the tab that contains this map is the first one to be loaded, the map renders in the correct size.
This is not a serious problem, but a strange one. Is there a way to correct this?
I have posted as an issue on the Plotly Express Github repo, but no luck.
Thank you very much!