title: Zoom in so a marker is visible in LeafletJS
body: <p>I'm using the <strong>LeafletJS</strong> ( <a href="https://leafletjs.com/reference-1.3.4.html" rel="nofollow noreferrer">https://leafletjs.com/reference-1.3.4.html</a> ) and <strong>Leaflet.markerclusterer</strong> ( <a href="https://github.com/Leaflet/Leaflet.markercluster" rel="nofollow noreferrer">https://github.com/Leaflet/Leaflet.markercluster</a> ) to create a map on my site. I've almost finished work on it, but I can't figure out one last part.</p>
  
  <p>What I do is show a list of the markers in the viewport like so:</p>
  
  <p><a href="https://i.stack.imgur.com/T3uVG.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/T3uVG.jpg" alt="enter image description here"></a></p>
  
  <p>Then if you click on one of them in the bottom row, it will <code>panTo()</code> the correct area. </p>
  
  <p>The issue I'm having is that if (as you can see in my example) the link happens to be in a cluster at this level, then you can't see it. How would one force it to zoom. </p>
  
  <p>What I need is a method to zoom in one step at a time, until its visible. </p>
  
  <pre><code>window.VARS.markerCluster.eachLayer(function (layer) {
  
          if (layer.options.linkid == linkid) {
  
                  console.dir(layer);
                  window.VARS.Map_Modal.panTo(layer.getLatLng());
  
          }
  
  });
  </code></pre>
  
  <p>This is some code I used on Google Maps to achieve the same thing, but obvioulsy it doesn't</p>
  
  <pre><code>           var zoom = window.VARS.Google_Map_Modal.getZoom();
              window.VARS.Google_Map_Modal.setCenter(window.VARS.markers[e.getAttribute('data-what')].getPosition());
              var zoomInterval = setInterval(function() {
                   if(!window.VARS.markers[e.getAttribute('data-what')].map) {
                       zoom++
                       if (zoom &lt; 15) {
                          window.VARS.Google_Map_Modal.setZoom(zoom++);
                      }
                   } else {
                       clearInterval(zoomInterval);
                   }
              }, 300);
  </code></pre>