Modifying Style/Size of Hover Textbox in Map

📊 Plotly Python
1

Hello everyone,

Apologies in advance if this is a basic question, this is my first time trying out Plotly.

I am trying to display a list within the textbox of the map hover as seen below:

image.jpg1077×236 73 KB

I’m wondering if there is a way to modify the textbox so that the data is displayed in a list-like format instead:

image.png602×888 77.2 KB

This is my current setup:

data = Data([
    Scattermapbox(
        lat=list(all_msgs['latitude']),
        lon=list(all_msgs['longitude']),
        mode='markers',
        #hoverinfo='text',
        marker=Marker(
            size=9 #list(msgs['msgs'])
        ),
        text=all_msgs['messages'],
    )
])
layout = Layout(
    autosize=True,
    hovermode='closest',
    mapbox=dict(
        accesstoken=mapbox_access_token,
        bearing=0,
        center=dict(
            lat=10.92,
            lon=0.07
        ),
        pitch=20,
        zoom=1
    ),
)

Thank you!

2

@feetly If I have understood you correctly, you would like to add one more point to your map such that on hover over it to be displayed a list, as in the posted image.
To perform it, insert as last point in data, the lon and lat of a point located in the part ot the map you want to be displayed the additional information.

If all_msgs['messages'] is an iterable, define the text to be displayed on hover over each point, as follows:

displayed_text=list(all_msgs['messages'])+['Weston (1807)'+'<br>Caswell County (1810)'+'<br>the next one']

Then in the Scattermapbox definition, insert:

   text=displayed_text
1 Like
3

Thank you very much for your response @empet.

I think I didn’t explain myself correctly, what I’m trying to do is to display the text in the first picture Timezone 10.0 Melbourne - 5 Nba - 4 ... etc differently.

Right now it’s a very wide rectangle with only two lines (lat, lon and text) which makes it very hard to read for someone looking at the data. I’m wondering if there is a way in which the text box can be formatted to show up like in the second picture instead.

So that instead of seeing this upon hover:

Timezone 10.0 Melbourne - 5 Nba - 4 Bulls - 3 Ok - 3 More NBA News - 3

It shows like this instead:

Timezone 10.0 Melbourne - 5 Nba - 4 Bulls - 3 Ok - 3 More NBA News - 3

4

@feetly From my previous answer you can see how to break the line of the text to be displayed. Namely, for each point in your plot define the corresponding string in a list displayed_text. If some points have attached a longer string just break it via <br>.

For example to append the information above you should write the line:

displayed_text.append('Timezone 10.0'+'<br>Melbourne - 5'+'<br>Nba - 4'+'<br>Bulls -3'+'<br>OK -3'+ '<br>More NBA News -3')
5

Oh sorry about that! Completely missed the<br>!

Thank you very much this solved it! :grin: