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:
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)
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!
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?
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', [...]})
