Plotly Dash : Running JavaScript function via Clientside callbacks

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?

1 Like