Customizable line properties of suggested routes

[apophenic-treehugger]

I suggest a visual improvement to the online routing interface.

Problem
When using the newly introduced cyclosm layer in the online router (#317 ), there are two related problems:

• It can be difficult to distinguish the route suggested by graphhopper from the blue cycle infrastructure of the basemap.
• The suggested route obscures valuable information of the basemap below ("Is the thing below the route a cycle path or a road?")

Example
Here it is hard or impossible to tell whether the route leads along a cycle track or a road.

Suggested solution
Add a few simple slidebar controls to set the line properties:

• colour
• transparency
• width
• style (solid, dashed, dotted)

The user can then change them as they deem fit.

Additionally to my suggestion, it may make sense to already set the defaults to different values when cyclosm is used as baselayer.

[ratrun]

A probably simpler solution is to define a key with which it is possible to hide the route as long as the key is pressed. Komoot uses the `m' key for this.

[karussell]

We'll not introduce a control for this but I like your idea @ratrun with the m key as it is a simple and effective solution! (and what does m mean? "mute" the route layer :) ?)

[apophenic-treehugger]

m like moooooooore basemap!

[easbar]

If someone has a suggestion how to improve the current color/style/width we could also change it instead of adding controls.

[apophenic-treehugger]

I think it's good if the line is dashed.

How about a thin dashed yellow line (somewhere around #fff176) with a semi-transparent black halo (#000000a0 or so) ?

[karussell]

A dashed line cannot be used. We already use this to show where the markers snap (#327). Furthermore IMO it would look strange.

dashed yellow line (somewhere around #fff176)

IMO it should be consistent with the color scheme we already use. And yellow does not make a good color for the route as this would be sometimes too light.

btw: we are already using a slightly transparent blue but probably this is not necessary when we let the route disappear with the 'm' key. Because transparent also means it easily disappears on the colorful map. All the maps services I just tried use no transparent color for the route. Komoot even uses a white border of the route line to highlight it further.

[apophenic-treehugger]

So what do you propose?

[karussell]

I still like the idea from @ratrun :)

IMO we cannot improve the colors etc in a manner that the road underneath is easily visible and the route does not visually "disappear", but I'm open for other suggestions.

[apophenic-treehugger]

I'm fine with whatever solution that solves the problem. Obviously, there are various ways to do this. I've tried to make constructive suggestions and they were rejected. I don't feel like I have the authority to decide this, nor do I have the skills to implement any of the solutions discussed.

[karussell]

Unfortunately I had to revert this change (#428) as it causes a problem. See #434.

[ratrun]

I'm very sorry for all the hassle. Unfortunately I'm not really familiar with react 😢. But I was able to reproduce it and I think the problem was that the map element didn't receive the focus. As the PR #428 was already closed I created a new PR: #435