openstreetmap-americana
openstreetmap-americana copied to clipboard
ZeLonewolf
Add bridge rendering
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
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?
Cool addition. Just to clarify, this is for rendering
man_made=bridgeareas only, not a halo around ways taggedbridge=yesright? 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.
Just wanted to note here that @adamfranco's track PR implements a "guardrail"/casing approach to track bridges: https://github.com/ZeLonewolf/openstreetmap-americana/pull/717#issuecomment-1416502830. The considerations are slightly different since tracks wouldn't have a casing, but obviously I think we'd want to unify the approaches coherently.
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.
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
production, preview, localhost
production, preview, localhost
production, preview, localhost
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.
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
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.
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.
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.
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 https://github.com/ZeLonewolf/openstreetmap-americana/issues/169#issuecomment-1043669724, 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:
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.
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:
Bridge areas are now hidden at z<15, and the guardrail is now a knockout at z>15.