Can I use an "in" expression nested inside "case" in Mapbox?

Question

I'm trying to dynamically change the icon-size of some points on my Mapbox map, and am running an issue I can't seem to fix. The icon size should change depending on whether the "key" for the given data point is in a list of selected keys. Here's the code I have thus far:

mapRef
    .getMap() // Using a React reference, getting the map itself
    .setLayoutProperty(layer, "icon-size", [
        "case",
        [
            "in",
            ["get", key],
            selectedData // Mapping an immutable list to the keys
                .toArray()
                .map(data => data[key as keyof CommonData])
        ],
        1.5,
        1
    ]
);

This seems like it should do what I want, but when I try to run it I get Error: "layers.stl-crimes.layout.icon-size[1][0]: Unknown expression "in". If you wanted a literal array, use ["literal", [...]]."

I'm pretty confused by this, as I would think I could use the in expression inside the case expression. I've tried adding a literal expression to the array, as well as a to-string expression around the get expression, but all to no avail. Any help would be greatly appreciated, thanks!

Adam Kern Adam Kern · Accepted Answer · 2020-02-24T20:45:38

For anyone who may come upon this, it was a versioning problem. The in operator doesn't exist until Mapbox GL JS >1.6.0; I was on an earlier version. More information about the versioning of operators can be found here.

Can I use an "in" expression nested inside "case" in Mapbox?

1 Answers