leaflet reset zoom button

leaflet-reset-zoom-button.js

// preview what this looks like: https://imgur.com/a/jmAnZUd

(function() {
  var control = new L.Control({position:'topleft'});
  control.onAdd = function(map) {
      var azoom = L.DomUtil.create('a','mt-0');
      azoom.innerHTML = '<div class="leaflet-control-zoom leaflet-bar leaflet-control mt-0 ms-0"><a class="leaflet-control-reset-zoom" title="Reset zoom" role="button" aria-label="Reset zoom"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2 13.5V7h1v6.5a.5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5V7h1v6.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5zm11-11V6l-2-2V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5z"/><path fill-rule="evenodd" d="M7.293 1.5a1 1 0 0 1 1.414 0l6.647 6.646a.5.5 0 0 1-.708.708L8 2.207 1.354 8.854a.5.5 0 1 1-.708-.708L7.293 1.5z"/></svg></a></div>';
      L.DomEvent
        .disableClickPropagation(azoom)
        .addListener(azoom, 'click', function() {
          map.setView(map.options.center, map.options.zoom);
        },azoom);
      return azoom;
    };
  return control;
}())
.addTo(map);

// Add these styles manually if you're not using Bootstrap 5.0
// <style>
//   mt-0 {
//     margin-top: 0px;
//   }
//   ms-0 {
//     margin-left: 0px;
//   }
// </style>