Mapbox figure doesnt update properly

Dash Python
1

Hey,

so i have a callback in which i change the figure of a dcc.graph which is a map. The First Callback fired works properly. The second one fires but it wont show the updated figure, unless i resize the window. And if i dont refresh the window but fire another callback, it shows me the updated figure of the last callback.

Whats happening here?

2 Likes
2

Update:
It seems that the dcc.Loading Component has a buggy interaction with a dcc.Graph inside its children property. This was a well known issue in earlier versions as i remember. I will try an older version for now.

3

The problem persist in Dash version 2.7.0, when I update via callback a DCC Graph object that contains a px.scatter_mapbox it doesn’t update well. Have you found some solution to the problem? Thanks in advance.

4

Hello @andres.velasco,

Welcome to the community!

I’m sorry that you’re having an issue seeing updates immediately. If possible, could you please provide an MRE: How to write a Minimal Reproducible Example (MRE)

This will help up be able to help out a little bit more.

1 Like
5

Thanks for answering so fast. With the next code, you’ll see that the initial state of the map doesn’t change when select the option from the Dropdown list. Try to select one and remove selection, please. Thanks in advance.

import dash
from dash import dcc
from dash import html
from dash.dependencies import Input, Output

import pandas as pd
import plotly.express as px


stations_list = {
    "codigo": {"0": "0", "1": "1", "2": "2", "3": "3", "4": "4"},
    "nombre": {"0": "A", "1": "B", "2": "C", "3": "D", "4": "E"},
    "latitud": {"0": 1.86666667, "1": 1.96147222, "2": 1.93158333, "3": 2.02083333, "4": 1.85},
    "longitud": {"0": -76.01666667, "1": -76.08569444, "2": -76.21491667, "3": -76.17213889, "4": -76.3},
}

total_stations = pd.DataFrame(stations_list)


def draw_map(stations=None):
    if stations is None:
        initial = pd.DataFrame.from_dict({0: {'lat': 2, 'lon': -76.2}}, orient='index')
        fig = px.scatter_mapbox(initial, lat='lat', lon='lon', zoom=10)

    else:
        fig = px.scatter_mapbox(stations, lat="latitud", lon="longitud", hover_name="nombre",
                                hover_data=["codigo", "nombre"], zoom=10)

    fig.update_layout(mapbox_style="open-street-map", margin={"r": 0, "t": 0, "l": 0, "b": 0})

    return fig


app = dash.Dash()

app.layout = html.Div(
    [
        html.H6('Tipo de consulta'),
        dcc.Dropdown(
            [
                {'value': 'valid', 'label': 'Validados'},
                {'value': 'raw', 'label': 'Crudos'},
                {'value': 'long_term', 'label': 'Largo plazo'},
            ], searchable=False, id='ddb_querytype'
        ),
        dcc.Graph(figure=draw_map(), id='map_stations'),

    ]
)


@app.callback(
    Output('map_stations', 'figure'),
    Input('ddb_querytype', 'value')
)
def set_resolution(query_type):

    if query_type is not None:
        map_stations = draw_map(total_stations)

        return map_stations

    else:
        map_stations = draw_map()
        return map_stations


if __name__ == '__main__':
    app.run_server(debug=True)
6

Hmm, I just tried it on 2.6.2 and 2.7, displaying the points and removing them is smooth…

What version of python are you using?