openstreetmap / iD

🆔 The easy-to-use OpenStreetMap editor in JavaScript.
https://www.openstreetmap.org/edit?editor=id
ISC License
3.35k stars 1.2k forks source link

Boundary ways steal focus from overlapping roadways #9866

Open 1ec5 opened 1 year ago

1ec5 commented 1 year ago

URL

https://ideditor.netlify.app/#background=IndianaMap_Latest&locale=en&map=19.00/39.27267/-85.29637

How to reproduce the issue?

  1. Find a roadway that runs along a boundary or vice versa. It doesn’t matter if the two are connected or disconnected, as long as they overlap. Observe that the roadway obscures the boundary.
  2. Hover over the roadway. Observe that the inspector shows details about the boundary instead of the roadway.
  3. Click on the roadway. Observe that the boundary is now selected instead of the roadway.

Screenshot(s) or anything else?

For example, this road was built with its centerline smack-dab over the Decatur–Franklin county line. It must be connected to the boundary to ensure that it lines up exactly. Otherwise, the southbound lane might fall within Franklin County, or the northbound lane might fall within Decatur County; since either side has a different name, this would cause some confusion among mappers and end users, as it did in the past.

South County Line Road (1000 East) meets and runs along the Decatur–Franklin county line

Note that the boundary way is incorrectly tagged with admin_level=6 border_type=county boundary=administrative. Removing those tags would at least surface the white dashes, but those dashes don’t contrast well with some roadways, depending on their classification:

White dashes associated with the boundary continue northward along the pale yellow roadway

Here’s a boundary way that doesn’t have any tags on it and isn’t connected to the roadways. The lines render in the same order, with the roadway obscuring the boundary casing and the boundary dashes only barely showing through above the roadway. Yet clicking what appears to be the roadway selects the boundary member way instead:

White dashes over a yellow roadway obscuring the blue boundary casing

Users perceive this mislayered rendering as a bait-and-switch, because they see one thing and end up selecting another. If they don’t realize what’s going on, they may mistag or incorrectly split the boundary member way.

Which deployed environments do you see the issue in?

Released version at openstreetmap.org/edit, Development version at ideditor.netlify.app

What version numbers does this issue effect?

2.28.0-dev (and many versions before it)

Which browsers are you seeing this problem on?

Firefox

1ec5 commented 1 year ago

From the first example above, way 17336400 (the roadway) appears before way 134905061 (the boundary member way) in the generated SVG:

<g class="layer-touch lines">
<path d="M389.9684380367398,381.14721560664475L385.1216867528856,168.28019442036748" class="way line target target-allowed nocolor w17336400-1"></path>
<path d="M385.1216867528856,168.28019442036748L381.84080895781517,27.41157443448901" class="way line target target-allowed nocolor w17336400-2"></path>
<path d="M381.84080895781517,27.41157443448901L381.0687781524699,-5" class="way line target target-allowed nocolor w17336400-3"></path>
<path d="M400.0380947451334,473L394.81518933176994,448.0892818365246" class="way line target target-allowed nocolor w17338269-8"></path>
<path d="M394.81518933176994,448.0892818365246L391.08691910654306,413.8958689123392" class="way line target target-allowed nocolor w17338269-9"></path>
<path d="M391.08691910654306,413.8958689123392L389.9684380367398,381.14721560664475" class="way line target target-allowed nocolor w17338269-10"></path>
<path d="M387.75335195815524,473L389.9684380367398,381.14721560664475" class="way line target target-allowed nocolor w134905061-1"></path>
<path d="M389.9684380367398,381.14721560664475L385.1216867528856,168.28019442036748" class="way line target target-allowed nocolor w134905061-2"></path>
<path d="M385.1216867528856,168.28019442036748L381.84080895781517,27.41157443448901" class="way line target target-allowed nocolor w134905061-3"></path>
<path d="M381.84080895781517,27.41157443448901L381.0687781524699,-5" class="way line target target-allowed nocolor w134905061-4"></path>
<path d="M381.84080895781517,27.41157443448901L343.2532121539116,40.992779817432165" class="way line target target-allowed nocolor w867697406-1"></path>
<path d="M343.2532121539116,40.992779817432165L306.1569234505296,47.49441875889897" class="way line target target-allowed nocolor w867697406-2"></path>
<path d="M306.1569234505296,47.49441875889897L270.21639850363135,70.46686631813645" class="way line target target-allowed nocolor w867697406-3"></path>
<path d="M270.21639850363135,70.46686631813645L225.9991136714816,104.03454460017383" class="way line target target-allowed nocolor w867697406-4"></path>
<path d="M225.9991136714816,104.03454460017383L174.73539811372757,112.26993832550943" class="way line target target-allowed nocolor w867697406-5"></path>
</g>

If not for the boundary relation’s dashes, the roadway would always be selected when you click on the overlapping segment. That would at least be consistent with what the user visually perceives. Ideally, though, both the drawing order and selection would be partly based on the selected parent way (\).