/ angular

Trip Replay Using Leaflet.js and Mapbox

Replaying an action is one of the more popular use cases HyperTrack developers have. It unlocks a new dimension (literally) of visibility that static polylines and markers fail to provide.

Just as we open sourced time-aware-polyline developed at HyperTrack (more about it here) we thought it might be useful to take it a step further and open source a library for any developer to build replays. This library takes an encodedTimeAwarepolyline and a callback function to handle map rendering on each tick.

This library is designed to work out of the box with leaflet.js an open source library developed by Mapbox that we extensively use. Leaflet was as a huge relief after having toiled with Google Maps for map visualizations. I found leaflet to be more developer friendly and pleasure to work with compared to the Google Maps javascript library. Moreover Mapbox studio a map styling engine gives us an exhaustive interface to style and tweak our map view. Now we can endlessly customize our map styling to fit our liking.

Our leaflet-utils library exposes a global variable ht which has a class replay . This class is instantiated with encodedpolyline and a callback function which passed head object is passed as an argument which is used to render a marker on the map. Some of the other useful function exposed by the replay class are replay.play()``replay.pause()``replay.stop(). Refer to the readme for more details.

A working example of the library can be found here. To see the replay in action checkout our demo dashboard. You can also view your user’s location data in this dashboard for FREE by signing up with HyperTrack and plugging our SDK into your app within minutes. To view replays you would need to create actions in order to view replays. There is a free test mode to try it out before you take it to production.