Plotly colorscale always on the right

Question

Using Plotly in Python but I am having trouble moving the colorscale next to the map. For some reason it doesn't move with the map.

This is what it looks like:

Here are the important parts of the code:

fig = make_subplots(
    rows=1,
    cols=2,
    specs=[[{"type": "mapbox"}, {"type": "table"}]],
    horizontal_spacing=0.1,
)

Note that the mapbox is the first one in specs. Then

plt = go.Scattermapbox(
    lat=lats,
    lon=lons,
    mode="markers+text",
    marker=go.scattermapbox.Marker(
        size=10,
        color=scores,
        showscale=True,
        cmin=-1,
        cmax=1,
    ),
    text=texts,
    textposition="bottom right",
)
fig.add_trace(plt, row=1, col=1)


table = go.Table(
    header=dict(
        values=["NOTAM_REC_ID", "SCORE", "TEXT"],
        fill_color="lightsteelblue",
        align="left",
    ),
    cells=dict(
        values=[matches_df.NOTAM_REC_ID, matches_df.SCORE, matches_df.E_CODE],
        fill_color="white",
        align="left",
    ),
)
fig.add_trace(table, row=1, col=2)

fig.update_layout(
    autosize=True,
    hovermode="closest",
    mapbox=dict(
        accesstoken=mapbox_access_token,
        bearing=0,
        center=dict(lat=lats[3], lon=lons[3]),
        pitch=0,
        zoom=10,
    ),
)

fig.show()

Answer 1

The color bar can be moved by specifying a positioning parameter called colorbar_x to go.Scattertermapbox(). I wrote the code by looking for similar data from the official reference.

import pandas as pd
import numpy as np
from plotly.subplots import make_subplots
import plotly.graph_objects as go

lat=['38.91427','38.91538','38.91458','38.92239','38.93222','38.90842',
     '38.91931','38.93260','38.91368','38.88516','38.921894','38.93206',
     '38.91275']

lon=['-77.02827','-77.02013','-77.03155','-77.04227','-77.02854','-77.02419',
     '-77.02518','-77.03304','-77.04509','-76.99656','-77.042438','-77.02821',
     '-77.01239']

name = ["The coffee bar","Bistro Bohem","Black Cat","Snap",
        "Columbia Heights Coffee","Azi's Cafe","Blind Dog Cafe",
        "Le Caprice","Filter","Peregrine","Tryst","The Coupe","Big Bear Cafe"]

score = np.random.randint(0,25,len(lat))

df = pd.DataFrame({'lat':lat,'lon':lon, 'names':name, 'scores':score})

mapbox_access_token = open("mapbox_api_key.txt").read()

fig = make_subplots(
    rows=1,
    cols=2,
    specs=[[{"type": "mapbox"}, {"type": "table"}]],
    horizontal_spacing=0.1,
)

fig.add_trace(go.Scattermapbox(
    lat=df['lat'].astype(float),
    lon=df['lon'].astype(float),
    mode='markers+text',
    marker=go.scattermapbox.Marker(
        size=10,
        color=df['scores'],
        showscale=True,
        cmin=0,
        cmax=25,
        colorbar_x=0.45
    ),
    text=df['names']
),row=1, col=1)

fig.add_trace(go.Table(
    header=dict(
        values=["lat", "lon", "name"],
        fill_color="lightsteelblue",
        align="left",
    ),
    cells=dict(
        values=[df.lat.tolist(), df.lon.tolist(), df.names.tolist()],
        fill_color="white",
        align="left"
    )),
    row=1,col=2
)

fig.update_layout(
    autosize=True,
    hovermode="closest",
    mapbox=dict(
        accesstoken=mapbox_access_token,
        bearing=0,
        center=dict(lat=df.lat.astype(float).mean(), lon=df.lon.astype(float).mean()),
        pitch=0,
        zoom=11,
    ),
)

fig.show()