Plotly Map Copyright Notice Box Location

This may be more of a Holoviz Panel question - but I am not quite sure.

When rendering a Plotly map (eg. px.scatter_map) in Panel , the copyright notice that shows up automatically in maps with tiles sourced from eg. OpenStreetMap is rendered below the actual figure:

import panel as pn
import pandas as pd
import plotly.express as px

pn.extension("plotly")
# 
fig = px.scatter_map(
    lat=[],
    lon=[],
    zoom=0,
    height=300
)
fig.update_layout(map_style="open-street-map")
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})

plotly_pane = pn.Column(
     pn.pane.Plotly(fig),
    '# Some Caption',
)
plotly_pane.servable()

It then overlaps with other elements:

Is there a way to define the location of this map element (maplibregl-ctrl-attrib-button)?

Related issue on the Panel repo.

I have a similar issue, it’s not configured properly.

@TheMichael
I’m not able to reproduce the issue you reported with the following code:

import plotly.express as px

fig = px.scatter_map(
    lat=[],
    lon=[],
    zoom=0,
    height=300
)
fig.update_layout(map_style="open-street-map")
fig.update_layout(margin={"r":0,"t":0,"l":0,"b":0})

fig.show()

@mayaradaher can you please share the code that you used to see if I can reproduce the error locally?

@adamschroeder, indeed the malformed copyright notice only appears if I render the map through Panel. Is there a way to specify the location etc. of this notice element by passing a parameter to the px.scatter_map function? Perhaps this would then also solve the Panel-related issue?

Hi @TheMichael
I don’t think px.scatter_map has an attribute to specify locations of notices. But just in case, here’s the full list of attributes. Here’s the px list for scatter_map.

Hi @adamschroeder

My code is here: GitHub - mayaradaher/michelin-app: Michelin World Guide app
And app here: https://michelinrestaurants-122629525979.southamerica-east1.run.app/en

1 Like

This should be fixed in a Panel release next week.

2 Likes

I just cloned your repo, @mayaradaher , and it displayed correctly for me.

1 Like

I’ve noticed this generally in the recent update to 3.0.0 in plotly.js. I am able to reproduce the change in attribution location by switching between plotly.js version 2.35.3 and version 3.0.0 at https://codepen.io/pen?&prefill_data_id=d05d7141-3a9f-4aac-afa0-46cbe1e7d958. Does Plotly rely on Panel under the hood, and the Panel fix will resolve this in Plotly?

1 Like

CodePen link may not be stable, so I’ll just link the parent page I used to get there instead: Tile density heatmap in JavaScript and then clicked “Try It On CodePen.”

I’ve just upgraded my app to Plotly 1.50.0 and this behavior exists when displaying choroplethmaps in Streamlit. The earlier location of this info overlaid on the map (as shown in Adam’s reply) was so much better, especially since it could be hidden by clicking the info icon if necessary.

Why was this change made, and could it please be undone and have a setting to revert to the previous behavior? I understand the need to display attribution, but it shouldn’t be so disruptive to an application’s layout.

hi @kklasman
Thanks for your feedback.

Are you seeing image 1 or image 2 in your choropleth? This PR was supposed to fix that.

Hi Adam,

I’m seeing image #1.

I had just upgraded:

  • plotly from 5.24.1 to 6.3.1

  • streamlet from 1.41.1 to 1.50.0

Did I miss an update?

Thanks