为什么我的地图在 Dash-Plotly App 中太小了？

Question

我正在使用 python 名为 dash 和 plotly 的库来创建交互式仪表板。我想设置地图大小让它填满整个Div。地图是使用 mapbox 创建的。我试图设置样式但没有工作。我的地图是这样的：

我注意到别人的地图填满了整个Div。（查看小部件的位置）：

这是我的代码：

map_data = [
    go.Scattermapbox(
        lat=df['latitude'],
        lon=df['longitude'],
        mode='markers',
        marker=dict(
            cmax=50,
            cmin=0,
            color=df['depth'],
            colorbar=dict(
                title='Colorbar'
            ),
            colorscale='YlGnBu',
            reversescale=True,
            size=5,
            # opacity=0.9
        ),

        text=df['depth'],
        hoverinfo='text'
    )
]

map_layout = go.Layout(
    title='Bathymetrical Data',
    autosize=True,
    hovermode='closest',
    xaxis=dict(hoverformat='.5f'),
    yaxis=dict(hoverformat='.5f'),

    mapbox=dict(
        accesstoken=mapbox_access_token,
        bearing=0,
        center=dict(
            lat=lat,
            lon=lon
        ),
        pitch=0,
        zoom=10,
    ),
)

figure = {
    'data': map_data,
    'layout': map_layout
}

有谁知道我如何更改我的代码以使我的地图看起来像那样？

Answer 1

我想你追求的是布局边距：

map_layout = go.Layout(
    title='Bathymetrical Data',
    autosize=True,
    hovermode='closest',
    margin=dict(t=0, b=0, l=0, r=0),
    ...

注意这些边距会影响图表的"inside"，您也可以在布局中设置width和height参数来改变整个图表的大小。对于宽度，我强烈建议在此 css 上使用 css' 网格，用于破折号。

为什么我的地图在 Dash-Plotly App 中太小了？

Why my map size is too small in Dash-Plotly App?

python

plotly

plotly-dash