How do I interpolate based on max value from geoJSON properties. Using Mapbox paint, circle-color, Data driven expressions

Question

I am using Mapbox GL in a React project and would like to set the circle color of the data points based on a property from the source geoJSON. My goal is to color the circle green for low values and red for high values. Anything in between will be a color gradient. So for example, if my data points range in value from 0 to 100. 0 should be green, 100 would be red and 50 would be amber.

Here is what I have tried:

 paint: { 'circle-radius': 10, 'circle-color': [ 'let', 'maxVal', ['max', ['get', 'P1_H']], [ 'interpolate', ['linear'], ['get', 'P1_H'], 0, 'green', ['var', 'maxVal'], 'red' ] ] }

But this gives me the error:

Input/output pairs for "interpolate" expressions must be defined using literal numeric values (not computed expressions) for the input values.

The biggest problem for me is that I don't know ahead of time what the max value will be in the source data. It might be 20 or it might be 80, I just don't know. So hard coding a number doesn't work for me. The minimum value may change as well, but for now I'm focused on the max value. So my question is, how can I interpolate the circle color based on the feature that has the highest value in the chosen property?

Answer 1

Your first problem is that it looks like you're using var incorrectly and that's messing up your syntax. You don't seem to need it, so why not just:

paint: {
      'circle-radius': 10,
      'circle-color': [
          'interpolate',
          ['linear'],
          ['get', 'P1_H'],
          0, 'green',
          MAXVAL,
          'red'
        ]
      ]
    }

Your second problem is that ['max'] doesn't work the way you want it to. I think you're hoping it will tell you the maximum value out of all the values in the layer. It doesn't. It tells you the maximum value out of the values supplied to it in the function call. So you're going to have to compute what I have labelled MAXVAL some other way.