Zürich, Fri 30 Dec 2022

Single Highway Layer

When roads are crossing vertically, for example links at a highway exit, then maps should reflect their physical ordering by painting the top most road above lower roads. Similarly, tunnels should be painted below ground roads and bridges should be painted above ground roads.

Vertically stacked bridges in Boston. Source: MassGIS 2021 Aerial Imagery.

Cartographers often choose to paint a road with a fill color and distinct outline color. For example the traditional Swiss maps use an orange fill and black outline for highways. In MapLibre you can create outlines by drawing two lines. First you draw a wider line with the outline color and then you draw on top a narrower line with the fill color. To represent tunels, ground roads, and bridges, style designers usually have 3 layer groups. In each group there are layers for the different road types such as highway=motorway or highway=primary in OpenStreetMap.

This approach works nicely for stacking tunels, ground roads, and bridges correctly. But what do you do when a bridge crosses another bridge? One obvious solution would be to duplicate the bridge layer group in a lower and an upper group. However, there are examples in the OSM database where you have up to 10 levels and more of vertical stacking. Repeating the layer groups so many times would result in an impractically large MapLibre style sheet and would probably make the rendering rather slow.

Fortunately, there is a simple solution to this: putting two lines into the vector tiles, one for the outline and one for the fill. The two lines are correctly ordered in the vector tile to represent the physical sacking (lines in vector tiles have a vertical order) and in the MapLibre style sheet one only needs to have a single layer for highways together with some data-driven styling.

Demo

https://wipfli.github.io/single-highway-layer/

Source code on GitHub.

Screenshot of the highway exit in Boston. Data source: OpenStreetMap.

The disadvantage of this method is that the tiles are bigger, though conpression methods might find the duplicated line geometries. And there are some styling options in MapLibre that do not yet support data-driven styling such as line-dasharray.