Displaying animated GeoJSON path in Leaflet

Question

I want to do something similar to this example: http://jsfiddle.net/3v7hd2vx/36/

But instead of creating a polyline between the two points, I want to display already digitalised routes all stored in a GeoJSON file between each point.

Is this possible?

Here is what the lines GeoJSON looks like:

var lignemarrakech = {
"type": "FeatureCollection",
"name": "ligne",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "id": 0, "ligne_bus": "L1", "direction": "A", "from_st": null, "to_st": null, "ville": "MARRAKECH" }, "geometry": { "type": "LineString", "coordinates": [ [ -7.991506070410076, 31.624380871588261 ], [ -7.99177772113954, 31.62455510452893 ], [ -7.992132146977649, 31.624680377597475 ], [ -7.992359514496435, 31.624737319845583 ], [ -7.992653754814866, 31.624862592668791 ], [ -7.993295733691442, 31.625147303003317 ], [ -7.993583286729908, 31.625306740410121 ], [ -7.993921192850516, 31.62551706188404 ] ] } },
{ "type": "Feature", "properties": { "id": 1, "ligne_bus": "L1", "direction": "A", "from_st": null, "to_st": null, "ville": "MARRAKECH" }, "geometry": { "type": "LineString", "coordinates": [ [ -7.993929771507931, 31.625520494421043 ], [ -7.993921192850516, 31.62551706188404 ], [ -7.994251765813826, 31.625734485234361 ], [ -7.994613027718003, 31.625968537122866 ], [ -7.994699416434219, 31.626022034614714 ], [ -7.995311990967388, 31.626396516196305 ], [ -7.995618278233972, 31.626550320694935 ], [ -7.995971686618494, 31.626730873477591 ], [ -7.99655284707304, 31.627018419778416 ], [ -7.997188982165176, 31.627279216817595 ], [ -7.997597365187289, 31.627433019856959 ], [ -7.997800602958748, 31.627492814514493 ] ] } },
{ "type": "Feature", "properties": { "id": 2, "ligne_bus": "L1", "direction": "A", "from_st": null, "to_st": null, "ville": "MARRAKECH" }, "geometry": { "type": "LineString", "coordinates": [ [ -7.997800602958748, 31.627492814514493 ], [ -7.998131404523898, 31.627586822642048 ], [ -7.998704711458787, 31.62774731223368 ], [ -7.999246604315053, 31.627847618087841 ], [ -7.999898446446502, 31.627981359058502 ], [ -8.000487460420704, 31.628188657183067 ], [ -8.001194277189745, 31.628529695028082 ], [ -8.001987482675004, 31.628984410209988 ], [ -8.00258435016886, 31.629345505977 ], [ -8.002796395199573, 31.629499305600273 ], [ -8.002835662797853, 31.629606296492579 ], [ -8.002859223356822, 31.629659791892589 ], [ -8.002906344474757, 31.629686539581062 ], [ -8.002984879671317, 31.629726661099347 ], [ -8.00307912190719, 31.629733348017368 ], [ -8.003181217662718, 31.629726661099347 ], [ -8.003401116213087, 31.629820277908031 ], [ -8.003733858117105, 31.630010280990067 ] ] } },
{ "type": "Feature", "properties": { "id": 3, "ligne_bus": "L1", "direction": "A", "from_st": null, "to_st": null, "ville": "MARRAKECH" }, "geometry": { "type": "LineString", "coordinates": [ [ -8.00373096403864, 31.630020885037997 ], [ -8.003733858117105, 31.630010280990067 ], [ -8.004382806170089, 31.630361916166084 ], [ -8.005262400371564, 31.630843369747858 ], [ -8.007115831010383, 31.631906570913365 ], [ -8.008034692810137, 31.632428136853378 ], [ -8.008474489910872, 31.632688918726675 ], [ -8.008694388461242, 31.632815966041111 ], [ -8.009040991276375, 31.633004916540266 ], [ -8.009040991276375, 31.633004916540266 ] ] } },....

And points GeoJSON:

var station ={
"type": "FeatureCollection",
"name": "test",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },
"features": [
{ "type": "Feature", "properties": { "id": 0, "nom": "JAMAA EL FNA", "ligne": "L1", "ville": "MARRAKECH", "direction": "A" }, "geometry": { "type": "Point", "coordinates": [ -7.991506070410076, 31.624380871588261 ] } },
{ "type": "Feature", "properties": { "id": 1, "nom": "KOUTOUBIA", "ligne": "L1", "ville": "MARRAKECH", "direction": "A" }, "geometry": { "type": "Point", "coordinates": [ -7.993921192850516, 31.62551706188404 ] } },
{ "type": "Feature", "properties": { "id": 2, "nom": "HOTE DE VILLE", "ligne": "L1", "ville": "MARRAKECH", "direction": "A" }, "geometry": { "type": "Point", "coordinates": [ -7.997800602958748, 31.627492814514493 ] } },
{ "type": "Feature", "properties": { "id": 3, "nom": "R.P BERDII", "ligne": "L1", "ville": "MARRAKECH", "direction": "A" }, "geometry": { "type": "Point", "coordinates": [ -8.003733858117105, 31.630010280990067 ] } },
{ "type": "Feature", "properties": { "id": 4, "nom": "GRAND POSTE", "ligne": "L1", "ville": "MARRAKECH", "direction": "A" }, "geometry": { "type": "Point", "coordinates": [ -8.009040991276375, 31.633004916540266 ] } },
{ "type": "Feature", "properties": { "id": 5, "nom": "CAREE EDEN", "ligne": "L1", "ville": "MARRAKECH", "direction": "A" }, "geometry": { "type": "Point", "coordinates": [ -8.011327830139466, 31.634311225216251 ] } },...

Answer 1

yes that easy. for example

var paths = [geojsonArray];

var timeAnimation = 1500;
var next = 0;
var nextpnt = 0;

setInterval(function(){
  if(next<paths.length){
    var path = paths[next];
    nextpnt=0;
    var coords = path.geometry.coordinates;
    var littleTime =  parseInt(timeAnimation/coords.length);
    setInterval(function(){
     // split to coordinate array for every loop and setCoordinate polyline geometry
    nextpnt++;
    },littleTime);
  }else{
    //remove interval
  }
},timeAnimation )