Define title and legend place on a px scatter mapbox

📊 Plotly Python
1

Hello to all!
I hope you’re fine. I am struggling to get the desgin I want for me map. The pure map (or “canvas” if you prefere) is exactly like I want to it. Nevertheless, I have:

  1. my vertical legend on the right of it whereas I would prefer it to be horizontal and at the bottom of my map.
  2. a problem a bit different for my title: it displays within my map (at the top, but inside it) and I would prefer it to be at the top but outside of my canvas. Here is what it looks like:

image
image627×533 126 KB

I have center it by doing:
fig.update(layout={“title”: {“x”: 0.5}})

But when I do same things with y and any value between 0 and 1, nothing change (I am still talking about the title).

Here is the code of the fig:

fig = px.scatter_mapbox(new_df,
title = “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt”,
lat = “latitude”,
lon = “longitude”,
zoom = 4.5,
height = 500,
[no important stuff]
)

fig.update(layout={“title”: {“x”: 0.5, “y”: 0}})

fig.update_layout(
mapbox = {‘style’: “stamen-toner”, ‘center’: {‘lon’: 2, ‘lat’ : 47}, ‘zoom’: 4.8},
showlegend = True,
legend_orientation = “h”,
margin = {‘l’ : 0, ‘r’ : 0, ‘b’ : 10, ‘t’ : 10})

Thanks and have a great weekend! :wine_glass:

PS: Pb 2 is more important than pb 1 :wink:

2

Just to precise: the photo does not “cut” the text. The text gets “cut” by the map borders in my code!

3
  1. To my knowledge you cannot set the colorbar to be horizontal.
  2. For the title issue two things:
  • You need to add more margin at the top or bottom depending on where you want the title
  • For very long titles you need to manually set the line breaks
fig = px.scatter_mapbox(
    new_df,
    title="Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit,<br>sed do eiusmod tempor incididunt",
    lat="latitude",
    lon="longitude",
    zoom=4.5,
    height=500,
)

fig.update_layout(
    title_x=0.5,
    title_y=0.95,
    mapbox={"style": "stamen-toner", "center": {"lon": 2, "lat" : 47}, "zoom": 4.8},
    margin={"l": 0, "r": 0, "b": 0, "t": 80}
)
4

Thanks for your answers! Worked properly :wink: