Distinguish highway bridges from non-bridges

[adamfranco]

While extra casings for bridges add visual clutter, it was noted by Minh in Slack that without them it can be difficult or impossible to disambiguate between an intersection and a flyover.

If we'd like to keep bridges subtle, then maybe just a slight extra width to the casing could be added. We could potentially layer two levels of casing (widest dark bottom, then a lighter slightly narrower, both under the normal road casing) to visually offset an outer bridge line from the normal casing. This technique could be especially useful for the dark-stroke style at lower zooms.

Maybe something along these lines:

This sort of treatment could work with both case+fill style as well as stroked style and shouldn't conflict with expressway rendering.

At some point features will become too small to make differentiating bridges useful, maybe somewhere around z12

[1ec5]

Many state-scale road maps show “guardrails” similar to your mockup above, though the casing is thinner and the gap larger:

Most only show this detail when there’s a grade separation with no connecting ramps; otherwise, the interchange is generalized as a square or diamond, which is understood to be a cloverleaf, trumpet, etc.:

Some maps take a simpler approach, with just a knock-out (halo) effect but no guardrails:

Or just the guardrails but no gap:

Some maps not only show the guardrail but also depict each guardrail bending away from the roadway at either end, like in the real world:

[adamfranco]

Thanks, @1ec5 ! I guess one challenge is that our style may not have a consistent background color as roads could be layered over landcover/landuse and similar backgrounds. This probably isn't an issue if the offset between the casing and guardrail is small, but if it is large it could stand out from these background colors quite a bit. 🤔

[1ec5]

Here are some city-scale maps that surround all roads with a hairline casing, making it unnecessary to give bridges special treatment:

[adamfranco]

Ah. Good point. Hairline casings could eliminate the need for bridge distinctions, but they will be needed for the stroked style and maybe for the expressway style.

[1ec5]

I guess one challenge is that our style may not have a consistent background color as roads could be layered over landcover/landuse and similar backgrounds. This probably isn't an issue if the offset between the casing and guardrail is small, but if it is large it could stand out from these background colors quite a bit. 🤔

I wonder if that might actually be preferable to having the gap blend in with the background anyways, since that would make the guardrails harder to see. In any case, I think I’ve only seen guardrails and knockouts for road-road and road-rail separations, but not over water. In theory, we could distinguish bridges over water using seamark:type=bridge, but that isn’t tagged reliably enough.

Another possibility would be to use man_made=bridge areas as knockouts, but they would need some additional processing to determine where the guardrails would go. (Or we could render the guardrails themselves…) Unfortunately, this micromapping-based approach would be too sensitive to physical distances to be discernible when zoomed out.

[adamfranco]

Just noting that #84 is related to this bridge issue. If the change from stroke to casing is near the limit of where bridge distinctions need to be shown, then maybe we don't need to render guardrails.

Another alternative if we want to provide some distinction between bridges and intersections would be to add a light hairline casing to contrast with the dark strokes: or slightly thicker:

[zekefarwell]

We did originally have darker casing to differentiate bridges but it was only ever implemented for motorways. It must have gotten lost in a refactor at some point along with the previously dashed tunnel casing. I like the look of the guardrails better than what we had before.

The zoom level where bridges and tunnels start being differentiated is supposed to be controlled by this variable but it looks like it's currently not working properly because I'm still seeing tunnels at zoom 10 and below. Introduced in #55

https://github.com/ZeLonewolf/openstreetmap-americana/blob/9f9c76704e75ff41ffd8d8dc07a13317a566f218/style/layer/road.js#L5-L6

[1ec5]

Another alternative if we want to provide some distinction between bridges and intersections would be to add a light hairline casing to contrast with the dark strokes

I like this knockout effect a lot. It’s very intuitive against the land background. If a bridge crosses over water, would this lighter knockout still look like a bridge casing, or could it be mistaken for a causeway?

[adamfranco]

Here's the "knock-out" type of casing in background color over water:

And here's with two different gray mid-tones:

The first is certainly "cleaner" on roads, but might not work with landuse/landcover anyway.

[michaelblyons]

If there's concern about the casing for guardrails clashing with the background, can the casing have an intermediate opacity? Possibly even a gradient that is strongest against the guardrail? I don't have evidence for this in use on real maps, but it could let you use the guardrail style on non-white backgrounds.

Apologies if the technology dictates 100% opacity for casings.

[1ec5]

For the AARoads Wiki fork, I implemented a knockout effect with hairline guardrails in https://github.com/aaroads-wiki/openstreetmap-americana/pull/2#issuecomment-1732549849. I mostly got away with it because none of the roads in that fork have a casing that would look redundant to the knockout. In fact, that lack of a casing all but necessitated a knockout, as we discovered above. The knockout and guardrail look OK at high zoom levels but not that great at mid zoom levels. On the one hand, I would’ve preferred the knockout to be wider on land, but on the other hand, I really needed it to be less prominent over water, since there’s already plenty of contrast between the road and water.

[1ec5]

If there's concern about the casing for guardrails clashing with the background, can the casing have an intermediate opacity? Possibly even a gradient that is strongest against the guardrail? I don't have evidence for this in use on real maps, but it could let you use the guardrail style on non-white backgrounds.

934 takes this approach by way of a fill extrusion layer. While it avoids looking like a causeway over water or a gap in a park, it’s also a distinct bridge color that varies significantly depending on context. I think this variation adds to the map’s visual complexity rather than clearing it up.

Another possibility would be to use man_made=bridge areas as knockouts, but they would need some additional processing to determine where the guardrails would go. (Or we could render the guardrails themselves…) Unfortunately, this micromapping-based approach would be too sensitive to physical distances to be discernible when zoomed out.

A solution to this would be to compose two different knockouts per bridge: one based on the bridge area and another based on the roadway that’s always wider than the roadway. In turn, there can be two guardrail layers based on the same features. To keep the bridge area–based guardrail layer from looking like an outline, the roadway-based knockout layer can cover up the bridge area–based guardrail layer at the abutments. To avoid redundant guardrails, both guardrail layers would appear beneath both knockout layers.

[claysmalley]

I like the guardrail idea. I'll try putting that together.