Linking Scattermapbox Lines to other data with callbacks

Dash Python
1

Currently the data provided by the callback from a scattermapbox line is

{
  "points": [
    {
      "lat": 43.6464730064524,
      "curveNumber": 2,
      "lon": -79.4037543398975,
      "pointNumber": 28,
      "customdata": 'w'
    }
   ]
 }

I’m trying to link a given line to other data on a chart, so want to link line_ids, whatever they might be, to other data. Is there a way to get the curveNumber when creating the line?

I noticed the customdata parameter, but ran into some fun roadblocks when trying to use it. Namely that customdata is being treated as an array from which each item is assigned to a given point on the line. I’ve figured out a workaround to assign the same id to any point on a given line, but was wondering if there was something more streamlined.

I would also like to raise an appeal for maps of lines being treated as actual lines rather than collections of points. It seems like the callbacks are only firing above the component points, rather than over the line itself, which is confusing to an end user.

2

This is just the index of the trace in data. So,

Graph(
    figure={
        'data': [
            {'lat': [1, 2, 3], 'lon': [3, 1, 2], 'name': 'first line'},
            {'lat': [1, 2, 3], 'lon': [4, 5, 6], 'name': 'second line'}]
    }
)

in this case, if curveNumber is 0, then that refers to the first line object (with the name ‘first line’).

That’s a good idea. I just created an issue in the plotly.js repo about it: Hover events on the lines themselves · Issue #1960 · plotly/plotly.js · GitHub

3

Oh that’s logical. I’ll use that then.

Great! Thanks

1 Like
4

Related question:
I take it layers loaded as go.Layout(mapbox=dict(source='data.geojson')) wouldn’t fire callbacks (ref)?

1 Like
5

@rad - That’s correct. mapbox layers are tied into the plotly.js event system yet. You can create an issue in https://github.com/plotly/plotly.js if you would like to see that added.

1 Like
6

Done. I linked it to the feature request you created earlier in this thread because, for me, they’re related.

1 Like
7

Seeing that the issue 1960 is still open ( https://github.com/plotly/plotly.js/issues/1960 ), I was wondering if any progress has been made on this topic or if an alternative has been found.

I am working on an app about aviation traffic flows that renders many lines, but unfortunately the user cannot get information for a specific line easily.

An idea I had as a workaround was to compute and draw some invisible markers behind the lines (which are shortest paths on Earth) and link custom data to these markers, so that it appears for the user to just hover a line.

Still, the performance is not so good and hovering when zooming on the lines becomes impossible again (as the number of invisible markers is not infinite).

Attached is an example of the app prototype.flows

Thanks in advance for your help :grinning:

8

One option would be to draw the lines using the GeoJSON component of dash-leaflet. You would then be able to get the feature data, i.e. the line info, on hover (or click). Similar to this example,

http://dash-leaflet.herokuapp.com/#choropleth_us

9

Thanks @Emil, dash-leaflet seems to be a must-have for map plots :slightly_smiling_face:

After some research it seems that Leaflet.Geodesic plugin for Leaflet suits perfectly my needs for plotting the world flows : is there any plan to include this plug-in into dash-leaflet any time soon ?

Cheers

10

Thanks! I haven’t thought about adding this functionality before, but it might be an option. But i guess you could achieve the same thing simply by calculating the geodesic curves in python from your points, and then plot the curves using the PolyLine or GeoJSON components?

2 Likes
11

I’ll definitely try that one !

If I wanted to reproduce geodesic curves with PolyLine or GeoJSON components, I would have to compute many components to get a smooth line which would appear as a true geodesic (for example from New York to Sidney, which is a very long geodesic).

I will try that and post here an update if that works well, or if computing many PolyLine or GeoJSON components will come with degraded perfs and/or problems with hovering infos management.