The app is divided in two pages.
- The edition page which uses L.Sidebar and let the user load a gpx and edit the animation steps.
- The view page which plays an animation using L.MovingMarker
The loaded gpx file is parsed with JQuery. The animation sections are formatted in JSON.
Each animation section is shown in the sidebar.
I added an event in L.MovingMarker : when the marker moves, it fires the "move" event which is caught in gpxMotionView.js to update the following snake line.
The loaded gpx is converted to geojson to make it easier to process.