[FIXED] How to insert Folium map with Markers in Dash layout?

Issue

I have a map created using Folium saved as an HTML file. It contains a few markers. Now I would like to insert this map as an IFrame element in my Plotly-Dash layout. I managed to do that using:

app.layout = html.Div(children=[
        html.Iframe(id='map', srcDoc=open('index.html', 'r').read())
], style={'padding': 10, 'flex': 1})

but the markers don't appear when embedded in the Dash layout. Why are they not appearing in Dash?

Solution

An alternative to Folium is dash-leaflet. While both components are leaflet-based, dash-leaflet provides tighter integration with Dash. Here is a small example with a few markers,

import dash_html_components as html
import dash_leaflet as dl
from dash import Dash

# A few cities in Denmark.
cities = [dict(title="Aalborg", position=[57.0268172, 9.837735]),
          dict(title="Aarhus", position=[56.1780842, 10.1119354]),
          dict(title="Copenhagen", position=[55.6712474, 12.5237848])]
# Create example app.
app = Dash()
app.layout = html.Div([
    dl.Map(children=[dl.TileLayer()] + [dl.Marker(**city) for city in cities],
           style={'width': '100%', 'height': '50vh', 'margin': "auto", "display": "block"}, id="map"),
])

if __name__ == '__main__':
    app.run_server()

You can see a lot more examples in the documentation.

Answered By - emher

Answer Checked By - Katrina (PHPFixing Volunteer)