<p>This question should most probably be asked on <a href="https://graphicdesign.stackexchange.com/">GD.SE</a> or <a href="https://ux.stackexchange.com/">UX.SE</a>. These sites specialize in how to design the graphics and how to choose the graphics for your purpose. But since you are here basic options are:</p>

<ol>
<li>Routes dont overlap but are parallel like electronic layouts (image 1, A), Works well unless you have many overlapping things.</li>
<li>Space interleaved lines, differently colored line regions (image 1, B). Such as dashed lines, however many other interleaved shapes are possible. </li>
<li>Spatial solutions, lines on top of each other but laid over in 3d (image 1, C), Works well in isometric drawing.</li>
<li>Different line widths (image 1, D)</li>
<li>User suggested, overlay (image 1, E).</li>
<li>Same color but labels on segments (image 1, F), note not all segments need to be labeled as humans can interpolate values somewhat. This has benefit of being able to be paired with any other effect and works well with selection highlights with info intact. </li>
</ol>

<p><a href="https://i.sstatic.net/8ZfX0.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/8ZfX0.png" alt="enter image description here"></a></p>

<p><strong>Image 1</strong>: Different overlay methods.</p>

<p>Note: None, except the labeling works well when there are very many different lines as humans capability to see different colors in this kind of context as differing data is not very good (ask <a href="https://ux.stackexchange.com/">UX.SE</a>).</p>

<p>As for what is best depends. None of these are particularity hard to do in code or vector drawing application (but that is out of scope ask <a href="https://graphicdesign.stackexchange.com/">GD.SE</a>). Whichever is best for the user or the design is also not within the scope of this software (ask  <a href="https://graphicdesign.stackexchange.com/">GD.SE</a> or <a href="https://ux.stackexchange.com/">UX.SE</a>).</p>

CC BY-SA 3.0
2015-12-26T14:05:08.853Z
2015-12-26T23:34:56.133Z
2017-04-13T12:46:19.383Z
joojaa
<p>You could:</p>

<ul>
<li><p>Draw them all with different widths and make each transparent (fiddling with alpha blend to make it look nice). Or make the depth proportional to the width, so the widest is always drawn at the bottom of the pyramid. The naive implementation would suffer with many routes.</p></li>
<li><p>Not do anything special at intersections, and expect the user to infer what is going on from context.</p></li>
<li><p>"PWM" the colors of the lines, one way to do this might be to make a chessboard-like grid texture of 0's and 1's, and depending on whether there is a zero or a one where the road falls, choose the color to draw. </p></li>
<li><p>You could use the above technique for multiple line colors by further subdividing the grid with multiple colors. This would be tedious to do in a shader, but is trivial using a normal CPU image manipulation library.</p></li>
</ul>

<p>Here is a bus routing app (Transloc Rider) that does this pretty well. </p>

<p><a href="https://i.sstatic.net/LFHFj.jpg" rel="nofollow noreferrer"><img src="https://i.sstatic.net/LFHFj.jpg" alt="transloc rider"></a></p>

CC BY-SA 3.0
2015-12-26T02:28:48.480Z
2015-12-26T02:28:48.480Z
Jacob Panikulam
<p>I'm not too versed in computer graphics so my question may be vague.</p>

<p>I'm given a sequence of GPS coordinates which I draw on an iOS map, and they define bus routes. Some of the bus routes happen to share sections of certain streets however, and when multiple routes are being drawn on the map the colored line segments are just being overlapped currently.</p>

<p>I'm currently looking into computationally separating the lines from each other before drawing, but I'm not sure that will get any success. So my backup is: are there any good techniques to draw the lines in a way that somehow does not hide the lower line segments, and retains at least partially their color?</p>

<p>Again as a disclosure, I'm not very knowledgable in this area. I know from Photoshop there are different color modes on the layers that have different effects when overlapped. Would something of that sort help in this situation? Or maybe there's a way to dash the lines such that it alternates each color, but I imagine that would be fairly difficult.</p>

<p>I'm just probing around for different techniques for this problem.</p>

<rendering><shader><color><line-drawing><computational-geometry>
Best technique to draw overlapping colored line segments that follow the same route
James Linnell
# Best technique to draw overlapping colored line segments that follow the same route

(Asked by: username_0 on 2015-12-24)

I'm not too versed in computer graphics so my question may be vague.

I'm given a sequence of GPS coordinates which I draw on an iOS map, and they define bus routes. Some of the bus routes happen to share sections of certain streets however, and when multiple routes are being drawn on the map the colored line segments are just being overlapped currently.

I'm currently looking into computationally separating the lines from each other before drawing, but I'm not sure that will get any success. So my backup is: are there any good techniques to draw the lines in a way that somehow does not hide the lower line segments, and retains at least partially their color?

Again as a disclosure, I'm not very knowledgable in this area. I know from Photoshop there are different color modes on the layers that have different effects when overlapped. Would something of that sort help in this situation? Or maybe there's a way to dash the lines such that it alternates each color, but I imagine that would be fairly difficult.

I'm just probing around for different techniques for this problem.

**Tags:** rendering, shader, color, line-drawing, computational-geometry


---

## 2 answers

### Answer by username_1 on 2015-12-26. Score: 4

This question should most probably be asked on [GD.SE](https://graphicdesign.stackexchange.com/) or [UX.SE](https://ux.stackexchange.com/). These sites specialize in how to design the graphics and how to choose the graphics for your purpose. But since you are here basic options are:

1. Routes dont overlap but are parallel like electronic layouts (image 1, A), Works well unless you have many overlapping things.
2. Space interleaved lines, differently colored line regions (image 1, B). Such as dashed lines, however many other interleaved shapes are possible.
3. Spatial solutions, lines on top of each other but laid over in 3d (image 1, C), Works well in isometric drawing.
4. Different line widths (image 1, D)
5. User suggested, overlay (image 1, E).
6. Same color but labels on segments (image 1, F), note not all segments need to be labeled as humans can interpolate values somewhat. This has benefit of being able to be paired with any other effect and works well with selection highlights with info intact.

[![enter image description here](https://i.sstatic.net/8ZfX0.png)](https://i.sstatic.net/8ZfX0.png)

**Image 1**: Different overlay methods.

Note: None, except the labeling works well when there are very many different lines as humans capability to see different colors in this kind of context as differing data is not very good (ask [UX.SE](https://ux.stackexchange.com/)).

As for what is best depends. None of these are particularity hard to do in code or vector drawing application (but that is out of scope ask [GD.SE](https://graphicdesign.stackexchange.com/)). Whichever is best for the user or the design is also not within the scope of this software (ask [GD.SE](https://graphicdesign.stackexchange.com/) or [UX.SE](https://ux.stackexchange.com/)).


---

### Answer by username_2 on 2015-12-26. Score: 2

You could:

* Draw them all with different widths and make each transparent (fiddling with alpha blend to make it look nice). Or make the depth proportional to the width, so the widest is always drawn at the bottom of the pyramid. The naive implementation would suffer with many routes.
* Not do anything special at intersections, and expect the user to infer what is going on from context.
* "PWM" the colors of the lines, one way to do this might be to make a chessboard-like grid texture of 0's and 1's, and depending on whether there is a zero or a one where the road falls, choose the color to draw.
* You could use the above technique for multiple line colors by further subdividing the grid with multiple colors. This would be tedious to do in a shader, but is trivial using a normal CPU image manipulation library.

Here is a bus routing app (Transloc Rider) that does this pretty well.

[![transloc rider](https://i.sstatic.net/LFHFj.jpg)](https://i.sstatic.net/LFHFj.jpg)


---

