Station marker UX tweaks

[roata]

At the moment the station markers are displayed in a way that clutters the screen and makes it less informative:

What we need:

1. show smaller markers when we're zoomed out
2. make them bigger after a certain zoom level has been reached
3. change the marker icon to something minimalist

The thresholds and sizes have to be determined empirically. Not showing stations at all until a certain zoom level is set might be a good idea too.

[roata]

This is an RFC, let's discuss it before committing to implementing this in code.

There are three levels of granularity:

1. high-level - this is a bird's eye view, this only gives a rough idea of where the stations are
2. medium
3. low-level

Icons
The station icon should be a circle in the medium and low-level views:

And a dot in the high-level view:

At some point we might get a slick icon, if the branding issue is handled professionally by artists: #67. Therefore, the implementation must not be tightly coupled to the idea of a dot and a circle, but allow any SVG graphic to be loaded.

Mock-ups
The high-level view:

Medium:

Low-level:

Rationale
The station icons are there to provide quick answers to the following questions:

• what is the nearest station? (when the user clicked on "show my location")
• how many stations are between points X and Y? (e.g. when sending instructions to a friend, "get off at the 3rd station")

Future prospects

• Station markers will be clickable, the popup will display
  • a list of ETAs for that particular point
  • accessibility info (whether the station has ramps or elevators)
  • list of all routes that go through it
• At a low-level zoom, write the station name underneath the marker in big letters

[ralienpp]

A proof of concept (using the standard LeafletJS) is available at https://github.com/roataway/examples/tree/master/javascript-websocket-leaflet

[roata]

An acceptable alternative is to rely on clustering: https://github.com/yuzhva/react-leaflet-markercluster