Give stop markers an arrow that points in the direction of travel

[aaronbrethorst]

User story

As a transit rider, I want to see which direction travel at a stop goes in (i.e. is this a northbound bus stop or a southbound bus stop), so that I can more easily figure out which stop I am need to look at.

Background

On the iOS app, we indicate the direction of travel with small arrows that stick out in cardinal and inter-cardinal directions—in other words: n, e, s, w, ne, nw, se, and sw.

Feature requirements

• [ ] Replace the current marker design (the red pins with black bus icons) with new, custom designed icons described below.

Design

I think we should be able to do everything in HTML and CSS with Font Awesome icons.

• For the bus icons we'll continue to use bus.svg (feel free to use the free-solid-svg-icons package for this if that's easier than the SVG I included.
• For the arrows, we'll use the caret-up icon from Font Awesome: https://fontawesome.com/icons/caret-up?f=classic&s=solid and rotate it as needed to correspond to the direction of travel.
• Direction of travel can be determined from the JSON data for a stop. stop.direction will give you a value like "SE", "N", etc. note: Not all stops have directions. You'll need to match on blank strings in direction and hide the arrow altogether.
• The stop badge's design should have a small border radius
• Light mode: semi-opaque white background, and a 2px dark gray border
• Dark mode: use your judgment about what will look good!

[tarunsinghofficial]

I'm interested in working on the issue.