Bring back route direction

[HarelM]

Feature

Bring back route direction

What I expect to happen

User should be able to identify the route direction without the need to see the route end or start point

What really happened

After #1012 fix there's no more and path and the route is static

What I did that caused the issue - step by step

1. Plan a route
2. Exit editing mode.

My environment

• Operating System and version:
• Web Browser and version:

Thing I think the developers should know, images, links etc.

Related to: #178, #868 which was used in the past and caused issues...

[HarelM]

One solution can be some gradient like the following (obviously more subtle):
https://docs.mapbox.com/mapbox-gl-js/example/line-gradient/
Another option, since mapbox-gl layer is smarter than what we had in terms of zoom sensitivity:
https://stackoverflow.com/questions/46102553/showing-direction-arrow-on-line-in-mapboxgl
https://jsfiddle.net/4jjmh2nb
animate just one point to go along a route requires CPU too unfortunately:
https://docs.mapbox.com/mapbox-gl-js/example/animate-point-along-route/
Any other thoughts are welcome.

[valleyofdawn]

The gradient color is distracting and would prevent telling different routes apart.
The occasional arrowhead might not be good enough to understand routes that cross over themselves.
I prefer the solution below, if MapBox can support it.

[HarelM]

I couldn't find a mapbox example to demonstrate this pattern so I'm doubtful it's possible, if you can find an example with this pattern feel free to link it here...

[valleyofdawn]

The current default appearance of a new route does not show the direction clearly.
The width of the route and the low contrast between the semi-transparent white and colored elements are too low to clearly show the direction of the route without looking closely.
Since the direction is more important to us than transparency I suggest in the meantime to:
Increase route opacity and width to 100% by default.

[HarelM]

100% felt a bit too strong, changed to 90%.

[valleyofdawn]

HarelM, you indicated privately that the current solution is not ideal because it covers the appearance of underlying tracks and paths.
I see 3 options to solve it:

1. Use a semi-transparent colored line and an occasional black arrow icon on it
2. Use a semi-transparent colored line and an occasional colored arrow font element on it
3. Define 10 different colored arrows in the sprite with names like "green" and "blue" and dynamically assign them based on their name.

[HarelM]

I'm getting some results, but not as good as I hoped to get:

I'm using a symbol I created (I named it arrow, it's a 32x32 png image):

and using the following properties:

            [layout]="{
                'symbol-placement': 'line',
                'icon-image': 'arrow',
                'symbol-spacing': 1,
                'icon-allow-overlap': true,
                'icon-ignore-placement': true,
                'icon-size': ['get', 'size']
           }"
           [paint]="{
                'icon-opacity': ['get', 'opacity'],
                'icon-color': ['get', 'color']
            }">

Since I was able to take this image and load it as a sdf image I can use it to create the required color.
Having said that, I can't make it look as good as I hoped since the coloring doesn't work for line-pattern and the spacing is weird...
When setting the width to low the icon just shrinks and can't be understood...
@valleyofdawn if you can create an icon and define the right size range for it that will make is look good enough let me know...

[valleyofdawn]

Can you explain what is weird about the spacing?
The icon spacing parameter cannot be set below 1, meaning that the space must be as wide as the icon at least.

[valleyofdawn]

How about a semi-transparent line and an occasional arrow of the same color?
The style "route" in our style list now attempts to do this.
BTW ""icon-allow-overlap": true" lets you control the spacing fully.

[HarelM]

The spec says that the space is in pixels, not icon size.
I have tried icon-allow-overlap without any significant improvement.
Please copy here the relevant part of the route style if you think it is an acceptable solution.

[valleyofdawn]

{
  "id": "route-arrows",
  "type": "symbol",
  "source": "IHM",
  "source-layer": "transportation",
  "filter": [
    "all",
    ["==", "$type", "LineString"],
    ["==", "class", "primary"]
  ],
  "layout": {
    "symbol-placement": "line",
    "symbol-spacing": 100,
    "icon-image": "arrowline",
    "icon-size": 0.3,
    "icon-allow-overlap": true
  },
  "paint": {"text-color": "rgba(255, 6, 6, 1)", "text-opacity": 1}
},
{
  "id": "route",
  "type": "line",
  "source": "IHM",
  "source-layer": "transportation",
  "filter": [
    "all",
    ["==", "$type", "LineString"],
    ["==", "class", "primary"]
  ],
  "layout": {"visibility": "visible"},
  "paint": {
    "line-color": "rgba(255, 248, 248, 1)",
    "line-width": 9,
    "line-opacity": 0.25
  }
}

[HarelM]

Thanks! So when the user changes the opacity both the symbol and line opacity should change and when changing width only the line width should change?

[HarelM]

P.S. Can you please upload the svg for artowline here too?

[HarelM]

This however still keeps the current issue of covering the underline map route and its color. Maybe we should use a dash array line with the arrow icons...?

[HarelM]

Final proposed solution - never change icon size or opacity, only change its color:
Use white for dark colors:

Use black for bright colors:

Use the same color for line opacity on less than 0.5:

[valleyofdawn]

I think it works better than the previous solution. Thanks.
We can presume most people won't change the default appearance (it's buried pretty deep in the interface) and it introduces totally opaque routes - covering the background trail data.
So I would change the default to 30 or 50% opacity.
While you are at it, the minimum route width is almost invisible and the max is not very wide - maybe double the thickness values?

[valleyofdawn]

Also, I think the thickness and opacity values for the routes should carry on from the last edit and not revert to default. If you want to show multiple routes with consistent appearance, it becomes a drag.

[HarelM]

I think the thickness and opacity values for the routes should carry on from the last edit

This is not related to this issue. please open a separate issue for this.

Default opacity of 30% or 50% doesn't solve the problem of seeing the color below the planned route. I'll see if making it a dash array can solve this and still look OK. If so, I'll close this issue.
@valleyofdawn Please play a bit with the opacity in the current site (which already has this fix) and let me know what default you would like.

[valleyofdawn]

25% shows the colors below well enough.
Works better with thicker routes as general visibility goes down. The dashed line should work but it also may look ugly unless the symbols and dashes are spaced equally.

[HarelM]

I'm less worried about ugliness but more worried about functionality, if it's a bit ugly but works well I prefer it rather than not working or working badly...
The following is 25% opacity, I'm not sure if it misses the point of showing the route itself as the opacity makes the route a lot less visible and you need to concentrate in order to understand where it goes...

For most colors it looks OK, brown is probably an exception:

I'll play with dashed line and see if it solves the underlying route better than low opacity and define the defaults accordingly...

[valleyofdawn]

Play with the thickness too. I'm all for "form follows function" of course, let's just make sure the solution is not overly complex and distracting.

[ronhl]

My support to raising the thickness range. Also, support valleyofdawn about saving thickness and opacity values from last edit.

[HarelM]

I'll change the width range to be 2-20 instead of 1-10.
Keeping the width and opacity is tracked here #197 and should be solved shortly.

[HarelM]

The dash array is reducing the readability of the route in general, I have decided not to use it.
I have increased the range of the line and increased the icon size according to the route width.
I have changed the default opacity to 40%, but I'm not sure this is the right number...
In any case, I'm not planning any more changes here so I'll be closing this issue.