Combine two or more properties for data-driven styling

Motivation

We serve vector maps of scientific data for visualizing our datasets. The maps consist of vector shapes defined by whatever our geometry is, and we add scientific data to the shapes as various properties. For example, if we are tracking sea level in a given location, we might have a property "t" for trend, "a" for the annual amplitude, etc. This is working great and we can change map shading on the fly by choosing which property to use.

What we'd like to do is be able to combine multiple properties together: for example, we might be tracking water storage in an area and have values for "snow", "groundwater", "soil moisture", etc. and would like to on-the-fly say something like "combine snow and soil moisture and fill with that combined value." Another example might be where we have 5 different snow models, 3 soil moisture models, and 10 groundwater models, and we want to let the user pick which combination of these models to display.

Design alternatives

We could pre-compute the many different combinations of these as separate properties, but we'd like to store them as individual components and combine them in the browser. This would minimize data storage requirements and make it far more modular.

Design and Mockup

It would seem that the data-driven styling could be similar to the current setup:

"fill-color": {
        "property": "snow",
        "type": "continuous",
        "stops": ...

but allow "property" to be an array such as:

"fill-color": {
        "property": ["snow","soil-moisture"],
        "type": "continuous",
        "stops": ...

Beyond that, I don't know enough of the inner mechanics of the server to speak to design.

Concepts

This allows for data-driven styling from multiple data properties.

mapbox / mapbox-gl-js