✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
📊 Dash 2.0 is Arriving. Register here.

How to show multiple lines between the same locations

I am working on a map that plots multiple bus lines in a city using mapbox, plotly, and Dash. It happens that there are multiple bus lines between two bus stops. Now, lines between two locations are plotted on top of each other. However, I want them all to be visible. Here, you can find an example in Leaflet, that gives an indication of what I am looking for: http://bbecquet.github.io/Leaflet.PolylineOffset/examples/example_bus.html.

Is it possible to make this work in plotly and dash?

Already thank you for your help!

Thanks for writing in. Unfortunately there’s not a way to do this automatically with dash. This might be worth bringing up in the plotly.js forum (as this would be an addition to the scattermapbox trace type), but this seems like a fairly niche use case.

For a manual solution, I would recommend treating the dots (bus stops) and lines (routes) as separate traces. That way you can offset the lines however you want without worry about affecting the stops themselves.

@charleyferrari Thanks a lot for your reply. Offsetting is indeed a great idea to fix it. However, I have no idea how to do this while using scattermapbox. Is this possible? If yes, can you tell me how? Or do you recommend not using scattermapbox at all?

@ChristianneWisse by offsetting I meant just tweaking the vertices of the lines manually (by a few .001 degrees to achieve the desired offset at the desired zoom level), along with the width of the lines themselves.

Using mapbox or leaflet themselves will provide more mapping functionality (including the ability to change the shapes that display based on the zoom, in your example it looks like this wasn’t done because the circles remain the same size, and become outsized as you zoom out), but would lead to a lot more work. IMO, deciding on a few levels of zoom that make sense and manually offsetting your lines (by offsetting the vertices) would be less effort than using a JS mapping package.