Input box callback function (please help)

Dash Python
1

Hello everyone, I need to do a callback function that links my text box value - lat and long to the map. So the map should fill the area according to the input value (I understand there is nothing to fill because there are only 2 points but it should show a line on the map). When I key in the value, the map did not update the value of the lon and lat that I have key in inside the input box. Not too sure where it went wrong, is it because I did not return the value to my map in the callback Output("graphQ", "figure")? Any help will be greatly appreciated!

This is currently how my dashboard looks like:

image
image1262×450 27.4 KB

heres my code for the input box :

def custom_input(paragraph_text,id, 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=id),
        ],
        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=figa), md=8),
                    dbc.Col(
                        children=[
                            dbc.Row(
                                [
                                    dbc.Col(custom_input("Lat1",id="input1")),
                                    dbc.Col(custom_input("Long1",id="input2")),
                                ],
                                style={"paddingBottom": 30},
                            ),
                            dbc.Row(
                                [
                                    dbc.Col(custom_input("Lat2",id="input3")),
                                    dbc.Col(custom_input("Long2",id="input4")),
                                ],
                                style={"paddingBottom": 30},
                            ),
                          ],
                        md=4,
                    ),
                ]
            )

@app.callback(
    Output("output", "children"),
    Output("graphQ", "figure"),
    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)

my map figure code:

longitude = []
latitude = []

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

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

Couple of things that seem to be incorrect in your implementation:

  1. In the callback decorator, you have TWO outputs to affect: something with an ID of “output” and the GRAPH object but you are only returning a single output from the callback function.
  2. You should try removing the Output("output", "children") part and only keep the Graph as the output, move all of your “my map figure code” into the def update_output function and return the FIGURE “figa” as the return value. Make sure the lat/lon of this figure is set according to the input values. Also make sure the “figure” property of GRAPH is set like this instead: dcc.Graph(id="graphQ",figure=update_output())
  3. Lastly, what does rest of your code look like? Can you post the full code in case there are other issues with it preventing the map update?