Wednesday, June 8, 2016

Rendering transit itineraries in Maps

Since last time, I've spent some time polishing up the rendering of transit itineraries a bit.

In this example, there are some routes with not that many legs, in this case we show the full route name (the route name can typically be a bit longer for i.e. trains).
Also, as you can see the route labels are now rendered with rectangles with nice rounded corners (when thinking about such "roundrects", I always remember this story: Round Rects are Everywhere ).
I had to dive into Cairo rendering to do this, as I couldn't find an easy way to do this with CSS styling (maybe it would have been possible to override the CSS provider somehow), but fortunately Cairo is accessible from JS, so I didn't have to involve C… :-)

The next screenshot shows some itineraries with many "legs", in this case the route labels have been omitted (but the information will of course be available when examining a specific itinerary).

Here we can see another case where some of the route labels have been "condensed", showing the operator name instead of the full route name (for the trains in this example).

In the following screenshot there's some routes with white as the route color, in this case (when the luminosity of color is above a certain threshold), a black outline is drawn around the route label to pronounce it a bit more.

And some itineraries in Brussels again… Also, the route label code has some contrast-checking safe-guard code, that should ensure good contrast, should some data feed contain bogus data.

And when "diving in" to an itinerary it will show the steps and transfers. Still missing is expand these steps to show intermediate stops passed in an itinerary leg, or directions for walking in those cases. Also, the path rendered on the map is still hard-coded to the first one found, it should be updated as the user views a specific itinerary. And yes, the positioning of the headsign labels are a bit off (right before preparing screenshots for this post, I saw that in some case the route label was truncated, so I tried mitigate that, but the result is not optimal so stay tuned).

And lastly, I added some animations for options toolbar GtkRevealer and the stack switching between the itinerary overview and "diving in" on an itinerary. So this prompts for a video:

So, that's it for today.

No comments:

Post a Comment