Hi,
this is my first post to the forum which I have been following quite actively during the past 12 months. I have been using Dash to implement web GUI for my app, and I am very impressed how easily and flexibly you can implement cool looking dashboards with Dash. Many thanks to Dash team for making this possible!
In my app I am having callback which updates the map either with ‘scattermapbox’ or ‘densitymapbox’ traces, depending on which of the inputs of the callback changes. I have observed, that if I first update the map with trace of type ‘scattermapbox’, then the consequent update with trace type of ‘densitymapbox’ is not visible in the map at all (or vice versa).
Perhaps I have parametrised my layout incorrectly, or what could explain this weird behaviour? I highly appreciate if you could help me to solve this problem.
I am using following versions: dash v1.1.1, dash-core-components v1.1.2 and plotly v4.1.1.
Following example illustrates the problem I am facing:
import dash
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html
external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
app.layout = dbc.Container([
dbc.Row([dbc.Button('click me!', id = 'button_id')], justify = "center"),
dbc.Row([dcc.Graph(id = 'graph')], justify = "center")])
@app.callback(Output('graph', 'figure'),
[Input('button_id', 'n_clicks')])
def update_figure(n):
if not n:
return dash.no_update
point = {'lat': 60.978869, 'lon': 25.66120}
if n % 2:
trace = {
'lat':[point['lat']],
'lon':[point['lon']],
'type': 'scattermapbox',
'mode': 'markers',
'marker': {'size': 20}
}
else:
trace = {
'lat':[point['lat']],
'lon':[point['lon']],
'z':[10],
'type': 'densitymapbox'
}
return {
'data': [trace],
'layout': {
'autosize': True,
'width': 900,
'mapbox': {
'accesstoken':<add-your-token-here>,
'center': {'lat': point['lat'], 'lon': point['lon']},
'zoom': 15,
'style': 'satellite'
},
'margin': {
'l': 0, 'r': 0, 'b': 0, 't': 0
},
'clickmode': 'event+select',
'hovermode': 'closest',
}
}
if __name__ == '__main__':
app.run_server(debug=True,host='0.0.0.0',port = 8080)