如何在 Dash 布局中插入带有标记的 Folium 地图？

Question

我有一张使用 Folium 创建的地图，保存为 HTML 文件。它包含一些标记。现在我想将这张地图作为 IFrame 元素插入到我的 Plotly-Dash 布局中。我设法做到了这一点：

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

但标记嵌入 Dash 布局时不会出现。为什么它们没有出现在 Dash 中？

Answer 1

Folium 的替代品是 dash-leaflet。虽然这两个组件都是基于传单的，但 dash-leaflet 提供了与 Dash 更紧密的集成。这是一个带有一些标记的小例子，

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()

您可以在 the documentation 中看到更多示例。

如何在 Dash 布局中插入带有标记的 Folium 地图？

How to insert Folium map with Markers in Dash layout?

python

maps

iframe

folium

plotly-dash