Syntax to set the color of a circle using data

Question

I am using earthquake data and I wish to colour the data points using the magnitude of the earthquakes. Right now I have the data points (circles) coloured depending on location but I wish to use earthquake magnitude instead. I am fairly new to mapbox and have only limited experience with javascript.

I have tried mapbox documentation but it is very confusing. Not getting anywhere.

"circle-color": [
       "match",
       ["get", "net"],
       'ak', "#fbb03b",
       "ci", "#ff3bff",
       "hv", "#e55e5e",
        "mb", "#3bb2d0",
         /* other */ "#ccc"
      ]

'net' is 2 character location code and it does work fine. I would like to pull the 'mag' (magnitude) data and set the colours depending on a range for the magnitude. I did try something like below but it does not work.

"circle-color": [
       "match",
       ["get", "mag"],
       ">5", "#fbb03b",
       ">6", "#ff3bff",
       ">7", "#e55e5e",
        ">8", "#3bb2d0",
         /* other */ "#ccc"
]

Answer 1

You're on the right track, but comparison expressions like ">5" aren't something that Mapbox-GL-JS supports.

Since you want a value to be applied to the result of an expression ("greater than 5") rather than a simple fixed value ("AK"), use a case expression instead:

"circle-color": [
       "case",
       [">", ["get", "mag"], 5], "#fbb03b",
       [">", ["get", "mag"], 6], "#ff3bff",
       [">", ["get", "mag"], 7], "#e55e5e",
       [">", ["get", "mag"], 8], "#3bb2d0",
       "#ccc"
]