title: How do I show a label beyond a certain zoom level in Leaflet?
body: <p>I'm pretty new to the Leaflet library, and to JavaScript in general, and I'm stuck trying to figure out how to show/hide a leaflet Label based on the zoom level (and the markers are in a 'cluster' layer). </p>
  
  <p>The markers are all loaded via AJAX callback and then I bind the popup and label using the <code>onEachFeature</code>, then I add the layer of geoJson markers to the map.  </p>
  
  <p>I'd like to only show the labels when zoomed in to some level, but I haven't had any luck. I also tried adding the <code>leaflet.zoomcss.js</code> but I guess I'm not using that correctly. </p>
  
  <p><strong>Sample</strong></p>
  
  <pre><code>var officesLayerGroup = L.markerClusterGroup();
  var currentMakers;
  function DiaplyLocalOffices(jqOffices) {
  
      currentMakers = new L.geoJson(jqOffices, {
          style: function (feature) {
              var c = feature.properties.markercolor;
              if (feature.properties.OfficeID == 0) {
                  c = 'yellow';
              }
              return { color: c };
          },
          pointToLayer: function (feature, latlng) {
              return new L.CircleMarker(latlng, { radius: 7, fillOpacity: 0.5 });
          },
  
          onEachFeature: bindOfficePopup
      });
      officesLayerGroup.addLayer(currentMakers);
      map.addLayer(officesLayerGroup); 
  }
  
  function bindOfficePopup(feature, layer) {
      // This function adds the popup based on the information in the 'layer' or marker
      // Keep track of the layer(marker)
      feature.layer = layer;
  
      var props = feature.properties;
      if (props) {
          var desc = '&lt;span id="feature-popup"&gt;';
          //.. a bunch of other html added here!    
          var warn = props.Warning ? props.Warning : null;
          if (warn !== null) {
              desc += '&lt;font size="4" color="red"&gt;&lt;strong&gt;&lt;em&gt;' + warn + '&lt;/em&gt;&lt;/strong&gt;&lt;/font&gt;&lt;/br&gt;';
          }
          desc += '&lt;/span&gt;';
          layer.bindPopup(desc);
          layer.bindLabel('Hi Label!', { noHide: true, className: 'my-css-styled-labels'});
  
      }
  }
  </code></pre>
  
  <p>I've also tried adding it like this but that didn't work either:</p>
  
  <pre><code>    layer.on({
            zoomend: showLabel(e)
      });
  </code></pre>
  
  <p>and then a quickie function:</p>
  
  <pre><code>function showLabel(e) {
      z = map.getZoom();
      if (z &gt; 6) {
          layer.bindLabel("HIYA", { noHide: true, className: 'my-css-styled-labels' });
      }
  }
  </code></pre>
  
  <p>But no luck, even when adding the library and CSS styles for <code>leaflet.zoomcss.js</code></p>
  
  <p>Sorry for being lengthy, but any help would be really appreciated!  </p>