Px.scatter_mapbox not updating

Dear fellow users, hi I am new here.

I have a database containing a series of ground stations. Two columns are in this database are:

df['From]  # first date for that ground station
df['To'] # last date for that station

I have created a slider (range selector) to pick my start and end date, and would like to have the corresponding stations appearing (or disappearing) on the map, that should update in real time.

However, it does not update. I am also printing a map title, where number of “active” stations (for that time range) change according to user-selected time window.

When moving the slider, I can observe :

  • no markers appearing or disappearing(they remain the same number);
  • The number of active stations changing in the title, depending on the user-selected time-window;
  • the map flicking, as I suppose it is centering to the new (filtered) dataset
  • the map disappearing when the number of stations equals zero.
  • if, in my python code, I add fig.show() a new tab is opened and the map with the filtered stations is shown. However, my goal is having an “inplace” and “instantaneous” update of the markers (stations).
  • if, instead of mapbox, I use a normal scatter plot, the mechanism works and the plot (not map) is being updated in real time. Could it depend on the token?

I am using mapbox and I requested and obtained my access token.

Some images:


What I am doing wrong?

##The slider:
app.layout = html.Div([
dcc.Graph(id=‘graph-with-slider’),
dcc.RangeSlider(
min=slider_values[0],
max=slider_values[-1],
step=1,
pushable=1,
marks={str(year): str(year) for year in slider_values},
value=[slider_values[0], slider_values[-1]],
tooltip={“placement”: “bottom”, “always_visible”: True},
id=‘year-slider’
)
])

#The callback:
@app.callback(
Output(‘graph-with-slider’, ‘figure’),
Input(‘year-slider’, ‘value’))

The Map
df, slider_values = process_data(data_folder, fileName)

#Compute timestamps for masking data
t0 = datetime.datetime(selected_year[0], 1, 1)
te = datetime.datetime(selected_year[1]+1, 1, 1)
####
#Build a mask for dataframe: 
mask    = (df['From'] >= t0) & (df['To'] <= te)
filtered_df = df[mask]
####
token = # the token....
fig = px.scatter_mapbox(filtered_df, lat="lat", lon="lon", 
                        hover_name="Station Name",
                        zoom=8, 
                        #center=dict(lat=34.9, lon=33.5274), ## to prevent flickering
                        height=400)

Thanks for any help you might be willing to give me.
Bye,
Marco

Hi @Marco81 and welcome to the Dash community :slight_smile:

If you are using Dash 2.7.0, try your app with Dash 2.6.2.

This sounds like a bug that was new in 2.7.0 and should be fixed in the next release.

1 Like

I managed to solve my problem by adding a color

    fig = px.scatter_mapbox(
                            filtered_df, 
                            lat="lat", lon="lon", 
                            hover_name="Station Name",
                            zoom=8, 
                            color="Station Name", #  <-----  this made my day!!!
                            center=dict(lat=34.9, lon=33.5274),
                            height=500
                            )
1 Like

Hi there.

I fear I was to optimistic, as I still have something strange going on.

When, using the timeslider, I slice my data by restricting the time-window for available/valid data I see some stations appearing where they should actually not (wrong location) AND the marker on the map seems to have no activate hover label as that is showing up somewhere else on the map (with other coordinates).

Where could I be possibly doing it wrong? When trying to debug my (very simple) code, everything seems to be consistent and reasonably fine. But then, when generating the plot I don’t get expected result.

As an example, I enclose a screen show: station is NOT the one I expect to see AND the (only) label is somewhere else, away from the actual marker (see image)… .

Please advice.
Thanks.