Dash and Folium integration

Dash Python
1

Hello to the whole community,

First of all manythanks for this wonderful Dash Product that’s look very smart .
I would like to know if there is a way to interact from Dash with a map produced by folium (via a frame, or any other html component).

Thanks for your help

Benoit

2

I’m unfamiliar with folium, but in order to tie interactivity from a folium graph back into the dash app, someone would need to make a folium dash component which would render leaflet.js maps based off of however folium serializes its data within a react component. Here are the docs on the plugin system: https://plot.ly/dash/plugins.

Note that the dcc.Graph component also has built-in support for maps including:

With the dcc.Graph component, you can tie hover, select, and click interactions back to your dash code:

walmart
walmart.gif745×587 2.07 MB
mapbox-lasso
mapbox-lasso.gif1347×686 2.69 MB

Here’s the sample code for that last example:

import dash
from dash.dependencies import Input, Output
import dash_core_components as dcc
import dash_html_components as html

import json
import pandas as pd
df = pd.read_csv(
    'https://raw.githubusercontent.com/plotly' +
    '/datasets/master/2011_february_us_airport_traffic.csv')

app = dash.Dash()

app.layout = html.Div([
    html.Div(
        html.Pre(id='lasso', style={'overflowY': 'scroll', 'height': '100vh'}),
        className="three columns"
    ),

    html.Div(
        className="nine columns",
        children=dcc.Graph(
            id='graph',
            figure={
                'data': [{
                    'lat': df.lat, 'lon': df.long, 'type': 'scattermapbox'
                }],
                'layout': {
                    'mapbox': {
                        'accesstoken': (
                            'pk.eyJ1IjoiY2hyaWRkeXAiLCJhIjoiY2ozcGI1MTZ3M' +
                            'DBpcTJ3cXR4b3owdDQwaCJ9.8jpMunbKjdq1anXwU5gxIw'
                        )
                    },
                    'margin': {
                        'l': 0, 'r': 0, 'b': 0, 't': 0
                    },
                }
            }
        )
    )
], className="row")


app.css.append_css({
    'external_url': 'https://codepen.io/chriddyp/pen/bWLwgP.css'
})


@app.callback(
    Output('lasso', 'children'),
    [Input('graph', 'selectedData')])
def display_data(selectedData):
    return json.dumps(selectedData, indent=2)


if __name__ == '__main__':
    app.run_server(debug=True)
3

I would like to thank yo very much for your response @chriddyp . In fact your response may be clear for an expert of Dash library., which is not my case. I will probably never be able to design my own plugin for “folium” …
But thanks for giviing me a rasponse … It has been really appreciated.

Have a nice evening

Benoit