Black Lives Matter. Please consider donating to Black Girls Code today.

Define title and legend place on a px scatter mapbox

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:

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:

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

  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}
)

Thanks for your answers! Worked properly :wink: