Trace Marker not updating with go.Scattermapbox

📊 Plotly Python
1

I am using go.Scattermapbox in a python script for rendering location of objects. The underlying data changes on user interaction with another component. When the user selects another entity, the hover info for the plot updates to the correct labels and the hover data is diplayed in the correct position as it should, the map snaps to the right center point, but the actual markers themselves aren’t in the correct spot. They hang on the previously selected entity.

try:
        fig.add_trace(
            go.Scattermapbox(
                name="Location 1",
                lat=gen_df.latitude.unique().tolist(),
                lon=gen_df.longitude.unique().tolist(),
                mode="markers",
                text=gen_df["name"].iloc[0],
                hoverinfo="text",
            )
        )
except:
        warnings.append("Location 1 has no coordinates")
try:
        fig.add_trace(
            go.Scattermapbox(
                name="Location 2",
                lat=gen_df.lat.unique().tolist(),
                lon=gen_df.lon.unique().tolist(),
                mode="markers",
                text=gen_df["_id"].iloc[0],
                hoverinfo="text",
            )
        )
except:
        warnings.append("Location 2 has no coordinates")
fig.update_layout(
        height=800,
        autosize=True,
        showlegend=True,
        mapbox=dict(
            accesstoken=MAPBOX_TOKEN,
            bearing=0,
            center=dict(
                lat=gen_df.latitude.unique().tolist()[0],
                lon=gen_df.longitude.unique().tolist()[0],
            ),
            zoom=11,
            pitch=0,
            style="dark",
        ),
    )
fig.show()
2

hi @gumberino
:wave: Welcome to the community.

Are you able to supply the whole code with the data so we can try to run the app locally on our computer?

3

@adamschroeder

Here’s a minimal example to reproduce the same issue.
The code renders a button and a dcc.Graph whose figure is a go.Figure with a trace of go.Scattermapbox.

The purpose is to generate markers (in random locations). The number of makers should match the number of clicks.

The issue is that the figure data gets updated in the callback, yet the new markers are not rendered.
Weirdly enough, you can still hover over them as shown in this screenshot:

image
image1920×622 32.5 KB

Tested using Dash 2.8.0 and 2.7.0

import pandas as pd
import plotly.graph_objects as go
import numpy as np
import dash
from dash import dcc, html, Input, Output, callback, State


def generate_map(N):
    fig = go.Figure()
    df = pd.DataFrame({"lat":np.random.random(N), "lon":np.random.random(N)})

    fig.add_trace(
        go.Scattermapbox(lat=df.lat, lon=df.lon, mode="markers", marker=dict(size=15, color="red"))
    )

    fig.layout.update(title={
        'xanchor': 'center',
        'yanchor': 'top'
    },
        showlegend=False,
        margin={
            "r": 0,
            "t": 0,
            "l": 0,
            "b": 0
        },
        mapbox=go.layout.Mapbox(
            uirevision="foo",
            style="carto-positron",
            zoom=3,
            center_lat= np.random.random(),
            center_lon= np.random.random(),
        ))

    return fig




app = dash.Dash(__name__)
app.layout = html.Div(
    children=[
        html.Button("Click me",id="btn",n_clicks=0),
              dcc.Graph(id="orders-map",
                        style=dict(height="100%",width="100%"))]
)



@callback(
    Output("orders-map","figure"),
    Input("btn","n_clicks"),
    State("orders-map","figure")
)
def update_map(n_clicks, old_figure):
    print(f"updated using {n_clicks}")
    if old_figure:
        print("Old data:", old_figure['data'])
    new_figure = generate_map(n_clicks)
    print("New data:", new_figure['data'])
    return new_figure


if __name__ == '__main__':
    app.run_server(debug=True, port=9090)
4

Thank you for the example and the explanation @yaseen .

I just opened a github issue.

5

@yaseen @adamschroeder

This is strange I tried running the above code on dash==2.6.1 and it was working fine, I upgraded the version and the map stopped updating.

1 Like
6

@atharvakatre I double-checked and I confirm that the example above works with dash==2.6.1 and dash==2.6.2
It does not work, however, with dash>=2.7.0.

1 Like