Trying to code a dash app that contains a dash leaflet map

Question:

Trying to plot a dash leaflet map where a marker appears at the latitude and longitude that is inputted, using Dash. The webpage loads, but no map appears when the submit button is clicked. The error that pops up says "Callback error updating output-state.children".

import dash_leaflet as dl
from dash import Dash, html, dcc
from dash.dependencies import Input, Output, State
import os

app = Dash()  
app.layout = html.Div([
    html.H1(id = 'textout'),
    dl.Map(id = "output-state"),
    dcc.Input(id = 'lat', value = 39.298, type = 'number'),
    dcc.Input(id = 'long', value = -76.590, type = 'number'),
    dcc.Input(id = 'zoom', value = 11, type = 'number'),
    html.Button('Submit', id='submit-button')
])

@app.callback(Output('output-state', 'children'),
              Input('submit-button', 'n_clicks'),
              State('lat', 'value'),
              State('long', 'value'),
              State('zoom', 'value'))
def update_output(n_clicks, lat, long, zoom):
    if n_clicks is not None:
        return dl.Map(children = [dl.TileLayer()] + [dl.Marker()], 
                      center = (lat, long),
                      zoom = zoom,
                      style={'width': '100%', 'height': '75vh', 'margin': "auto", "display": "block"})

@app.callback(Output('textout', 'children'),
              Input('submit-button', 'n_clicks'),
              State('lat', 'value'),
              State('long', 'value'),
              State('zoom', 'value'))
def update_text(n_clicks, lat, long, zoom):    
        return  'Lat {}, Long {},  zoom {}, number of clicks {} times'.format(lat, long, zoom, n_clicks)

if __name__ == '__main__':
    app.run_server(debug = True, host = "127.0.0.1")

Error message:

line 25, in update_output
return dl.Map(children = [dl.TileLayer()] + [dl.Marker()],
anaconda3libsite-packagesdashdevelopmentbase_component.py", line 420, in wrapper
return func(*args, **kwargs)
line 98, in __init__
raise TypeError(
TypeError: Required argument `position` was not specified.
Asked By: rerecodes

||

Answers:

I think you should change from dl.Map(id = "output-state") to html.Div(id = "output-state") and then set position for the marker. Something as below:

import dash_leaflet as dl
from dash import Dash, html, dcc
from dash.dependencies import Input, Output, State
import os

app = Dash()  
app.layout = html.Div([
    html.H1(id = 'textout'),
    html.Div(id = "output-state"),
    dcc.Input(id = 'lat', value = 39.298, type = 'number'),
    dcc.Input(id = 'long', value = -76.590, type = 'number'),
    dcc.Input(id = 'zoom', value = 11, type = 'number'),
    html.Button('Submit', id='submit-button')
])

@app.callback(Output('output-state', 'children'),
              Input('submit-button', 'n_clicks'),
              State('lat', 'value'),
              State('long', 'value'),
              State('zoom', 'value'))
def update_output(n_clicks, lat, long, zoom):
    if n_clicks is not None:
        return dl.Map(children = [dl.TileLayer()] + [dl.Marker(position=[lat, long])], 
                      center = (lat, long),
                      zoom = zoom,
                      style={'width': '100%', 'height': '75vh', 'margin': "auto", "display": "block", "position": "relative"})

@app.callback(Output('textout', 'children'),
              Input('submit-button', 'n_clicks'),
              State('lat', 'value'),
              State('long', 'value'),
              State('zoom', 'value'))
def update_text(n_clicks, lat, long, zoom):    
        return  'Lat {}, Long {},  zoom {}, number of clicks {} times'.format(lat, long, zoom, n_clicks)

if __name__ == '__main__':
    app.run_server(debug = False, port=8514)

enter image description here

Answered By: hoa tran
Categories: questions Tags: ,
Answers are sorted by their score. The answer accepted by the question owner as the best is marked with
at the top-right corner.