Last week we launched cibi.me, a bikeshare trip planner help users get a taste of life with New York’s upcoming Citi Bikes program. This is great for individuals looking to explore their bike share options, but I wondered what all of these trips would look like at city scale. Since we’ve been logging the routes planned with cibi.me, I took a stab at visualizing them en masse (and I made a Leaflet animation plug in to do it nicely).
Check out the finished version. Each green dot represents a route someone planned on cibi.me last week, starting and ending at a proposed bike share station. As the dot moves across the map, it’s re-tracing the planned route.
So, how did I make this? Here are the technical details: I’m a map geek so I turned to Leaflet. Version 1 of this map involved places all of the route lines on a map. This was mostly a jumbled mess of polylines. I then wondered if I could animate a marker along these lines instead.
Version 2 was a big improvement. I used a setInterval timer to iterate over the vertices of the route polyline and move a marker from vertex to vertex. Simple marker animation along a polyline.
But the animation was very coarse. Some very straight segments of the routes (like crossing the Williamsburg Bridge) contained very few vertices so the marker would fly over the longer segments. So for Version 3 I decided to chunk the polyline up into smaller segments so that no segment would be more than a fixed length.
This was a huge improvement, but the animation was still jittery. I’d been wanting an excuse to play with CSS3 animations so I took this opportunity to learn. Version 4 added a linear transition style to each marker icon that allowed supporting browsers smoothly animate to the next vertex.
Again, much better, but there were cases where each segment of the polyline were not equal (dividing a 90 meter segment into 20 meter segments leaves one 10 meter segment) so, since each animation was a fixed time interval, my marker would intermittently speed up along the route. Version 5 added logic to ensure that the markers moved at a constant rate regardless of the segment length. This also made chunking the polyline completely optional for supportive browsers!
Finally, near perfection!
Smooth marker animation along a polyline with graceful degradation for legacy browsers. Version 6 took all of these goodies and wrapped them up into a shiny new Leaflet plugin called AnimatedMarker. Check out the final result and explore the source code. Props to Mjumbe Poe for some marker animation math, and Kevin Webb and David Emory for the cibi.me and OTP core work.
This is my first Leaflet plugin – feedback is more than welcome! Would this be a useful addition to the Leaflet core?
b-roll is an ongoing series on the OpenPlans blog.
We’ll be giving you updates on in-progress work across our projects, straight from the floor.