Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add bridge rendering #934

Draft
wants to merge 21 commits into
base: main
Choose a base branch
from
Draft

Add bridge rendering #934

wants to merge 21 commits into from

Conversation

claysmalley
Copy link
Member

Fixes #169

Bridges are given a fill extrusion just like buildings, but with a red tinge and different heights for different values of layer. The same red tinge is applied to an extra casing around linear road and rail bridge features.

Example locations

production, localhost
image

production, localhost
image

production, localhost
image

production, localhost
image

@claysmalley claysmalley added enhancement New feature or request highway-lines labels Sep 24, 2023
@wmisener
Copy link
Collaborator

Cool addition. Just to clarify, this is for rendering man_made=bridge areas only, not a halo around ways tagged bridge=yes right? Or is it both?

Copy link
Member

@1ec5 1ec5 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a nifty effect, but I’m not sure yet that it fits very well with the general aesthetic of this style. It moves us away from schematic roads toward something more skeuomorphic. I appreciate that the translucent bridge overlays are pretty much only visible at the high zoom levels where we depict roadways as 1.5D features and we want to eventually build out street-level detail. Maybe skeuomorphism won’t look so out of place eventually. However, at these zoom levels, there’s something awkwardly redundant about giving the roadway both a dark casing (the preexisting casing for all roads) and the translucent fill around that. It’s almost as if a bridge sits on top of another bridge. Is there a way to better integrate the two treatments?

Conceptually, I think the bridge areas can be very useful for masking out conflicts between roadways/railroad tracks at different levels: #169 (comment). However, I don’t think this necessarily entails depicting bridges more or less as buildings. Users are adept at inferring the physical layering across gaps, so I don’t think we really have to make it explicit by extruding the bridges.

@@ -1,6 +1,8 @@
export const backgroundFill = `hsl(30, 44%, 96%)`;
export const backgroundFillTranslucent = `hsla(30, 44%, 96%, 0.8)`;

export const bridgeFill = "hsl(0, 20%, 80%)";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This rose-colored fill easily creates an association with the red fill color on freeways. Placing this color beneath every non-freeway bridge muddles the distinction between these road classifications.


// Bridge areas
export const bridge = {
type: "fill-extrusion",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why a fill extrusion layer? Is it to avoid having to create a separate layer for each layer value? This is clever, but the downside is that, in a stack interchange, the bottommost roads get buried under layers of translucency that make it difficult to tell where roads are going. A knockout effect would also obscure the road, but it would be much cleaner; it wouldn’t sort of draw you in.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without a fill extrusion, bridges over buildings looked wonky. I'll see if the guardrail approach improves this.

image

id: "bridge_casing",
minzoom: 13,
layout: {
"line-cap": "butt",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This layer and the main road bridge layer need a line cap of square. Otherwise, the bridge area seems to extend beyond the roadway, obscuring a small segment of the roadway past either end of the bridge.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried that and it looks weirder to me:

"line-cap": "butt",
image

"line-cap": "square",
image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm, maybe just the normal bridge roadway layer then?

@1ec5
Copy link
Member

1ec5 commented Sep 25, 2023

Cool addition. Just to clarify, this is for rendering man_made=bridge areas only, not a halo around ways tagged bridge=yes right? Or is it both?

It’s both. At low zoom levels, only the casing layer tends to be visible, but at high zoom levels, the casing is still subtly visible within the bridge area.

@wmisener
Copy link
Collaborator

Just wanted to note here that @adamfranco's track PR implements a "guardrail"/casing approach to track bridges: #717 (comment). The considerations are slightly different since tracks wouldn't have a casing, but obviously I think we'd want to unify the approaches coherently.

@501Ghost
Copy link

with a red tinge

Will that become yellow for toll roads?

@claysmalley
Copy link
Member Author

claysmalley commented Sep 25, 2023

with a red tinge

Will that become yellow for toll roads?

No. My intent was to make bridges look like buildings, but slightly different. I wasn't considering changing the color of the bridge based on the tagging.

Besides, I'm leaning towards replacing this with a knockout/"guardrail" effect as above, which would make the color a moot point.

@claysmalley
Copy link
Member Author

claysmalley commented Sep 30, 2023

From #169:

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.

I much prefer this idea. I've gone ahead reimplemented bridges to be in a knockout/guardrail style. It conflicts a little with my desire for bridges to be slightly transparent at high zoom, but I managed to fudge the guardrail opacity so that it's barely noticeable under a bridge.

Example locations

production, preview, localhost
image

production, preview, localhost
image

production, preview, localhost
image

production, preview, localhost
image

@wmisener
Copy link
Collaborator

wmisener commented Oct 2, 2023

I like this effect much better. One minor note, it looks like something odd happens with the overlapping knockouts when the road/bridge curves: https://preview.ourmap.us/pr/934/#map=17.74/34.027658/-118.453153.
Screen Shot 2023-10-01 at 10 02 37 PM
In OSM, the bridge ways are glued to the bridge area. I'm guessing this is tricky, and certainly not a blocking issue.

@wmisener
Copy link
Collaborator

wmisener commented Oct 2, 2023

Also, poking around in this PR has already provided some useful layering QA opportunities 😎 . I don't know if any other style correctly layers bridge areas, nice!
roadway wrongly at layer=2, bridge area at layer=1
Screen Shot 2023-10-01 at 10 09 48 PM

bridge area at layer=1, roadway wrongly missing layer
Screen Shot 2023-10-01 at 10 10 10 PM

@claysmalley
Copy link
Member Author

One minor note, it looks like something odd happens with the overlapping knockouts when the road/bridge curves:

...

In OSM, the bridge ways are glued to the bridge area. I'm guessing this is tricky, and certainly not a blocking issue.

It is indeed tricky. I don't really have a solution for it.

@1ec5
Copy link
Member

1ec5 commented Oct 19, 2023

production, preview, localhost
image

The road casing is redundant to the bridge area. Can we deemphasize the road casing at this zoom level? In localities without separately mapped bridge areas, the bridges would be less prominent, but this could be an incentive to map bridge areas.

@claysmalley
Copy link
Member Author

The road casing is redundant to the bridge area. Can we deemphasize the road casing at this zoom level? In localities without separately mapped bridge areas, the bridges would be less prominent, but this could be an incentive to map bridge areas.

Here's my attempt. I didn't touch the opacity of expressway casing because it doesn't look good with link roads.

image

image

@1ec5
Copy link
Member

1ec5 commented Oct 21, 2023

Thanks for trying that. Unfortunately it didn’t quite turn out as clear as I had hoped. I’m starting to wonder if the knockout approach is really appropriate at zoom levels where roads are filled. Looking back at #169 (comment), I do see a pattern where maps only bother with a knockout when the road is stroked.

On this street-scale map of Chicago, only the overpasses carrying minor streets get a knockout with guardrails. Even railroad tracks (in gold on this map) don’t get a knockout, presumably because they already contrast well enough against the green freeways:

Eisenhower Expressway

This Minnesota Department of Transportation map treats a freeway as a pair of independent stroked roads (similar to what aaroads-wiki#2 does with expressways). The freeways are red but have black guardrails:

MNDOT 2019

This black-and-white map of Springfield, Ohio, does combine road casings with bridge knockouts and guardrails. It’s exquisite linework. I think the only thing keeping the casings from looking redundant is that the guardrails are guardrails – they don’t form a closed polygon:

I-70

This map of New York City is possibly the only one in my collection that tries to depict the shape of each overpass – but still not as closed polygons. It would’ve been a lot more confusing with polygons:

New York City & Long Island Street Map & Visitors Guide by American Map Corporation

@ZeLonewolf
Copy link
Member

This is a tough one, and it scratches at whether we even render these polygons. I do think we should at the highest zooms at least. I wonder if perhaps a color treatment more reminiscent of pavement might better satisfy what we're trying to show.

@ZeLonewolf
Copy link
Member

I achieved the following effect with:

export const bridgeFill = "hsl(248, 25%, 85%)";
export const bridgeBackgroundFill = "hsl(248, 25%, 36%)";

image

The slightly bluer effect seemed more pavement-y. Experimenting, I think we probably don't want this to show up until z17, otherwise it feels like too much clutter.

I'm not really a fan of how the background fill creates breaks when two adjacent bridge areas have separate levels. I tried a straight knockout effect, which looks decent on the sides but has an even more pronounced effect on the bridge joins:

image

@claysmalley
Copy link
Member Author

Bridge areas are now hidden at z<15, and the guardrail is now a knockout at z>15.

image

image

@claysmalley claysmalley marked this pull request as draft October 27, 2023 22:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request highway-lines
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Distinguish highway bridges from non-bridges
5 participants