Side indicators on the map for directionalCombos

[tordans]

A take to resolve #11950

Note

This is a draft PR meant to discuss styling and interaction.
The code is generated and checked only a litte; not reviewed yet and not meant to be reviewed.

---

Right now, it is quite hard to add and review direction input fields on the map. One has to find the small arrow – that is sometimes hidden below the label name – and then extrapolate the left|right side based on that.

The idea of this change is, to give a visual indicator on the map when using the specific side.

There are a few cases out there that use a similar style…

• https://github.com/zlant/parking-lanes
• https://a-b-street.github.io/speedwalk

Example Screenshot from Speedwalk

But this solution suggests to only show the side that we are selecting ATM and only when we are working on this specific field/row.

---

Blue arrows

The idea is to reuse the color we use for the newly added helper lines from #11774

Red arrow

The idea here is to re-use the red color that we use for the "high is highlighted" and just add a "we look at this direction for this field" icon.

Red select indicator (and label)

The idea here is to reuse the selection indicator below the line and move it to be bigger on the side that we indicate. (Ideally this would still show on the "other" side and just make the indicator side larger; here it moves.)

This also shows how we might show the key+value as an additional label. (This is not fleshed out, yet…)

Other options?

#10303 does something with side, but there is no style we can reuse here, IMO. Other than using the gray color, maybe. But I don't think this will help here. We use the gray indicators for things that are visible on the map all the time; the blue and red is for things that happen on indicator.

---

The Code will handle forward|backward as well by translating it to rigth|left. Does this sound right and what field could we test this on? https://github.com/openstreetmap/iD/pull/12099/changes#diff-4fa4b7fd7b8bbe73f21424cef0b08d14b77f072153d2f744c5728e47f1585569R33-R36

[matkoniecz]

Thanks for looking into it!

My thoughts: in the first and second option these markings seems a bit detached from way itself. Not entirely sure how intuitive it will be.

In the third option these overlaps between segments are a bit annoying, but overall I really, really like on-the-map view.
For label - it probably should be translated label, not raw tag.
For sidedness indicator in tag menu: this red background sadly looks like an error indicator.

[tordans]

Either as a follow up or as part of this PR I would like to add a similar logic to the forward/backward fields, eg direction=forward|backward, *:direction=forward|backward

[tordans]

Quick notes from a talk with @tyrasd at a meetup:

• First one one best
• Remove forward|backward logic; not used ATM and complex so only apply to left|right