Add bridge rendering #934

claysmalley · 2023-09-24T22:52:45Z

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

wmisener · 2023-09-25T05:44:56Z

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?

1ec5

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.

1ec5 · 2023-09-25T06:51:13Z

src/constants/color.js

@@ -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%)";


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.

1ec5 · 2023-09-25T06:56:12Z

src/layer/bridge.js

+
+// Bridge areas
+export const bridge = {
+  type: "fill-extrusion",


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.

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

1ec5 · 2023-09-25T07:16:39Z

src/layer/bridge.js

+  id: "bridge_casing",
+  minzoom: 13,
+  layout: {
+    "line-cap": "butt",


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.

I tried that and it looks weirder to me:

"line-cap": "butt",

"line-cap": "square",

Hm, maybe just the normal bridge roadway layer then?

1ec5 · 2023-09-25T07:26:47Z

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 · 2023-09-25T17:15:08Z

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 · 2023-09-25T23:37:45Z

with a red tinge

Will that become yellow for toll roads?

claysmalley · 2023-09-25T23:48:42Z

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 · 2023-09-30T18:54:13Z

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

wmisener · 2023-10-02T05:11:23Z

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.

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

wmisener · 2023-10-02T05:17:42Z

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

bridge area at layer=1, roadway wrongly missing layer

claysmalley · 2023-10-02T20:07:36Z

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 · 2023-10-19T05:39:16Z

production, preview, localhost

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 · 2023-10-20T23:42:02Z

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.

1ec5 · 2023-10-21T02:40:51Z

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:

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:

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:

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 · 2023-10-24T01:22:48Z

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 · 2023-10-24T01:43:13Z

I achieved the following effect with:

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

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:

claysmalley · 2023-10-26T13:44:59Z

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

add bridge rendering

5d5d643

claysmalley added enhancement New feature or request highway-lines labels Sep 24, 2023

1ec5 mentioned this pull request Sep 25, 2023

Distinguish highway bridges from non-bridges #169

Open

1ec5 reviewed Sep 25, 2023

View reviewed changes

ZeLonewolf and others added 2 commits September 26, 2023 20:40

Merge branch 'main' into clay-bridge-areas

e8c2a9e

change bridge color and add guardrail

dad7da7

change bridge outline to separate layer

13b51fc

ZeLonewolf and others added 5 commits October 3, 2023 20:36

Merge branch 'main' into clay-bridge-areas

8992147

Merge branch 'main' into clay-bridge-areas

7a9fba2

Merge branch 'main' into clay-bridge-areas

a27d6a3

Merge branch 'main' into clay-bridge-areas

e1b258c

Merge branch 'main' into clay-bridge-areas

089bddb

Merge branch 'main' into clay-bridge-areas

55ec1c3

de-emphasize road casing on bridges at high zoom

62dfc89

claysmalley and others added 3 commits October 21, 2023 16:31

undo road casing opacity change

0f36c5c

Merge branch 'main' into clay-bridge-areas

7091942

Merge branch 'main' into clay-bridge-areas

05049a3

claysmalley added 3 commits October 24, 2023 19:28

Merge branch 'main' into clay-bridge-areas

aab8f3f

Merge branch 'main' into clay-bridge-areas

ef34e68

change bridge outline to knockout at high zoom

80c9688

claysmalley marked this pull request as draft October 27, 2023 22:06

claysmalley and others added 4 commits October 29, 2023 14:38

Merge branch 'main' into clay-bridge-areas

5ca7325

Merge branch 'main' into clay-bridge-areas

49fa8e8

factor out width expression

483ad6f

Merge branch 'main' into clay-bridge-areas

e359c4f

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add bridge rendering #934

Add bridge rendering #934

claysmalley commented Sep 24, 2023

wmisener commented Sep 25, 2023

1ec5 left a comment •

edited

Loading

1ec5 Sep 25, 2023

1ec5 Sep 25, 2023

claysmalley Sep 25, 2023

1ec5 Sep 25, 2023

claysmalley Sep 25, 2023

1ec5 Sep 25, 2023

1ec5 commented Sep 25, 2023

wmisener commented Sep 25, 2023

501Ghost commented Sep 25, 2023

claysmalley commented Sep 25, 2023 •

edited

Loading

claysmalley commented Sep 30, 2023 •

edited

Loading

wmisener commented Oct 2, 2023

wmisener commented Oct 2, 2023

claysmalley commented Oct 2, 2023

1ec5 commented Oct 19, 2023

claysmalley commented Oct 20, 2023

1ec5 commented Oct 21, 2023

ZeLonewolf commented Oct 24, 2023

ZeLonewolf commented Oct 24, 2023

claysmalley commented Oct 26, 2023

Add bridge rendering #934

Are you sure you want to change the base?

Add bridge rendering #934

Conversation

claysmalley commented Sep 24, 2023

Example locations

wmisener commented Sep 25, 2023

1ec5 left a comment • edited Loading

Choose a reason for hiding this comment

1ec5 Sep 25, 2023

Choose a reason for hiding this comment

1ec5 Sep 25, 2023

Choose a reason for hiding this comment

claysmalley Sep 25, 2023

Choose a reason for hiding this comment

1ec5 Sep 25, 2023

Choose a reason for hiding this comment

claysmalley Sep 25, 2023

Choose a reason for hiding this comment

1ec5 Sep 25, 2023

Choose a reason for hiding this comment

1ec5 commented Sep 25, 2023

wmisener commented Sep 25, 2023

501Ghost commented Sep 25, 2023

claysmalley commented Sep 25, 2023 • edited Loading

claysmalley commented Sep 30, 2023 • edited Loading

Example locations

wmisener commented Oct 2, 2023

wmisener commented Oct 2, 2023

claysmalley commented Oct 2, 2023

1ec5 commented Oct 19, 2023

claysmalley commented Oct 20, 2023

1ec5 commented Oct 21, 2023

ZeLonewolf commented Oct 24, 2023

ZeLonewolf commented Oct 24, 2023

claysmalley commented Oct 26, 2023

1ec5 left a comment •

edited

Loading

claysmalley commented Sep 25, 2023 •

edited

Loading

claysmalley commented Sep 30, 2023 •

edited

Loading