My Dash Application is using mapbox. I’d like to overlay google maps traffic layer which is only available via the javascript API. So, I created an external javascript file with function to pull traffic data from the browser. I am referencing the dash docs for clientside callbacks. https://dash.plotly.com/clientside-callbacks
maps.js
var latitude;
var longitude;
window.dash_clientside = Object.assign({}, window.dash_clientside, {
clientside: {
setCoords: function (mapdata) {
# set coords
this.latitude = mapdata['mapbox.center']['lat']
this.longitude = mapdata['mapbox.center']['lon']
},
initMap: function () {
const map = document.getElementById("map"), {
zoom: 13,
center: { lat: latitude, lng: longitude },
};
# need to modify this for mapbox instead of google maps
const trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
},
}
});
Dash App
import dash
from dash.dependencies import Input, Output, State
from dash import dcc
from dash import html
import dash_bootstrap_components as dbc
mapbox_token = 'xxxxx'
googlemapskey = 'xxxxx'
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})
app.clientside_callback(
ClientsideFunction(
namespace='clientside',
function_name='setCoords'
),
# Add initmap function
Output('map', 'figure'),
Input('map', 'relayoutData')
)
My question is:
How do I modify the js code for mapbox instead for google maps as is in the example? const trafficLayer = new google.maps.TrafficLayer(); and pass the return JSON to app callback?