Need to reset each Scattermapbox for it to show up properly


#1

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:

14%20PM

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

21%20PM

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.


#2

Hi @charlie,

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

-Jon


#3

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],
    marker=dict(size=10)
)
layout = go.Layout(
    mapbox=dict(
        accesstoken=mapbox_token,
        center=dict(lat=40.7484405,
                    lon=-73.9856644),
        zoom=10,
        style='light',
    ),
    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 = '''
<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
        <style>body{ margin:0 100; background:whitesmoke; }</style>
    </head>
    <body>
        <h1>Empire State Building</h1>
        ''' + html + '''
    </body>
</html>'''

Path('empire_state_building.html').write_text(template)