How to plot trajectories on a leaflet map using python?

Question

I am dealing with a data frame as shown below. x and y are the Mercator x, y coordinates of trajectories with time. Rows with same VoyageIDs are the points belonging to the same trajectory. As we can see the rows with all 0's are separating different trajectories.

        VoyageID      X             Y             Time
     27 2             -7.35857534   2.09175178     1.29471228
     28 2             -7.35863779   2.09167080     1.29471234
     29 2             -7.35882203   2.09156224     1.29471240
     30 2             -7.35908808   2.09147633     1.29471246
     31 2             -7.35941313   2.09134900     1.29471252
     32 2             -7.35970112   2.09123810     1.29471258
     33 0             0.0000000     0.0000000      0.0000000
     34 3             -7.34769342   2.09628155     1.29498270
     35 3             -7.34811254   2.09626864     1.29498282
     36 3             -7.34853711   2.09625315     1.29498288
     37 3             -7.34889255   2.09622732     1.29498294
     38 0             0.0000000     0.0000000      0.0000000
     39 4             -7.35857089   2.09176469     1.29531606
     40 4             -7.35862989   2.09169697     1.29531612
     41 4             -7.35869312   2.09162679     1.29531618
     42 4             -7.35876692   2.09158959     1.29531624
     43 0             0.0000000     0.0000000      0.0000000

I would kindly request to suggest me the best way to visualize these trajectories in the following two ways:

1. How can I plot x, y coordinates on a simple 2d line plot ?

2. How can I plot the trajectories with x,y coordinates on a leaflet map (Using Folium or any other real map) ?

Also, how do I manage the points of different trajectories (They are separated by 0's). I am new to python as well as matplotlib, so please provide me with little detailed answers if possible. Thanks in advance.

Answer 1

You could convert your dataframe to JSON format which is easily handled by any Javascript mapping library.

For instance using Pandas DataFrame.to_json method turns this dataframe:

voyage  id  x           y           time
27      2   -7.35857534 2.09175178  1.29471228
28      2   -7.35863779 2.09167080  1.29471234
29      2   -7.35882203 2.09156224  1.29471240

Into this JSON array:

[{
    "voyage": 27,
    "id": 2,
    "x": -7.35857534,
    "y": 2.09175178,
    "time": 1.29471228
}, {
    "voyage": 28,
    "id": 2,
    "x": -7.35863779,
    "y": 2.09167080,
    "time": 1.29471234
}, {
    "voyage": 29,
    "id": 2,
    "x": -7.35882203,
    "y": 2.09156224,
    "time": 1.29471240
}]

The resulting file can be loaded by Javascript and used with your mapping library like Leaflet:

// Start a new map
var map = new L.Map('leaflet', {'center': [0, 0], 'zoom': 0});

// Load file 
fetch('data.json').then(function(response) {

    // Return JSON 
    return response.json().then(function (arr) {

        // Add a line
        var line = new L.Polyline([]).addTo(map);

        // Iterate the objects in the array
        arr.forEach(function (obj) {

            // If ID is not 0
            if (obj.id) {

                // Add point to line
                line.addLatLng(obj.y, obj.x);

            // ID is 0
            } else {

                // Start new line
                line = new L.Polyline([]).addTo(map);
            }
        });
    });
});