javascriptmapbox-gl-jsmapbox-gl

Set Mapbox layer text-size based on multiple properties


I have a layer of points on my map. I want all points whose id belong to a list to be size 16 at all times. I want the remaining points to change their size based on the zoom level of the map. Each of these conditions can be accomplished separately, but I am unable to combine them.

Here is the closest I got:

this.map.setLayoutProperty('layer', 'text-size', [
    'match',
    ['get', 'id'], idsToShow, 16,
    ['interpolate', ['linear'], ['zoom'], 6, 6, 8, 16]
]);

When I try to run this I get the following error:

layers.layer.layout.text-size: "zoom" expression may only be
used as input to a top-level "step" or "interpolate" expression,
or in the properties of atmosphere.

This suggests to me that Mapbox isn't capable of using a zoom expression has a fallback. Is there a way to achieve this without splitting the data into two layers?


Solution

  • I figured it out. I need to use the match statement as the inputs for the interpolate statement.

    this.map.setLayoutProperty('my-layer', 'text-size',
           ['interpolate', ['linear'], ['zoom'],
           6, ['match', ['get', 'id'], idsToShow, 16, 6],
           8, ['match', ['get', 'id'], idsToShow, 16, 16]
        ]);