I would like to set data driven style for a layer in MapBox GL JS. I want to use two fields: "category" (string) and "status" (string) and display the points with custom SVG icons. I am trying to write a filter that will match on values from these two properties of the data source.

I'm just want to find the correct syntax for this:

CASE WHEN category IN ('1,'2','3') AND status = 'OK' THEN icon = 'svg2'
WHEN category IN ('4',5') AND status = 'OK' THEN icon = 'svg1'
ELSE icon = 'svg3'

So, I have to convert this expression to MapBox syntax.

I wrote this expression:

  ["get", "category"],
  ["1", "2", "3"],
  ["4", "5"],

But this is not enough. I want to use two conditions with AND operator, because I must check the "status" property too.

How to do this?

1 Answer 1


Have a look at Mapbox GL expressions case at https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#case and all at https://docs.mapbox.com/mapbox-gl-js/style-spec/expressions/#all.

Your expression could then looks something like:

[ "case",
      ["match", ["get", "category"], ["1", "2", "3"]],
      ["==", ["get", "status"], "OK"]
    ], "svg1",
      ["match", ["get", "category"], ["4", "5"]],
      ["==", ["get", "status"], "OK"]
    ], "svg2",

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.