Textbox callback interaction

Dash Python
1

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

image
image1522×562 15.4 KB

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 :grinning:

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)