Concurrent highway shields

[ZeLonewolf]

For roads which share multiple routes, it is desirable to show grouped shields at higher zooms. This is consistent with highway shield groupings on American road signs.

Real-world examples of group signs:

Depends on #5

[1ec5]

Post-processing code would need to either split the way ref on semicolons or collect the network/ref combinations of the route relations that the way is a member of. (I’m glossing over a lot here.) Either way, the data needs to end up in a structured form, probably as separate network_n and ref_n columns. Ideally it would be just a single hstore column, but unfortunately the MVT format doesn’t support embedding arrays or objects in a feature property.

Achieving a grid-like layout in the Mapbox Style Specification language may be difficult:

• The stylesheet could have multiple line-placed symbol layers, one per shield, with text-offset and icon-offset properties to keep the shields from running into each other, but it’ll be tricky to code up all the possible combinations and offsets given different shield counts and widths.
• The stylesheet could have a line-placed symbol layer with text-field set to a formatted expression that contains each of the icons, plus an identical layer with text-field set to an identical expression that contains text instead of icons, but how to make the text line up with the icons? It would be easier if there were a way to superimpose text onto an icon directly inside a formatted expression.
• The webpage embedding the map could be responsible for using the runtime styling API to composite numbers onto shields on the fly, but that could be quite a rabbit hole.

The existing shield renderers display concurrent route shields in a grid either out of convenience or because it looks similar to sign assemblies on the road. However, it leads to ambiguities:

In my opinion, it’s also unsightly to have two shields hanging off a north–south bridge:

In my opinion, the shields should be strung out along the line instead of grouped into a horizontal row or cluster. This is the approach both Google Maps and Apple Maps take, though they’re pretty inconsistent about it.

Another possibility is to combine shields. Conventionally, American paper maps combine concurrent routes of the same network into a single shield with two or three numbers stacked vertically:

The Mapbox Streets source also combines shields, but it does so with an interpunct instead of a line break because originally Mapbox GL couldn’t handle line breaks in text labels: mapbox/mapbox-gl-js#955. This leads to unsightly, extra-wide Interstate shields (though the wide U.S. Route shields do look kind of snazzy):

[ZeLonewolf]

The current behavior of OpenMapTiles will display both shields along a route, however, these shields are not grouped together.

[ZeLonewolf]

The following render samples show an initial implementation of grouped highway shields, in which the shields are placed along the route.

The vector tile implementation for these samples is based on a custom OpenMapTiles implementation of exposed route concurrencies, as described in openmaptiles/openmaptiles#1128

The styling is done with a formatted expression, which generates composite image IDs based on the route network and ref:

   "text-field": [
      "format",
      ["image", ["concat", "shield_", ["get", "route_1"]]],
      " ",
      ["image", ["concat", "shield_", ["get", "route_2"]]],
      " ",
      ["image", ["concat", "shield_", ["get", "route_3"]]],
      " ",
      ["image", ["concat", "shield_", ["get", "route_4"]]],
      " ",
      ["image", ["concat", "shield_", ["get", "route_5"]]],
      " ",
      ["image", ["concat", "shield_", ["get", "route_6"]]],
      " ",
    ],

Lastly, a styleimagemissing listener is hooked up, which ingests the image IDs and generates the shield imagery in javascript.

Additional work is needed on the renderer side in order to get images in the formatted expression to be viewport-aligned rather than LineString-aligned.

[danieldegroot2]

just fyi, at https://zelonewolf.github.io/openstreetmap-americana/#map=10.83/39.9769/-78.2036/27.2/6
Appalachian Trail map; On Pensylvannia Turnpike, NPS' strip map has 70-76 (and to the right, 40-68) grouped vertically

(source: https://rhodesmill.org/thefox/maps.html - is: https://rhodesmill.org/thefox/maps/at3.jpg , left-center)

[ZeLonewolf]

It is an occasional technique used for expressing concurrencies. However, after research into the different methods used in American cartography, we settled on the snake pattern style.