SelectedData in Scattermapbox doesn't fire when select markers

Dash Python
1

Hello everybody,
I am new in this word and I need your support for the following issue I have spent days without getting a solution.

I have a map with markers on it. I define a callback to get the selected nodes. The callback fires the first time when run the app with selected = None, but after that I select different nodes and the callback doesn’t fire. I don’t know what I am doing wrong, because I have read many examples and pages and it seems I have the same.

My script is:

import plotly.graph_objects as go

import json
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from dash.exceptions import PreventUpdate


external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets, suppress_callback_exceptions=True)
app.title = "Network test"

# Data
lon_media = -3.52443595
lat_media = 40.5314
colors = ['#238443', '#78C679', '#C2E699', '#FFFFB2', '#FECC5C', '#FD8D3C', '#FF0909', '#B30622', '#67033B', '#1C0054']
name_nodes = ['E10301', 'E108', 'E121', 'E120', 'E122', 'P1', 'P2']
node_x = [40.49364, 40.5291696, 40.53518, 40.55151, 40.56916, 40.49952, 40.54665]
node_y = [-3.556693, -3.4921079, -3.545163, -3.529916, -3.556764, -3.546705, -3.550422]
# Color Node Points (Hoover sobre los nodos y color dependiendo de las conexiones)
node_in = [125, 34, 56, 110, 60, 120, 58]
node_out = [100, 50, 60, 100, 30, 78, 25]
node_total = []
node_text = []
for i, node in enumerate(name_nodes):
    node_total.append(node_in[i] + node_out[i])
    node_text.append('Estación: {}<br>Flow in: {}<br>Flow out: {}'.format(name_nodes[i], node_in[i], node_out[i]))

# Figure
fig = go.Figure(go.Scattermapbox(
        lat=node_x,
        lon=node_y,
        mode='markers+text',
        hovertemplate='<b>%{text}</b>',
        showlegend=False,
        text=node_text,
        marker=go.scattermapbox.Marker(
            size=20,
            colorscale=colors,
            # reversescale=True,
            color=node_total,
            colorbar=dict(
                thickness=15,
                title='Vehículos/hora',
                xanchor='left',
                titleside='right'
            ),
        ),
))

fig.update_layout(
    mapbox_style="open-street-map",
    hovermode='closest',
    width=800,
    height=800,
    title='Network test',
    clickmode='event+select',
    mapbox=dict(
        zoom=12,
        style="open-street-map",
        center=go.layout.mapbox.Center(
            lat=lat_media,
            lon=lon_media
        )
    )
)

# App
app.layout = html.Div([
    dcc.Location(id='url', refresh=False),
    dcc.Graph(
        id='network',
        config={'displaylogo': False, 'modeBarButtonsToRemove': ['toImage']},
        figure=fig
    ),
    html.Div(id='test'),
])


@app.callback(Output('test', 'children'),
              Input('network', 'selectedData'))
def select_nodes(selected_data):
    print('Callback select_nodes: ', selected_data)
    if not selected_data:
        return 'hello'
    else:
        return json.dumps(selected_data, indent=2)


app.run_server(debug=False)
2

I think the behaviour of selectedData changes or don’t work when using the mode='markers+text'. If you set mode='markers' the callback seems to work fine.

3

Many thanks Atharva, It works fine.
My best regards.
Juan Luis

1 Like
4

Sorry for the late reply on your solution, but glad I read it because it solved my problem as well; would you have some good documentation on why the mode=‘markers’ is the key in making the callback work?