I need to show the shortest distance among other distances on a map for a given point.

enter image description here

I was thinking of a shading of colors from green to red but there are too much lines displayed (it will always be that number (~13-15 lines) ).

I will add a board to summarize these distances but I need to give a good idea indicator with the map only).

Do you think I have to put in green the shortest distance and in red the longest distance, and the others in green, or do you have another solution?

  • You'll want to consider red-green color blindness, too. – Ken Mohnkern Apr 6 '16 at 13:52

Did you take a look at how Google maps shows their shortest path?

enter image description here

The shortest path is highlighted with a strong color and the other options in a less prominent color (grey on Google maps).

Also an indicator shows how long each path will take to reach the destination.

When adding colors just make sure you choose colors and a thickness that will make both types of lines stands out from the rest of the map.

  • You're so right ! I based all of my ux on google maps ux and here maps ux, and didn't think of them for that function... I don't know why I wanted colors so much... As a gift for your help, take a look and laugh at my new jamaican map imgur.com/gHYM6on :-) Thanks ! – So4ne Apr 6 '16 at 11:21

Assuming that you only want to show distances in a straight line from a single point (I don't think airplanes fly the same way as crows do), I think the most informative way to display this would be using circles (or arcs) that radiate from your point of origin. It is difficult to compare the lengths of lines when they are branching out in different directions, so by drawing a circle it gives you a much easier way to compare between different lines.

Then you can apply the visual styling suggested by @nuwa to indicate the shortest path, and maybe even do some graduation in colour intensity until you get to the longest or furtherest path.

But in the first instance, think about how to present the information logically, then think about enhancing it visually, not the other way around!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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