Closed
Description
My application renders a map and passes the lat, long values from a pandas dataframe for plotly's scattermapbox graph object.
import dash
from dash import dcc
import pandas as pd
import mapbox
import plotly
import geojson
import ast
import dash
from dash.dependencies import Input, Output, State, ClientsideFunction
from dash import dcc
from dash import html, dash_table
import dash_bootstrap_components as dbc
import dash_daq as daq
import plotly as py
from plotly import graph_objs as go
from plotly.graph_objs import *
df = pd.DataFrame({
'x': [1, 2, 3],
'Lat': [37.774322, 37.777035, 37.773033],
'Long': [-122.489761, -122.485555, -122.491220]
})
layout = html.Div(
dcc.Graph(id="map"),
dcc.Input(id="inp")
)
@app.callback(
Output('map','figure'),
Input('inp','value')
)
def fin(val):
# do something
data = []
data.append({
"type": "scattermapbox",
"lat": df["Lat"],
"lon": df["Long"],
"name": "Location",
"showlegend": False,
"hoverinfo": "text",
"mode": "markers",
"clickmode": "event+select",
"customdata": df.loc[:,cd_cols].values,
"marker": {
"symbol": "circle",
"size": 8,
"opacity": 0.7,
"color": "black"
}
}
)
layout = {
"autosize": True,
"hovermode": "closest",
"mapbox": {
"accesstoken": MAPBOX_KEY,
"bearing": 0,
"center": {
"lat": xxx,
"lon": xxx
},
"pitch": 0,
"zoom": zoom,
"style": "satellite-streets",
},
}
return ({'data': data, 'layout': layout})
I upgraded the dash and plotly libraries to the latest version 2.7.1 and 5.13.0. I am not able to render the points on the map. I do not see any errors in the application logs. The only exceptions I see are JS in console.
Uncaught (in promise) Error: A listener indicated an asynchronous response by returning true, but the message channel closed before a response was received
Uncaught (in promise) Error: There is already a source with this ID
at r.addSource (async-plotlyjs.js:2:1020888)
at i.addSource (async-plotlyjs.js:2:1219363)
at l.addSource (async-plotlyjs.js:2:2988732)
at async-plotlyjs.js:2:2989736
at h (async-plotlyjs.js:2:2989770)
at l.update (async-plotlyjs.js:2:2990100)
at b.updateData (async-plotlyjs.js:2:2338377)
at async-plotlyjs.js:2:2336961