Callback from button not working

Dash Python
1

When pressing the button I want the callback to run the function “button_click” to update a map. But nothing happens so far.

A code snippet is below;

layout = html.Div([
    html.Div(html.H3('Map')),
    html.Div(dcc.Upload(
        id='upload-data',
        children=html.Div([
            'Drag and Drop or ',
            html.A('Select Files')
        ]),
        style={
            'width': '100%',
            'height': '60px',
            'lineHeight': '60px',
            'borderWidth': '1px',
            'borderStyle': 'dashed',
            'borderRadius': '5px',
            'textAlign': 'center',
            'margin': '10px'
        },
        # Allow multiple files to be uploaded
        multiple=True
    )),
    html.Div(dcc.Graph(id='my-graph')),
    html.Div(html.Button('Generate map', id='button')),
    html.Div(id='output-data-upload'),
])

@app.callback(
    Output('my-graph', 'children'),
    [Input('button', 'n_clicks')])
def button_click(n_clicks):
    trace = []
    print("number of clicks", n_clicks)
    trace.append(
        go.Scattermapbox(lat=df_["lat"], lon=df_["long"], mode='markers', marker=go.scattermapbox.Marker(
                         size=14), hoverinfo='text'))
    return {"data": trace,
            "layout": go.Layout(autosize=True, hovermode='closest', showlegend=False, height=700,
                                mapbox={'accesstoken': mapbox_access_token, 'bearing': 0,
                                        'center': {'lat': 38, 'lon': -94}, 'pitch': 30, 'zoom': 3,
                                        "style": 'mapbox://styles/mapbox/light-v9'})}`

Can anyone see where my error is?

2

Does the app render (or, if using latest version of Dash, does web UI show any errors)? also, if you have debug=True in your app.run_server call, does your terminal window show any errors?

3

Thanks for the response @flyingcujo.
I rewrote the project - where I can’t see what I have done differently, but now it is working.

4

I think the problem was your callback output - Output('my-graph', 'children'). You want Output('my-graph', 'figure'), I guess that’s probably changed in your new app?

1 Like