Using dash with mapbox creating lines

Dash Python
1

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

2

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.

3

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

4

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.

5

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

6

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