[Solved] Remove padding in Mapbox

Dash Python
1

Hi, I’m very newby using plotly and dash, and I’ve had a couple of doubts that I can not solve.

I will use the example shown on the plotly website to make maps with mapbox, adapted to Dash:

import dash
import dash_core_components as dcc
import dash_html_components as html

mapbox_access_token = 'pk.eyJ1IjoiZ2lsdHJhcG8iLCJhIjoiY2o4eWJyNzY4MXQ1ZDJ3b2JsZHZxb3N0ciJ9.MROnmydnXtfjqjIBtC-P5g'

app = dash.Dash()

app.layout = html.Div([
    dcc.Graph(
        id='mapbox',
        figure={
            'data': [
                dict(
                    type = "scattermapbox",
                    lat=['45.5017'],
                    lon=['-73.5673'],
                    mode='markers',
                    marker=dict(size=14),
                    text=['Montreal'])
            ],
            'layout': dict(
                autosize=True,
                hovermode='closest',
                mapbox=dict(
                    accesstoken=mapbox_access_token,
                    bearing=0,
                    center=dict(
                        lat=45,
                        lon=-73
                    ),
                    pitch=0,
                    zoom=5
                )
            )
        }
    )
], style = {
    "border-style": "solid",
    "height": "100vh"
})

app.run_server()

The previous mapbox has a huge white frame around it, and the height is not adjusted to height of the div.

I would like that the map to occupy all available space in the div, such as the one shown in the Uber example (https://plot.ly/dash/gallery/uber-rides/). Any idea how I can do it?

Thank you very much.

1 Like
2

I just find it. It was just about adding the attribute “margin” into the layout:

margin = dict(l = 0, r = 0, t = 0, b = 0)

Thank you anyway.

5 Likes
3

I ran into the same issue here and I have tried your solution but unfortunately it did not work for me. Is there another that we could remove the white frame/padding within the mapbox plot?