title: Leaflet - Zoom/Pan to Layer Extent when Toggling Layers
body: <p>I am working on a bus route map, and have several routes that users can turn on and off.  I would like to work out how to zoom/pan so that the chosen route (or routes) are fully on screen when chosen. (some are off screen with the initial zoom level).</p>
  
  <p>Here's the magic so far:</p>
  
  <pre><code>var busRoute10 = L.geoJson([route10, busStop3, busStop4],{onEachFeature: onEachFeature});
  var busRoute11 = L.geoJson([route11, busStop19, busStop16, busStop18, busStop22],{onEachFeature: onEachFeature});
  var busRoute12 = L.geoJson([route12, busStop23, busStop42, busStop43, busStop15, busStop28, busStop27, busStop22, busStop16],{onEachFeature: onEachFeature});
  var busRoute13 = L.geoJson([route13, busStop44, busStop31, busStop25, busStop26, busStop36],{onEachFeature: onEachFeature});
  
  
  var baseLayers = {
  "Route 10": busRoute10,
  "Route 11": busRoute12,
  "Route 12&lt;hr&gt;": busRoute14,
  "Route 13": busRoute20,
  };
  
  L.control.layers(null, baseLayers, {collapsed: false}).setPosition ('topright').addTo(map);
  </code></pre>
  
  <p>I've tried multiple combinations of map.fitBounds, and just can't seem to get it.     </p>
  
  <p>Also, is there a way to add a title and subtitles to the control box?  I'd like to have the contols look like:</p>
  
  <p>Day<br>
  []Route 10<br>
  []Route 11<br>
  Night<br>
  []Route 12...  etc  </p>