Added a new frontend feature that will smoothly slide a shuttle to its destination, rather than immediately updating its position. This feature can be enabled/disabled from the Shuttle Tracker settings page.
How was this accomplished?
This feature makes use of the leaflet.marker.slideto plugin, which has been added to the project dependencies.
When a shuttle receives an update (calls to setLatLng(lat, lng) and setHeading(heading)), the destination point and the heading will be captured. The closest point on the shuttle's route and the closest point to the shuttle's destination will then be calculated. If the shuttle appears to be on its route (the closest point on its route is less than 100 meters away), the shuttle sliding animation will begin. This animation will slide the shuttle from point to point on its route, updating the shuttle angle based on the angle between the marker and the last route point, until the closest point to the destination is reached. The shuttle then slides to the destination point from the setLatLng call, and the heading from the setHeading call is set. The closest point to the destination becomes the closest point to the shuttle to save on calculations for the next animation.
The entire shuttle sliding animation takes 3 seconds, although this can be tweaked easily. The shuttle's velocity stays constant through the entire animation; the duration of each animation segment (the shuttle sliding from one point to the next point) is calculated as the ratio of point-to-next-point distance to the total point-to-point transition distance.
Is This Related to An Issue? (link if applicable):
Do not merge until tested
What is changed/New?
Added a new frontend feature that will smoothly slide a shuttle to its destination, rather than immediately updating its position. This feature can be enabled/disabled from the Shuttle Tracker settings page.
How was this accomplished?
This feature makes use of the leaflet.marker.slideto plugin, which has been added to the project dependencies.
When a shuttle receives an update (calls to
setLatLng(lat, lng)andsetHeading(heading)), the destination point and the heading will be captured. The closest point on the shuttle's route and the closest point to the shuttle's destination will then be calculated. If the shuttle appears to be on its route (the closest point on its route is less than 100 meters away), the shuttle sliding animation will begin. This animation will slide the shuttle from point to point on its route, updating the shuttle angle based on the angle between the marker and the last route point, until the closest point to the destination is reached. The shuttle then slides to the destination point from thesetLatLngcall, and the heading from thesetHeadingcall is set. The closest point to the destination becomes the closest point to the shuttle to save on calculations for the next animation.The entire shuttle sliding animation takes 3 seconds, although this can be tweaked easily. The shuttle's velocity stays constant through the entire animation; the duration of each animation segment (the shuttle sliding from one point to the next point) is calculated as the ratio of point-to-next-point distance to the total point-to-point transition distance.
Is This Related to An Issue? (link if applicable):
N/A
Additional Notes:
N/A