Visualisation of the state of roads on a map

Question

I am designing a website with different kind of roads for bikers. I am looking for a way to show on a Google maps overlay what the state of the roads is. What is the best practice of this?

There are a few states, although with different names, but in its simplest form:

1. High Quality roads
2. Medium Quality Roads
3. Low Quality roads
4. under construction/usable soon
5. under construction: being repaired

As you can see on the image below there are only 2 codes right now and different qualities can be shown on 1 road.

I appreciate every input!

Answer 1

I guess a stroke/color code will be useful:

Answer 2

Green-Yellow-Red

I would advocate for a colour scheme with some inherent relationship between quality levels. Ideally, you can leverage existing heuristics around how desirable a road is.

For example

• Green: High quality
• Yellow: Medium quality
• Orange: Low quality (but usable)
• Red/Red-Yellow Dashes: Unusable, but soon good
• Red: Unusable (closed)

Google Traffic Layer

This traffic map comes to mind. Green is clear. Avoid orange if practical. Red should be avoided.

Apple's Workout (Activity) app

Cyclists may also associate road quality with pace of travel. Another example, from Apple's Workout app, shows slow pace as red, and quicker pace as green. Again, better (or easier) road conditions would be in green.

In this case, stoplights and busy intersections become red. Note the canal crossing, where traffic is dense.