How to hide point labels at certain zoom levels in mapbox-gl-js?
<p>I am using mapbox-gl-js to render points from a geojson file onto a map.</p>
<p>For each point I also show a label underneath the marker icon. I currently do this with the following code:</p>
<pre><code>map.addSource(&quot;mypoints&quot;, {
    type: &quot;geojson&quot;,
    data: &quot;mypoints.geojson&quot;,
});

map.addLayer({
    &quot;id&quot;: &quot;layer-mypoints&quot;,
    &quot;type&quot;: &quot;symbol&quot;,
    &quot;source&quot;: &quot;mypoints&quot;,
    &quot;layout&quot;: {
        &quot;icon-image&quot;: &quot;marker-15&quot;,
        &quot;text-field&quot;: &quot;{name}&quot;,
        &quot;text-anchor&quot;: &quot;top&quot;
    }
});
</code></pre>
<p>This works as expected and the points are added to the map and the label is rendered under each point.</p>
<p>To make the map less cluttered I would like to hide the labels when the map is zoomed out past a certain zoom level (and vice versa show the labels when the map is zoomed in). I always want to show the point icons no matter what the zoom level is.</p>