Performance issues due to too many layers

[claysmalley]

The current method of styling highways relies on nearly 800 layers. This causes my CPU to run hot, and on some devices (Chrome 101 on Pixel 4a Android 12, as reported by @jleedev) the webpage often crashes because it runs out of memory.

From @zekefarwell:

The model of adding a new layer for every differently styled object type is not sustainable. The time has come for a major refactor to data driven styling
https://maplibre.org/maplibre-gl-js-docs/style-spec/expressions/#data-expressions

For the layer tag, and general ordering it looks like we can use the sort-key properties:
https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#layout-line-line-sort-key
https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#layout-fill-fill-sort-key
https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#layout-symbol-symbol-sort-key
This should allow for all roads to be in a single MapLibre layer but the rendering order of different road types, tunnels, and bridges to be specified within the layer. This obviously will be one hell of a layout and paint expression, but that appears to be how other styles improve performance.

From @1ec5:

Btw, another way to reduce the number of layers is to communicate some attributes through labels instead of different line treatments. For example, I figured that construction would require a label suffix even w/ a broken line, b/c broken lines can be confused w/ other situations too: #215 (comment) I could see this kind of reinforcement being useful for access restrictions, seasonality, etc.

[ZeLonewolf]

Assigning to @jleedev based on comments in Slack that he's been working on trying to solve this problem.

Note that a PR which reduces the number of layers would be welcome even if we aren't able to smoosh it down to a single layer.

[claysmalley]

Fixed by #532.