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.

Screen capture

I appreciate every input!

2 Answers 2


I guess a stroke/color code will be useful:

enter image description here

  • 1
    Makes sense, thank you very much!
    – Hendrik
    May 8, 2019 at 6:39
  • Where have you taken the symbols/strokes from? Probably a (good) "standard" set of icons/styles has merit.
    – Pablo H
    Aug 10, 2022 at 13:25
  • Self made ;-) _
    – Danielillo
    Aug 10, 2022 at 13:45


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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.