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.
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)
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.
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)