Dash Plotly Textbox callback interaction

Question

I have been assign to do a textbox interaction with filled area on maps. This is how my dashboard currently looks like:

So once I input my number in the text box and press submit, the figure map(which is on the left side) should show the filled area according to the number I type in in the Lat1,Long1 and Lat2,Long2. However, I am not too sure how to callback between the number input, the figure as well as the button. I went online to search but I couldnt find any resources to read from. I am very very new to this so really any help will be greatly appreciated! So if you got any ideas please please please let me know! Thank you :)

heres my code for the input box :

def custom_input1(paragraph_text, min_value=0, max_value=200, step=1):
    return html.Div(
        children=[
            html.P(paragraph_text, style={"paddingRight": 10}),
            dbc.Input(type="float", min=min_value, max=max_value, step=step,id='input1'),
        ],
        style={"display": "flex"},
    )

def custom_input2(paragraph_text, min_value=0, max_value=200, step=1):
    return html.Div(
        children=[
            html.P(paragraph_text, style={"paddingRight": 10}),
            dbc.Input(type="float", min=min_value, max=max_value, step=step,id='input2'),
        ],
        style={"display": "flex"},
    )
def custom_input3(paragraph_text, min_value=0, max_value=200, step=1):
    return html.Div(
        children=[
            html.P(paragraph_text, style={"paddingRight": 10}),
            dbc.Input(type="float", min=min_value, max=max_value, step=step,id='input3'),
        ],
        style={"display": "flex"},
    )
def custom_input4(paragraph_text, min_value=0, max_value=200, step=1):
    return html.Div(
        children=[
            html.P(paragraph_text, style={"paddingRight": 10}),
            dbc.Input(type="float", min=min_value, max=max_value, step=step,id='input4'),
        ],
        style={"display": "flex"},
    )
html.Div(children=[html.Div([
          html.H1("Query1", style={'text-align': 'center','fontSize': 30}),
            dbc.Row(
                [
                    dbc.Col(dcc.Graph(id="graphQ", figure={}), md=8),
                    dbc.Col(
                        children=[
                            dbc.Row(
                                [
                                    dbc.Col(custom_input1("Lat1")),
                                    dbc.Col(custom_input2("Long1")),
                                ],
                                style={"paddingBottom": 30},
                            ),
                            dbc.Row(
                                [
                                    dbc.Col(custom_input3("Lat2")),
                                    dbc.Col(custom_input4("Lat2")),
                                ],
                                style={"paddingBottom": 30},
                            ),
                            html.Div(id="output"),
                            html.Button('Submit', id='submit_button', n_clicks=0),
                        ],
                        md=4,
                    ),
                ]
            ),

        ])]))

@app.callback(
    Output("output", "children"),
    Input("input1", "value"),
    Input("input2", "value"),
    Input("input3", "value"),
    Input("input4", "value"),
)
def update_output(input1,input2,input3,input4):
    return 'Lat1: {} and Long1: {}\nLat2: {} and Long2: {}'.format(input1, input2, input3, input4)

heres my failed code for my figure: (not too sure if this is the right way haha…)

figt = go.Figure(go.Scattermapbox(
    fill = "toself",
    lon = [{}.format(input2,input4)], lat = [{}.format(input1,input3)],
    marker = { 'size': 10, 'color': "orange" }))

figt.update_layout(
    mapbox = {
        'style': "stamen-terrain",
        'center': {'lon': -73, 'lat': 46 },
        'zoom': 5},
    showlegend = False)

This is the end result it should have:

What is the result that you are getting by running your code? — AS11
for the input box coding, it just displaying the textbox, button, and the figure. Dont really have any result. for the figure coding, there is an error lon = [{}.format(input2,input4)], lat = [{}.format(input1,input3)], AttributeError: 'dict' object has no attribute 'format' I am sure {}.format(x,x) isnt the right way but i dont know what are the code to do such function — rongz
One way you could try to avoid that issue is to try and define lon and lat as an empty list outside of the fig, append to that list using the input, and then use the original list name and set it equal to lon and lat. — AS11
I meant that you could have one function and reuse that function multiple times, see this pastebin for example code that shows the idea. — Bas van der Linden

AS11 AS11 · Accepted Answer · 2021-03-09T16:36:10

The formatting was a bit weird in a comment, so here's the code:

First off, at the very top you will need to define an empty list named latitude and longitude

longitude = []
latitude = []

From there, using the callback that you provided, you can update this list using

    @app.callback(
    Output("output", "children"),
    Input("input1", "value"),
    Input("input2", "value"),
    Input("input3", "value"),
    Input("input4", "value"),
)
def update_output(input1,input2,input3,input4):
        latitude.extend([input1,input3])
        longitude.extend([input2,input4])
        return 'Lat1: {} and Long1: {}\nLat2: {} and Long2 {}'.format(input1, input2, input3, input4)

And then use these values like :

figt = go.Figure(go.Scattermapbox(
    fill = "toself",
    lon = longitude, 
    lat = latitude,
    marker = { 'size': 10, 'color': "orange" }))

figt.update_layout(
    mapbox = {
        'style': "stamen-terrain",
        'center': {'lon': -73, 'lat': 46 },
        'zoom': 5},
    showlegend = False)

And to fill in between the points/traces you can use this link

Dash Plotly Textbox callback interaction

1 Answers