Map does not initially render in correct size

[nchelaru]

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

The map is embeded in the Dash app like so:

dcc.Graph(
            figure=map(df),
            style={'width':'55vw', 'height':'inherit'}
        )

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.

Is there a way to correct this?

Thank you very much!

[DrGFreeman]

Hi @nchelaru, I have observed the same with other plotly_express chart types use in Dash. I don't have an explanation for it but what worked best for me was to have the Output of the callback be a html.Div's children element and return the whole dcc.Graph object rather than just the figure.

Hope this can help.

[nchelaru]

@DrGFreeman Thank you so much for your reply, and apologies for my late reply!

I think that my callback does return the entire dcc.Graph object, though not of a html.Div.

@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)

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.