Need to reset each Scattermapbox for it to show up properly


I’m inserting Scattermapbox HTML div’s into a report written in HTML. When I open that HTML report, every Scattermapbox element looks strange until I hit the “Reset” button (the home icon).

For example, this map of a shape is not centered when the report is opened:


After clicking on the Reset button, the map is centered on the centroid of the shape (as it should):


A more severe version of this problem occurs when there are scatter points plotted. Upon loading the report, this Scattermapbox div has bizarre white space:

After clicking on one of the custom buttons I made, or after clicking on the reset button, the plot looks how I expected it would:

I’m running plotly 3.3.0 and python 3.7.0.


Hi @charlie,

I’m not really sure offhand, might be a bug. Could you add a small code example?



Hi Jon, I tried to replicate it with a simple example but was not able to. I now suspect that there’s something wrong in my HTML template, though I have little idea what’s causing the problem. We can close this thread until I can isolate the problem more.

For what it’s worth, here is my minimal example that (fortunately for plotly) does not replicate my bug.

import os
from pathlib import Path

from IPython.display import HTML
import plotly.graph_objs as go
from plotly.offline import plot

# I have my mapbox token stored as an environment variable
mapbox_token = os.environ['MAPBOX_TOKEN']

scatter = go.Scattermapbox(
    lat=[40.7484405, 40.74884],
    lon=[-73.9856644, -73.985],
layout = go.Layout(
    width=800, height=400, margin=dict(t=0, b=0, l=0, r=0)

fig = go.Figure(data=[scatter], layout=layout)
html = plot(fig, output_type='div', auto_open=False, include_plotlyjs=True, show_link=False)

template = '''
        <link rel="stylesheet" href="">
        <style>body{ margin:0 100; background:whitesmoke; }</style>
        <h1>Empire State Building</h1>
        ''' + html + '''



I tried to pick apart my code that exhibits the bug, and I was not able to pinpoint the source of the bug.

The bug seems to depend on the browser:

  • In Safari, I never see this bug occur. The Scattermapbox maps always display correctly upon opening the doucment.
  • In Chrome, I often see the bug occur, but not always. Frustratingly, I can’t yet figure out what causes the bug to occasionally not occur.


Hi @charlie,

I think the best goal at this point it to try to make something as simple as possible that reproduces the issue in Chrome (even if it doens’t always happen) and submit it as a plotly.js bug report. The plotly.js issue template explains some options for submitting reports without JavaScript. Thanks!