Plotly: auto room in/out to the suitable region when plotting points and lines on the map

Question

What is the right way to auto-adjust the display showing the right range of map:

this is the current display, I could barely see the real part of the plotting:

the ideal display:

below is the code.

import plotly.graph_objects as go
import plotly.io as pio
import plotly

lon1 = [113.076843,113.154191,113.737213,113.842405,114.244183]
lat1 = [23.10993,23.218533,23.047626,22.987975,22.601581]

lon2 = [113.364738, 113.664108,113.661705,114.244183]
lat2 = [22.997112,22.878038,22.869216,22.601581]

lon_trip1 = lon1
lat_trip1 = lat1

lon_trip2 = lon2
lat_trip2 = lat2

fig = go.Figure()
fig.add_trace(go.Scattermapbox(
        mode="markers+lines",
        lon=lon_trip1,
        lat=lat_trip1,
        name="trip1",
        marker={'size': 10}))
fig.add_trace(go.Scattermapbox(
        mode="markers+lines",
        lon=lon_trip2,
        lat=lat_trip2,
        name="trip2",
        marker={'size': 10}))

fig.update_layout(
        margin={'l': 113, 't': 24, 'b': 22, 'r': 115},
            autosize=True,
        mapbox={
            # 'center': {'lon': 10, 'lat': 10},
            # 'autosize'=True,
            'style': "stamen-terrain",
            # 'center': {'lon': -20, 'lat': -20},
            # 'zoom': 1
        })

pio.write_image(fig,'C:/Users/user/Desktop/test.png',width=1980, height=1080)
plotly.offline.plot(fig, filename='C:/Users/user/Desktop/plot' + '.html')
fig.show()

r-beginners · Accepted Answer · 2021-12-05T08:42:10.807

3

To automatically set the center position when using a map box, you need a special method. I have modified your code with an example from the official reference. The latitude and longitude of the center is set appropriately, so please correct it.

import plotly.graph_objects as go
import plotly.io as pio 
import plotly

lon1 = [113.076843, 113.154191, 113.737213, 113.842405, 114.244183 ]
lat1 = [23.10993, 23.218533, 23.047626, 22.987975, 22.601581 ]

lon2 = [113.364738, 113.664108, 113.661705,114.244183]
lat2 = [22.997112, 22.878038, 22.869216, 22.601581 ]

lon_trip1 = lon1
lat_trip1 = lat1

lon_trip2 = lon2
lat_trip2 = lat2

fig = go.Figure()
fig.add_trace(go.Scattermapbox(
    mode="markers+lines",
    lon=lon_trip1,
    lat=lat_trip1,
    name="trip1", marker={'size': 10}))

fig.add_trace(
    go.Scattermapbox(
        mode="markers+lines",
        lon=lon_trip2,
        lat=lat_trip2,
        name="trip2",
        marker={'size': 10}))

fig.update_layout(
    margin={'l': 113, 't': 24, 'b': 22, 'r': 115},
    mapbox=dict(style='carto-positron',
                center=go.layout.mapbox.Center(lon=113.664, lat=22.878),
                pitch=0,
                zoom=8)
)

fig.add_annotation(x=lat2[0],
                   xref='x',
                   y=lon2[0],
                   yref='y',
                   text="DAZHEN'GANG",
                   font=dict(color='blue', size=20))

pio.write_image(fig,'./data/plotly_choropleth.png',width=1980, height=1080)
#plotly.offline.plot(fig, filename='C:/Users/user/Desktop/plot' + '.html')
fig.show()

edited Dec 05 '21 at 08:42

answered Dec 05 '21 at 03:42

r-beginners

31,170
3
14
32

thank you. could you also advise how to add text inside each node? e.g. numbers like 1,2,3. And how to make the line style as arrow line – Jack Dec 05 '21 at 07:25
and also, can I change the map background style similiar to the white and gray color like Tableau – Jack Dec 05 '21 at 07:30
Text can be added using `add_annotation()`. You can use latitude and longitude as they are, with `x`,`y` as the coordinate reference. The map type can be changed in the style, so I changed it to white gray. Finally, the addition of arrows does not seem to be a function of the map box scatter plot. So you will have to add them manually using `add_annotation()`. – r-beginners Dec 05 '21 at 08:48
Thanks a lot. It seems annotation() wont be boundle with the node as I move the map. I have followed this method: https://stackoverflow.com/questions/62240079/plotly-scattermapbox-is-there-a-way-to-include-some-text-above-and-below-the-ma However, it seems not working at all. – Jack Dec 05 '21 at 09:05
Also, it there a way to auto change the map language to the local language like google map? thanks a lot again – Jack Dec 05 '21 at 09:06
We have confirmed that the text does not follow the placement position when the map is panned. Checking the content of the link you showed, I see that this can be achieved with a data frame. I learned this the hard way. Please refer to my [Colab](https://colab.research.google.com/drive/1bKas5QCNAQXkh-PaNKEFW6Vf-fzyy3RL?usp=sharing). – r-beginners Dec 05 '21 at 09:31
I will check if it is possible to set the language display for the map box. – r-beginners Dec 05 '21 at 09:32
I looked it up and found [this information](https://community.plotly.com/t/how-to-change-mapbox-language/42056). – r-beginners Dec 05 '21 at 09:58
I looked into the web and I have no idea how to do... I want to something like this: https://stackoverflow.com/questions/66781308/add-marker-with-text-on-mapbox – Jack Dec 05 '21 at 11:01
@Colab thank you. I am going to take a look. you mean the text must be passed into the arg in terms of dataframe? – Jack Dec 05 '21 at 11:07
If arrows are required, I think we will have to use `add_annotation()`. I have found that text annotations can be handled if they are included in the data frame. That's about all I can answer; I'll remove Colab now that you've confirmed it. – r-beginners Dec 05 '21 at 12:20
thanks, I will try it tomorrow. one more help please, could you look at this issue:https://stackoverflow.com/questions/68992015/matplotlib-3d-plot-set-right-aspect-ratio and see if you could help. I am not sure how plotly could support plotting such graph. – Jack Dec 05 '21 at 17:11
The example in this link is a 3D graph using matplotlib, but I'm not sure how it relates to your issue right now. if you want to do something similar with plotly, please refer to the [official reference](https://plotly.com/python/3d-charts/). – r-beginners Dec 06 '21 at 02:59
Dear r-beginners, would you mind help provide an answer to that post? – Jack Dec 06 '21 at 08:53
I have tried adding arrow but it is not easy. besides using add_annotation(), do we have any other simpler way? is there a built-in function to allow drawing directed graph which is very baisc need. – Jack Dec 06 '21 at 08:55
As your key issue now is to add arrows to the lines, I tried adding add_annotation() in Colab in the previous link, but the arrows stayed in a fixed position for zooming and panning. I found an example of [this](https://stackoverflow.com/questions/70072898/how-to-create-a-symbol-button-on-a-plotly-choropleth-map) and another library, [folium](https://stackoverflow.com/questions/69348735/plot-heading-direction-with-folium-onto-an-object), which I will share. – r-beginners Dec 06 '21 at 12:47
the arrows stayed in a fixed position-- this is not ideal as user will try to zoom in/out – Jack Dec 06 '21 at 14:36

Plotly: auto room in/out to the suitable region when plotting points and lines on the map

1 Answers1