New plotly.express scatter_map not working

[analytic]

Afterreading the recent announcement about the transition from mapbox to map functions for tiled maps in Plotly 5.24.0, I tried to run a simple example from the documentation but just got an empty set of axes. Same story for scatter_map, line_map, choropleth_map and density_map - all empty. The equivalent Mapbox functions worked normally.

I also tried the new go.scattermap trace and its works fine.

Here’s the example:

import plotly.express as px

df = px.data.carshare()
fig = px.scatter_map(df, lat="centroid_lat", lon="centroid_lon",     color="peak_hour", size="car_hours",
                  color_continuous_scale=px.colors.cyclical.IceFire, size_max=15)
fig.show()

This runs without errors but just produces an empty plot

[adamschroeder]

Hi @analytic
Are you using VS Code?

[analytic]

Hi Adam,

Yes I am using VS Code (on macOS if that helps)

Best regards,
David

[analytic]

With a bit more testing I see that it’s the “vscode” renderer that is the problem.

None of the new “map” traces or plotly express figures work with the “vscode” renderer, but it I switch to “notebook” then everything works.

[analytic]

I have submitted a bug report against the VSCode Jupyter Notebook Renderer extension https://github.com/microsoft/vscode-notebook-renderers/issues/213
Could it be that they are not up to date on the required plotly.js version? Not sure how to check that.

[adamschroeder]

Exactly. VS Code uses its own version of Plotly.js, which means that the latest features rarely work immediately.

Troubleshooting

[richardedwardhughes]

I was having the same problem. I just modified fig.show() to:

fig.show(renderer=‘notebook’)

and then it worked fine!

So your exact example, modify the renderer:

import plotly.express as px
df = px.data.carshare()
fig = px.scatter_map(df, lat="centroid_lat", lon="centroid_lon",     color="peak_hour", size="car_hours",
                  color_continuous_scale=px.colors.cyclical.IceFire, size_max=15)
fig.show(renderer='notebook')

Yields:

[deepa-shalini]

I have installed the latest version of vscode-python, and I don’t use Jupyter within VSCode.
When I run the example code for px.scatter_map, I don’t see anything in the browser. It just keeps loading and then nothing happens.

[jsulopzs]

You can make it work in VSCode by using fig.show(renderer="notebook") as @richardedwardhughes pointed out.

import plotly.express as px
df = px.data.carshare()
fig = px.scatter_map(df, lat="centroid_lat", lon="centroid_lon",     color="peak_hour", size="car_hours",
                  color_continuous_scale=px.colors.cyclical.IceFire, size_max=15, zoom=10)
fig.show(renderer='notebook')

[deepa-shalini]

Isn’t that only if you use Jupyter notebooks within VSCode. I DON’T use it. I use the plain VS Code editor.

[deepa-shalini]

Looks like it is not working from any editor. Maybe some other issue persists.

[analytic]

I think Microsoft have now made the change to move to a later version of plotly.js that resolves this.
As to when this change will appear in the released vscode renderer - I don’t know.

See this issue https://github.com/microsoft/vscode-jupyter/issues/16037 and links therein.