Black Lives Matter. Please consider donating to Black Girls Code today.
Dash HoloViews is now available! Check out the docs.

Using dash with mapbox creating lines

Hi, as I’m learning Dash another question come into my way.
I’m trying to plot a map with some routes, I have a dataframe like this:
Latitude Longitude Route number Stop Number
xxx xxxx 1 1
xxx xxxx 1 2
xxx xxxx 1 3
xxx xxxx 2 1
xxx xxxx 2 2
xxx xxxx 2 3

I’m currently able to plot the dots on the map and they display the correct way using MapBox, now what I want to do is to create lines between them based on the Stop Number. Like in the table there would be a line in some color that goes from stop number 1 to 2 then 3 and another line doing the same with a differnt color for route number 2. I think a way to do this is to create layers, is this the only approach? My code looks like this taking away some parts:

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
server = app.server
app.title = 'NYC Wi-Fi Hotspots'

layout_map = dict(
    autosize=True,
    height=800,
    font=dict(color="#191A1A"),
    titlefont=dict(color="#191A1A", size=14),
    margin=dict(
        l=10,
        r=35,
        b=35,
        t=10
    ),
    hovermode="closest",
    plot_bgcolor="#fffcfc",
    paper_bgcolor="#fffcfc",
    legend=dict(font=dict(size=10), orientation="h"),
    title="BCN Map",
    mapbox=dict(
        accesstoken=mapbox_access_token,
        style="dark",
        center=dict(
            lon=2.200626,
            lat=41.442931
        ),
        zoom=10
    )
)


# GENMAP
def gen_map(data):
        return {
            "data": [
                {
                    "type": "scattermapbox",
                    "lat": list(data["Latitude"]),
                    "lon": list(data["Longitude"]),
                    "hoverinfo": "text",
                    "hovertext":[
                        [
                            """
                            Name: {}<br>
                            Type: {}<br>
                            Provider:{}
                            """.format(i, j, k)
                        ] for i, j, k in zip(data['Name'], data['Type'], data['Provider'])
                    ],
                    "mode": "markers+lines",
                    "name": list(data['Name']),
                    "marker":{
                        "size": 10,
                        "opacity": 0.7
                    }
                }
            ],
            "layout": layout_map
        }

Thanks and if you know any other api for plotting on maps that show information like MapBox it would be much apreciated

Since you want different colors, yes, you’ll need to split the data set into multiple traces. You can do this very efficiently using plotly.express - see the px.line_mapbox example about 2/3 of the way down the page which does almost exactly what you’re describing - basically gen_map would just be something like:

return px.line_mapbox(data, lat="Latitude", lon="Longitude", color="Route")

It’ll be a little more involved than that, particularly to get the layout to look exactly as you want - but px returns a Plotly.py Figure object that you can then call .update_layout on to tweak the layout back to what you have in your post - but the important thing is px takes care of splitting the data set for you based on the Route column.

Hi @alexcjohnson thanks for your reply I was able to print the routes with colors easily with plotly.express. The thing is is there any way to access the markers? I mean being able to click on them and making them bigger? I want to be able to click on a point to update a table below the graphic. Now I have a line graph but it would amazing having a line+markers plot.
Thanks a ton

The general pattern of px is that anything that draws from your dataframe goes in the px.*(...) call, and edits after that go in .update_* methods - .update_traces, .update_xaxes, .update_yaxes, .update_layout are the main ones. So here you’d want .update_traces(mode='lines+markers').

There are sometimes other args available in px, mainly if the update-afterward technique would somehow be difficult to get right.

Hi as like before thanks for your answer your help is really apreciated. Do you know where I can find documentation on this? Particulary on the update methods, the most I could find was this
https://plot.ly/python-api-reference/plotly.express.html
but I’m not able to find much on those update methods.
As always thanks

Right, the python client has a big API, and correspondingly large documentation. Plotly.express creates regular plotly.py figures, and their update methods are described in the intro section “creating and updating figures” eg https://plot.ly/python/creating-and-updating-figures/#the-update-layout-method