How to show/hide labels according to zoom levels with expressions in mapbox-gl-js / maplibre-gl?

1.8k Views Asked by At

I have a point layer with an icon, and I would like to display the labels in addition to the icon only from a certain zoom level (9). I would like to avoid creating a dedicated label layer. Looking at the expression documentation, Stet and Zoom should give me the desired result, but it doesn't work.

Following this answer, I try to change the size of the text depending on the zoom level, but no matter the zoom, the text will always have the default size (here 7) Am I missing something or is it a bug? I'm using Maplibre

layout: {
          "icon-image": "border_crossing",
          "icon-size": 0.5,
          "icon-allow-overlap": true,
          'text-field': ['get', 'loc_type'],
          'text-variable-anchor': ['top'],
          'text-radial-offset': 0.5,
          'text-justify': 'auto',
          "text-size": [ "step", 
              ["zoom"], 
              0,0,
              9,15,
              7
            ]
        }
1

There are 1 best solutions below

1
On

There are various ways. One would be:

'text-field`: ["step", ["zoom"], "", 9, ["get", "loc_type"]]

It looks like you had a bug in your step code.