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)
#4

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.
#5

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!

-Jon

#6

I have the same problem. In Mozilla and Chrome. The map won’t fully show until I hit Reset button and scroll the map a little bit.

There’s no fix yet? @jmmease @charlie

#7

Hi @dimrizo,

If you’re interested, you could help out by creating the reproducible example and plotly.js issue as described above.

-Jon

1 Like
#8

Hello,

actually I am pretty new to programming, to plotly and this forum. I am using plotly and mapbox in a Python environment to visualize a solution for a transportation problem.

I have the dataset in .csv format and the code(I simplified it a little bit). How should I share it with you?

Regards,
Dimitris

#9

Hi @dimrizo,

What would be the most helpful is if you could work out as small an example as possible that has the problem. So rather than reading in a CSV, could you pick out just a few values and write them out directly in the script so that it’s self contained. Something like.

import pandas as pd
df = pd.DataFrame({'col1': [...], 'col2', [...]})

Then, open an issue with the plotly.js project at https://github.com/plotly/plotly.js/issues that includes the code and a description of what is going wrong.

Thanks!
-Jon

#10

OK, thanks so much for the info. I will do it soon!

Regards,

** Dimitris**

#11

Dear jmmease,

do you any smart ways to include the code. i included it but doesn’t show up good.

Regards,
Dimitris

#12

Dimitris: try indenting your code with four spaces or, alternatively, clicking on the code button labeled “</>”.

#13

Hello hello,

thank you guys for your guidance and help. I actually posted a link with the code in Pyfiddle. I had a hard time formatting it in Github.

The question is: Is it OK? Can it be read?

#14

FYI, I’ve translated the Python code to JavaScript in the issue at https://github.com/plotly/plotly.js/issues/3642#issuecomment-476130399

-Jon