CODEWITHSUNDEEP
pythonplotlyplotly-dash
Xuyang Han
Xuyang Han

Reputation: 97

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

I am using python libraries called dash and plotly to create an interactive dashboard. I would like to set the map size to let it fill the whole Div. The map is created using mapbox. I tried to set style but not working. My map looks like this: My Map

I noticed other people’s map fill the whole Div. (See the position of widgets): Other person's map

Here are my code:

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
}

Dose anyone know how I can change my code to make my map looks like that?

Upvotes: 2

Views: 4443

Answers (1)

vlizana
vlizana

Reputation: 3232

I think what you're after is layout margins:

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

note that these margins affect the "inside" of the chart, you can also set the width and height parameters in the layout to change the size of the whole figure. For the width I strongly recommend using the css' grid on this css made for dash.

Upvotes: 2

Related Questions