title: zoom leaflet according to circle size in it
body: <p>I created an app that uses <code>Leaflet</code> in it.</p>
  <p>In the screen where the map is, there is also a <code>progressBar</code> where I allow uses to search in a specific radius.</p>
  <p>The moment they change the value in the progressBar, it changes the size of the circle marker inside the map.</p>
  <p>I had like that my map will change its zoom to fit that circle in it.</p>
  <p>My code for loading the map is:</p>
  <pre><code>    String Map_HTML = &quot;&lt;html&gt;\n&quot; +
              &quot;&lt;head&gt;\n&quot; +
              &quot;\n&quot; +
              &quot;    &lt;title&gt;Quick Start - Leaflet&lt;/title&gt;\n&quot; +
              &quot;\n&quot; +
              &quot;    &lt;meta charset=\&quot;utf-8\&quot; /&gt;\n&quot; +
              &quot;    &lt;meta name=\&quot;viewport\&quot; content=\&quot;width=device-width, initial-scale=1.0\&quot;&gt;\n&quot; +
              &quot;\n&quot; +
              &quot;    &lt;link rel=\&quot;shortcut icon\&quot; type=\&quot;image/x-icon\&quot; href=\&quot;docs/images/favicon.ico\&quot; /&gt;\n&quot; +
              &quot;\n&quot; +
              &quot;    &lt;link rel=\&quot;stylesheet\&quot; href=\&quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.css\&quot; integrity=\&quot;sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==\&quot; crossorigin=\&quot;\&quot;/&gt;\n&quot; +
              &quot;    &lt;script src=\&quot;https://unpkg.com/leaflet@1.4.0/dist/leaflet.js\&quot; integrity=\&quot;sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg==\&quot; crossorigin=\&quot;\&quot;&gt;&lt;/script&gt;\n&quot; +
              &quot;\n&quot; +
              &quot;\n&quot; +
              &quot;\n&quot; +
              &quot;&lt;style&gt;\n&quot; +
              &quot;body {\n&quot; +
              &quot;padding: 0;\n&quot; +
              &quot;margin: 0;\n&quot; +
              &quot;}\n&quot; +
              &quot;html, body, #map {\n&quot; +
              &quot;height: 100%;\n&quot; +
              &quot;width: 100%;\n&quot; +
              &quot;}\n&quot; +
              &quot;&lt;/style&gt;\n&quot; +
              &quot;&lt;/head&gt;\n&quot; +
              &quot;&lt;body&gt;\n&quot; +
              &quot;\n&quot; +
              &quot;\n&quot; +
              &quot;\n&quot; +
              &quot;&lt;div id=\&quot;mapid\&quot; style=\&quot;width: &quot; + dpWidth + &quot;px; height: &quot; + dpHeight * 0.3 + &quot;px;\&quot;&gt;&lt;/div&gt;\n&quot; +
              &quot;&lt;script&gt;\n&quot; +
              &quot;\n&quot; +
              &quot;var mymap = L.map('mapid',{zoomControl: false}).setView([&quot; + Lat + &quot;, &quot; + Lon + &quot;], 10);\n&quot; +
              &quot;\n&quot; +
              &quot;    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {\n&quot; +
              &quot;    minZoom: 7,\n&quot; +
              &quot;    maxZoom: 17,\n&quot; +
              &quot;    attribution: '&amp;copy; &lt;a href=\&quot;https://www.openstreetmap.org/copyright\&quot;&gt;OpenStreetMap&lt;/a&gt; contributors' \n&quot; +
              &quot;    }).addTo(mymap);\n&quot; +
              &quot;\n&quot; +
              &quot;mymap.attributionControl.setPosition('topleft')\n&quot; +
              &quot;L.control.zoom({\n&quot; +
              &quot;position: 'bottomright'\n&quot; +
              &quot;}).addTo(mymap);\n&quot; +
              &quot;L.marker([&quot; + Lat + &quot;, &quot; + Lon + &quot;]).addTo(mymap)\n&quot; +
              &quot;    .bindPopup(\&quot;&lt;b&gt;My Location&lt;/b&gt;\&quot;).openPopup();\n&quot; +
              &quot;\n&quot; +
              &quot;L.circle([&quot; + Lat + &quot;, &quot; + Lon + &quot;], &quot; + Radius + &quot;, {\n&quot; +
              &quot;    color: 'red',\n&quot; +
              &quot;    fillColor: '#8275FE',\n&quot; +
              &quot;    fillOpacity: 0.4,\n&quot; +
              &quot;    weight: '0'\n&quot; +
              &quot;}).addTo(mymap);\n&quot; +
              &quot;\n&quot; +
              &quot;\n&quot; +
              &quot;var popup = L.popup();\n&quot; +
              &quot;\n&quot; +
              &quot;&lt;/script&gt;\n&quot; +
              &quot;\n&quot; +
              &quot;&lt;/body&gt;\n&quot; +
              &quot;&lt;/html&gt;&quot;;
  </code></pre>
  <p>where <code>Radius</code> is a parameter I insert based on the value of the <code>progressBar</code>.</p>
  <p>Right now it always initializes the map with zoom: 10 because I don't know how to change it dynamically as I want.</p>
  <p>Any way to do so?</p>
  <p>Thank you</p>